Scroll Reveal Image

Component 219

About

A scroll-driven image that expands its width, zooms out, and animates its border radius with spring physics as it enters the viewport.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Reveal Image to your project and fits it to your theme.

Code

How Scroll Reveal Image is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import ScrollRevealImage from "@/components/ui/scroll-reveal-image";
import { useRef } from "react";

const IMAGES = [
  {
    src: "https://cdn.21st.dev/assets/mirror/ef/efe41d9315ef45c6e5759684ea002da607502d4457888e451a257ee6a38e1db9.jpg",
    alt: "Landscape — wide cinematic shot",
    height: "900px",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/d3/d39c0f8efdd8969bce6fe026aa060c133e91436b4da293c3e8eb69af77e62365.jpg",
    alt: "Portrait — vertical composition",
    height: "90vh",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/0b/0b9ef6fff23ee3255a419d5ad0e5c6610d9a4e54a3441136e15f01b255594567.jpg",
    alt: "Panoramic — mountain range",
    height: "50vh",
  },
];

export function ScrollRevealImageDemo({
  fromWidth = "40%",
  toWidth = "95%",
  fromScale = 1.6,
  toScale = 1,
  fromRadius = "0px",
  toRadius = "22px",
  stiffness = 120,
  damping = 80,
}: {
  fromWidth?: string;
  toWidth?: string;
  fromScale?: number;
  toScale?: number;
  fromRadius?: string;
  toRadius?: string;
  stiffness?: number;
  damping?: number;
}) {
  const scrollRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={scrollRef} className="w-full h-full overflow-y-auto">
      <div className="space-y-23 flex flex-col gap-12 pb-[50vh] pt-[50vh]">
        {IMAGES.map((img) => (
          <ScrollRevealImage
            key={img.src}
            src={img.src}
            alt={img.alt}
            height={img.height}
            fromWidth={fromWidth}
            toWidth={toWidth}
            innerWidth="95%"
            fromScale={fromScale}
            toScale={toScale}
            fromRadius={fromRadius}
            toRadius={toRadius}
            stiffness={stiffness}
            damping={damping}
            container={scrollRef}
          />
        ))}
      </div>
    </div>
  );
}

export default ScrollRevealImageDemo;