A pinned photo stage where each scroll-linked image grows from a small point in the center, developing from an oversaturated, high-contrast state into the true image as it settles.
"use client";
import { useRef } from "react";
import { ScrollImageTunnel } from "@/components/ui/scroll-image-tunnel";
const IMAGES = [
{
src: "https://cdn.21st.dev/assets/mirror/38/381691b8480ae8bbfd361096cdb92ba9778b3cdaf4f0d6482f2453ed2d661e64.jpg",
alt: "Surreal illustration of a diver silhouetted inside a sunset seascape shaped like a profile",
},
{
src: "https://cdn.21st.dev/assets/mirror/4c/4c303460c0d508baa30af497b8bdad6d9e71dc151070fdba3eeb668682da64f2.jpg",
alt: "Double-exposure portrait of a profile blended with a city skyline at dusk",
},
{
src: "https://cdn.21st.dev/assets/mirror/3b/3bec7ace437245c7a268ba959acc08386b74654253daeb09cf5ebaa35fe564b4.jpg",
alt: "Motion-blurred side-profile portrait against a deep orange backdrop",
},
{
src: "https://cdn.21st.dev/assets/mirror/b1/b1ae187217e870f39053363e115d7b9f3d3948730ef115a19778c7f75c03370a.jpg",
alt: "Illustration of a figure holding a racket that dissolves into a swirling colorful cloud at dusk",
},
{
src: "https://cdn.21st.dev/assets/mirror/47/47e5e8e0e894dd439c0a7416f49722b35622f5a27e7964d1ca3ebcbed087656f.jpg",
alt: "Black-and-white photo of a hand gesture with a colorful cutout of a bird flying through the fingers",
},
];
export default function DemoOne() {
const containerRef = useRef<HTMLDivElement>(null);
return (
<div
ref={containerRef}
data-scroll-image-tunnel-demo
className="relative w-full h-screen overflow-y-auto overflow-x-hidden"
style={{ scrollbarWidth: "none" }}
>
<style
dangerouslySetInnerHTML={{
__html: `[data-scroll-image-tunnel-demo]::-webkit-scrollbar{display:none}`,
}}
/>
<ScrollImageTunnel
images={IMAGES}
container={containerRef}
stepHeight="150vh"
/>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.