BEVEL UI

Aurora Hero

Component 29

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aurora Hero to your project and fits it to your theme.

Code

How Aurora Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
      }
    />
  )
}

Dependencies

More by BEVEL UI

View all
  • Prism Hero

    Prism Hero

    866
  • Lattice Hero

    Lattice Hero

    42