A WebGL shader transition wrapper that reveals swapped content with a luminance-driven displacement effect, useful for animating between images or views on a key change.
"use client";
import ShaderRevealLumaTransition from "@/components/ui/shader-reveal-luma-transition";
import { useState } from "react";
const SLIDES = [
{
key: 0,
from: "#f97316",
to: "#ec4899",
label: "One",
},
{
key: 1,
from: "#06b6d4",
to: "#6366f1",
label: "Two",
},
{
key: 2,
from: "#22c55e",
to: "#eab308",
label: "Three",
},
];
export default function ShaderRevealLumaTransitionDemo() {
const [index, setIndex] = useState(0);
const slide = SLIDES[index % SLIDES.length];
return (
<div className="flex w-full h-screen items-center justify-center">
<div className="flex flex-col items-center gap-4">
<ShaderRevealLumaTransition
className="h-72 w-72"
transitionKey={slide.key}
>
<div
className="flex h-72 w-72 items-center justify-center text-4xl font-semibold text-white"
style={{
background: `linear-gradient(135deg, ${slide.from}, ${slide.to})`,
}}
>
{slide.label}
</div>
</ShaderRevealLumaTransition>
<button
className="rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
onClick={() => setIndex((current) => current + 1)}
type="button"
>
Next
</button>
</div>
</div>
);
}
Part of SmoothUI — browse the full library on 21st.dev.