A layered scene where consumer-supplied background/foreground layers travel at depth-proportional rates as the page scrolls and drift subtly with the pointer, used for parallax heroes and depth-of-field storytelling sections.
"use client";
import { DepthParallaxScene } from "@/components/ui/depth-parallax-scene";
function Sky() {
return (
<div className="absolute inset-0">
<div className="absolute inset-0 bg-gradient-to-b from-[#0a1224] via-[#0d1b33] to-[#122543]" />
<div className="absolute right-[18%] top-[22%] h-56 w-56 rounded-full bg-[#3b6fe0]/40 blur-3xl" />
</div>
);
}
function FarRidge() {
return (
<div className="absolute inset-0 flex items-end justify-center">
<div className="h-[55%] w-[150%] rounded-t-[50%] bg-[#0c1830]/90" />
</div>
);
}
function City() {
const heights = [38, 62, 46, 78, 54, 70, 42, 58];
return (
<div className="absolute inset-0 flex items-end justify-center gap-3 px-12 pb-0">
{heights.map((h, i) => (
<div
key={i}
className="relative w-9 rounded-t-sm bg-[#1b2b45]"
style={{ height: `${h}%` }}
>
<span className="absolute left-1/2 top-3 h-[3px] w-5 -translate-x-1/2 rounded-full bg-[#5fd3e8] shadow-[0_0_10px_2px_rgba(95,211,232,0.7)]" />
</div>
))}
</div>
);
}
function FloatingCards() {
return (
<div className="absolute inset-0 flex items-center justify-center">
<div className="h-28 w-28 rounded-full border border-white/20 bg-gradient-to-br from-[#5fd3e8]/60 to-[#3b6fe0]/60 shadow-[0_0_60px_10px_rgba(95,211,232,0.35)] backdrop-blur" />
</div>
);
}
export default function DepthParallaxSceneDemo() {
return (
<div className="flex w-full items-center justify-center bg-[#080c14] p-6">
<div className="w-full max-w-2xl overflow-hidden rounded-2xl border border-[#1c2a3f]">
<DepthParallaxScene
scrollMode="container"
layers={[
{ node: <Sky />, depth: 0.06 },
{ node: <FarRidge />, depth: 0.16, blurAtDepth: 2.5 },
{ node: <City />, depth: 0.32 },
{ node: <FloatingCards />, depth: 0.78 },
]}
range={180}
height={420}
label="Layered ridge scene with floating interface cards."
/>
</div>
</div>
);
}
Part of Motiq — browse the full library on 21st.dev.