Prism Hero

Heroes 866

About

A scroll-driven hero built around a faceted crystal that genuinely refracts the headline behind it — real transmission with chromatic dispersion, not a blur filter. The headline is rendered to a canvas texture inside the 3D scene, so the glass bends the actual type. Fully procedural: no GLTF models, no HDRI, no textures, no external assets of any kind, which means it survives being pasted into an agent and renders in any sandbox. Adaptive quality tiers scale samples and buffer resolution by device, rendering pauses when the hero scrolls off-screen, and a staticProgress prop pins the build for marketplace covers. Respects prefers-reduced-motion.

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

Code

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

Usage.tsx

"use client"

import { PrismHero } from "@/components/ui/prism-hero"

export default function PrismHeroDemo() {
  return (
    <PrismHero
      eyebrow="Bevel UI"
      headline="Refraction"
      description="A faceted crystal with real transmission and chromatic dispersion, refracting the headline behind it. No models, no HDRI, no external assets."
      meta={["Procedural geometry", "Real transmission", "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>
      }
    />
  )
}