A giant dark headline silhouetted against a drifting aurora, rim-lit like an eclipse, with a faint reflection on a glowing horizon line. Quiet, nocturnal and built around the type.
Nocturne for Mac and iPad
A calm writing space with a night palette tuned for tired eyes, timed focus sessions and private sync across your devices.
npx shadcn@latest add https://hyperblur.dev/r/hero-aurora-lit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-aurora-lit.tsx.
import { HeroAuroraLit } from "@/components/hyperblur/hero-aurora-lit"
<HeroAuroraLit title="Sleep on it" colors={["#a3e635", "#22d3ee", "#6366f1"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Nocturne for Mac and iPad" | Tracked uppercase line with hairlines. Hidden when empty. |
| title | string | "Write in the quiet hours" | Giant headline lit from behind. |
| subtitle | string | "A calm writing space..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Download for Mac", href: "#" } | White button with an aurora glow. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Read the manifesto", href: "#" } | Outlined button. null hides it. |
| colors | [string, string, string] | ["#34f5c5", "#3b82f6", "#c026d3"] | The aurora colors. The first also lights the letter edges. |
| reflection | boolean | true | Shows the mirrored headline and horizon line. |
| speed | number | 1 | Multiplier for the aurora drift. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |