A full-viewport hero: a sheet of silk drifting toward the horizon, shaded by thin-film iridescence. The surface is a simplex-displaced plane with finite-difference normals and the colour is a fresnel-driven ramp - no textures, no environment map, no external assets, so it renders anywhere with no network. Sizes to its container rather than the viewport, so it works dropped into a section as well as used as a full-screen hero. Layout and breakpoints are Tailwind classes; only the themeable colours are inline, and every one of them is a prop. Adaptive quality tiers pick segment count and octaves from viewport and core count, the frameloop stops when the hero scrolls off screen, reduced motion is respected, and a staticTime prop pins the clock for deterministic covers.
"use client"
import { AuroraHero } from "@/components/ui/aurora-hero"
export default function AuroraHeroDemo() {
return (
<AuroraHero
eyebrow="Bevel UI"
headline="Iridescence"
description="A sheet of silk drifting toward the horizon, shaded by thin-film interference. Procedural geometry, procedural colour — no textures, no environment map, no external assets."
meta={["Simplex displacement", "Thin-film shading", "Zero assets"]}
action={
<a
href="#"
className="inline-flex h-11 items-center rounded-full bg-[#EDE8DF] px-7 font-mono text-[11px] uppercase tracking-[0.18em] text-[#08080B] transition-transform duration-300 hover:-translate-y-0.5"
>
Get started
</a>
}
secondaryAction={
<a
href="#"
className="inline-flex h-11 items-center rounded-full border border-[#EDE8DF3d] px-7 font-mono text-[11px] uppercase tracking-[0.18em] text-[#EDE8DF] transition-colors duration-300 hover:bg-white/5"
>
Documentation
</a>
}
/>
)
}