A WebGL circle-shaped reveal wrapper that animates content changes with an SDF shader transition.
"use client";
import SdfCircleTransition from "@/components/ui/sdf-circle-transition";
import { useState } from "react";
export default function SdfCircleTransitionDemo() {
const [count, setCount] = useState(0);
return (
<div className="flex w-full h-screen items-center justify-center bg-background">
<SdfCircleTransition
transitionKey={count}
className="flex h-64 w-64 items-center justify-center"
>
<button
type="button"
onClick={() => setCount((c) => c + 1)}
className="flex h-64 w-64 flex-col items-center justify-center gap-2 rounded-2xl bg-muted text-foreground transition-colors hover:bg-muted/80"
>
<span className="text-4xl font-semibold">{count}</span>
<span className="text-sm text-muted-foreground">
Click to transition
</span>
</button>
</SdfCircleTransition>
</div>
);
}
Part of SmoothUI — browse the full library on 21st.dev.