Components
Silk Aurora
An animated full-screen WebGL hero background with satin-dark aurora ribbons, pearlescent sheen, film grain, and cursor-driven depth, with slots for title, subtitle, and description.
import { SilkAurora } from "@/components/ui/silk-aurora";
const settings = {
speed: 1,
intensity: 1,
grain: 0.85,
mouseInfluence: 1,
vignette: 1,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<SilkAurora
className="h-full min-h-0"
speed={s.speed}
intensity={s.intensity}
grain={s.grain}
mouseInfluence={s.mouseInfluence}
vignette={s.vignette}
/>
</div>
);
}