Lumen CTA

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { LumenCta } from '@/components/effects/lumen-cta/lumen-cta'

// 1. The closing band of a landing page. It fills its parent, or takes a height.
export function Closing() {
  return (
    <section className="px-4 pb-10">
      <LumenCta
        preset="Lagoon"
        height={380}
        headline="Let your next launch catch the light."
        subline="Everything you need to ship a page people remember."
        primaryLabel="Start for free"
        primaryHref="/signup"
        secondaryLabel="Talk to sales"
        secondaryHref="/contact"
      />
    </section>
  )
}

// 2. A click handler instead of a link: pressing the primary button also sends a ripple across the band.
export function Waitlist() {
  return <LumenCta preset="Prism" align="center" primaryLabel="Join the waitlist" onClick={() => setOpen(true)} />
}

// 3. Your own colours. Text turns light or dark by itself; force it with textMode.
export function Branded() {
  return <LumenCta background="#1b0f3a" light="#ffe9a8" accent="#8a5bff" medium="glass" dispersion={0.8} />
}

// Presets: Lagoon, Prism, Dawn, Glacier (a light band with dark text), Noir. Any prop you pass overrides the preset.
// The stage above is <LumenCtaShowcase />, also exported: the band at the bottom of a faux landing page.

<LumenCta preset="Prism" medium={"water"} />

• Lagoon
• Prism
• Dawn
• Glacier
• Noir

• The light is real caustics, not noise: the shader builds a height field from travelling waves and finds where the surface bunches the rays up, which is where a pool floor shows its bright web. Cusps blaze, long folds stay faint, and the whole web slowly rearranges. Dispersion splits the light into a true spectrum at the brightest lines.
• The pointer is a lens. Light focuses and brightens around the cursor, and the lines bend around it; push Pointer focus past 1 and a bright ring forms. On touch, pressing and dragging does the same. When the pointer leaves, the lens fades out.
• Pressing the primary button, with a mouse, a finger or Enter and Space, sends a ripple across the band from where you pressed. The ripple refracts the whole web as it passes.
• The primary button is a glass pill drawn into the light: it magnifies the caustics beneath it, and a lit rim wraps it wherever a bright line runs into its edge, strongest on the side facing the light. The label is ordinary text on top, so it stays crisp, selectable and accessible. The secondary button is a quiet glass outline with a faint rim.
• Text stays legible in every frame: the light is turned down behind the text block, a soft scrim backs it up, and the sub-line is a solid colour chosen for at least 4.5:1 contrast. Text colour follows the surface (white on dark looks, ink on the light Glacier look); set Text colour to force one.
• On a narrow band the buttons stack and fill the width. Left-aligned text sits on the calm side; the light comes in from the opposite corner.
• It pauses while off screen and in a background tab, lowers its resolution automatically if frames run slow, and draws one composed still frame under prefers-reduced-motion (no ripple). Without WebGL, and before the first frame, you see a poster: the same colours as a gradient with a faint caustic web made from an SVG filter.

See all effects