Two rails of images ride out of the vanishing point at the centre and sweep to both edges, growing and turning as they approach. Perspective does the sweep and the growth at once, and the loop never stops.
// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos
import { ImageStreamHero } from "@/components/ui/image-stream-hero";
const CDN = "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev";
const IMAGES = [
{
src: `${CDN}/stock-images/767d99bb371a54d0d36751e8cecae43c.jpg`,
alt: "Diver silhouetted inside a sunset seascape shaped like a profile",
},
{
src: `${CDN}/gradients/hero_gradient/hero-gradients-01.png`,
alt: "Soft multi-tone gradient wash",
},
{
src: `${CDN}/stock-images/821d815affa6496c39cbdeeec7a84603.jpg`,
alt: "Double-exposure portrait blended with a city skyline at dusk",
},
{
src: `${CDN}/gradients/crimson_aura/crimson-aura-02.png`,
alt: "Crimson aura gradient",
},
{
src: `${CDN}/stock-images/937438c560ada1c83317f2c11b3454b0.jpg`,
alt: "Motion-blurred side-profile portrait against a deep orange backdrop",
},
{
src: `${CDN}/gradients/hue-flow/hue-flow-01.png`,
alt: "Flowing hue gradient",
},
{
src: `${CDN}/stock-images/98f89cb9994f5c382ab964062c4039db.jpg`,
alt: "Figure holding a racket that dissolves into a swirling colourful cloud",
},
{
src: `${CDN}/gradients/moon/moon-grade-03.png`,
alt: "Moon-toned gradient",
},
{
src: `${CDN}/stock-images/ddcbee38be8b7274e19e132d7ab35b53.jpg`,
alt: "Hand gesture with a colourful cutout of a bird flying through the fingers",
},
{
src: `${CDN}/gradients/hero_gradient/hero-gradients-03.png`,
alt: "Layered hero gradient",
},
{
src: `${CDN}/gradients/hue-flow/hue-flow-02.png`,
alt: "Second flowing hue gradient",
},
{
src: `${CDN}/gradients/moon/moon-grade-05.png`,
alt: "Deep moon-toned gradient",
},
];
// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
return (
<ImageStreamHero
images={IMAGES}
className="h-[560px] w-full rounded-lg border border-border bg-background"
>
<div className="relative z-10 flex h-full flex-col items-center justify-between py-12 text-center">
<div className="px-6">
<h1 className="text-balance text-4xl font-medium tracking-tight text-foreground sm:text-5xl">
Your work,
<br />
front and centre.
</h1>
</div>
<p className="max-w-md text-balance px-6 text-sm text-muted-foreground">
A hero that leads with the images instead of describing them. Swap in
your own and the corridor rebuilds around them.
</p>
</div>
</ImageStreamHero>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.