Glass Headline Hero

Heroes 233

About

Refractive glass text hero section: the headline is thick WebGL glass, and a slow colour field flows behind it and bends through the letters with prism fringes while the light follows the pointer. The headline stays a real h1 for SEO and screen readers. WebGL2, React only.

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

Code

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

Usage.tsx

"use client"

import GlassHeadlineHero from "@/components/ui/glass-headline-hero"

export default function Demo() {
  return (
    <GlassHeadlineHero
      eyebrow="Lumen 2.0 is here"
      title="Bend the light"
      description="Interfaces that feel crafted, not assembled. Lumen turns your design tokens into production UI in an afternoon."
      primaryAction={{ label: "Start for free", href: "#" }}
      secondaryAction={{ label: "Watch the film", href: "#" }}
    />
  )
}