Aurora

1import * as React from "react"
2import { cn } from "@/lib/utils"
3 
4/**
5 * Keyframes ship inside the component via React 19 hoisted <style> —
6 * no tailwind config edits, and duplicates dedupe by href.
7 */
8const KEYFRAMES = `@keyframes zy-aurora-a{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(18%,12%,0) scale(1.15)}66%{transform:translate3d(-10%,22%,0) scale(0.9)}}
9@keyframes zy-aurora-b{0%,100%{transform:translate3d(0,0,0) scale(1.05)}33%{transform:translate3d(-16%,14%,0) scale(0.92)}66%{transform:translate3d(12%,-10%,0) scale(1.18)}}
10@keyframes zy-aurora-c{0%,100%{transform:translate3d(0,0,0) scale(0.95)}40%{transform:translate3d(14%,-18%,0) scale(1.12)}70%{transform:translate3d(-18%,-6%,0) scale(1)}}`
11 
12/** color-mix alpha tier per intensity — the single knob for how loud the glow is. */
13const ALPHA = {
14  subtle: "20%",
15  medium: "32%",
16  bold: "45%",
17} as const
18 
19export interface AuroraProps extends React.ComponentProps<"div"> {
20  /** Opacity tier of the glow blobs. */
21  intensity?: keyof typeof ALPHA
22  /** Seconds per drift cycle of the base blob; the other blobs derive their duration from it. */
23  speed?: number
24}
25 
26/**
27 * Aurora — an animated aurora-gradient background container.
28 * Pure CSS (no hooks, no browser APIs), so it stays a server component.
29 */
30export function Aurora({
31  intensity = "medium",
32  speed = 18,
33  className,
34  style,
35  children,
36  ...props
37}: AuroraProps) {
38  return (
39    <div
40      className={cn("relative isolate overflow-hidden", className)}
41      style={
42        {
43          "--zy-aurora-speed": `${speed}s`,
44          "--zy-aurora-alpha": ALPHA[intensity],
45          ...style,
46        } as React.CSSProperties
47      }
48      {...props}
49    >
50      <style href="zyeon-aurora" precedence="medium">
51        {KEYFRAMES}
52      </style>
53 
54      <div aria-hidden="true" className="pointer-events-none absolute inset-0">
55        <div
56          className={cn(
57            "absolute -left-[20%] -top-[35%] h-[80%] w-[65%] rounded-full blur-3xl",
58            "[background:radial-gradient(closest-side,color-mix(in_oklab,var(--primary)_var(--zy-aurora-alpha),transparent),transparent)]",
59            "[animation:zy-aurora-a_var(--zy-aurora-speed)_ease-in-out_infinite] motion-reduce:[animation:none]",
60          )}
61        />
62        <div
63          className={cn(
64            "absolute -right-[15%] -top-[25%] h-[70%] w-[55%] rounded-full blur-3xl",
65// … truncated