# OPUS UI — full reference

Source of truth: https://opusui.131199999.xyz. Per-item markdown with full source: https://opusui.131199999.xyz/md/<slug>.

## Aurora (`aurora`)

Backgrounds / Shader. Northern-lights curtains with drifting vertical rays and a twinkling sky. The nearest curtain leans toward the pointer and glows brighter where you hover.

File: components/opus/backgrounds/aurora.tsx

```tsx
import { Aurora } from "@/components/opus/backgrounds/aurora";

<section className="relative h-[80vh]">
  <Aurora className="absolute inset-0" />
  <div className="relative z-10">…your content</div>
</section>
```

- `colorA`: string = "#2af5a4" — Lower edge of the curtains (hex).
- `colorB`: string = "#7c5cff" — Upper glow of the curtains (hex).
- `colorC`: string = "#22d3ee" — Third curtain + pointer glow (hex).
- `background`: string = "#050510" — Sky colour (hex).
- `intensity`: number = 1 — Overall brightness, 0.2–2.
- `height`: number = 1 — How tall the curtains reach, 0.4–2.
- `stars`: boolean = true — Twinkling stars behind the aurora.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Mesh Gradient (`mesh-gradient`)

Backgrounds / Shader. A Stripe-style liquid gradient: four colour centres orbit on Lissajous paths, blended in linear light through a two-stage domain warp. The pointer is a soft gravity well that drags the colours toward it.

File: components/opus/backgrounds/mesh-gradient.tsx

```tsx
import { MeshGradient } from "@/components/opus/backgrounds/mesh-gradient";

<MeshGradient colors={["#7c5cff", "#ff5ea8", "#22d3ee", "#0b1026"]} className="absolute inset-0" />
```

- `colors`: [string, string, string, string] — Four hex colours; the last one tends to fill the edges.
- `warp`: number = 1 — Domain-warp strength — 0 calm, 2 liquid.
- `grain`: number = 0.06 — Animated film grain (0–0.2).
- `pull`: number = 1 — Strength of the pointer’s gravity well.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Silk (`silk`)

Backgrounds / Shader. Satin folds rendered as a lit height-field: normals from finite differences, diffuse + Blinn specular + anisotropic sheen. Your pointer is the light source.

File: components/opus/backgrounds/silk.tsx

```tsx
import { Silk } from "@/components/opus/backgrounds/silk";

<Silk color="#6d4dff" className="absolute inset-0" />
```

- `color / shadow / sheen`: string — Fabric, fold-shadow and highlight colours.
- `scale`: number = 1 — Fold frequency.
- `depth`: number = 1 — Fold depth (affects shading contrast).
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Liquid Marble (`liquid-marble`)

Backgrounds / Shader. Inigo-Quilez-style triple domain warp f(p + f(p + f(p))) coloured from four inks. The pointer stirs a vortex into the flow, faster when you move faster.

File: components/opus/backgrounds/liquid-marble.tsx

```tsx
import { LiquidMarble } from "@/components/opus/backgrounds/liquid-marble";

<LiquidMarble className="absolute inset-0" />
```

- `colors`: [string, string, string, string] — Base, ink, vein, highlight.
- `scale`: number = 1 — Pattern zoom.
- `contrast`: number = 1 — Vein contrast.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Metaballs (`metaballs`)

Backgrounds / Shader. A lava lamp of implicit-surface blobs with fake-3D shading from the field gradient. One blob is glued to your pointer and merges with the others on contact.

File: components/opus/backgrounds/metaballs.tsx

```tsx
import { Metaballs } from "@/components/opus/backgrounds/metaballs";

<Metaballs colorA="#ff4d8d" colorB="#ffb86b" className="absolute inset-0" />
```

- `colorA / colorB`: string — Vertical blob gradient.
- `background`: string = "#0c0612" — Backdrop colour.
- `size`: number = 1 — Blob radius multiplier.
- `count`: number = 7 — Drifting blobs (2–10).
- `glow`: number = 0.8 — Halo around the blobs.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Topography (`topography`)

Backgrounds / Shader. Animated contour map with anti-aliased isolines (via fwidth) and bolder index contours. The pointer raises a hill; clicking drops a ring of terrain that spreads outward.

File: components/opus/backgrounds/topography.tsx

```tsx
import { Topography } from "@/components/opus/backgrounds/topography";

<Topography className="absolute inset-0" />
```

- `lineColor / accent`: string — Regular contour and every-5th index contour colours.
- `background`: string — Map colour.
- `density`: number = 14 — Contours per unit height.
- `thickness`: number = 1.2 — Line weight (px).
- `hill`: number = 1.2 — Height of the pointer hill.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Halftone Waves (`halftone-waves`)

Backgrounds / Shader. A rotated halftone screen whose dot sizes ride interfering waves. Hovering swells a lens of bigger dots; clicking sends a ring across the grid.

File: components/opus/backgrounds/halftone-waves.tsx

```tsx
import { HalftoneWaves } from "@/components/opus/backgrounds/halftone-waves";

<HalftoneWaves cell={14} shape="circle" className="absolute inset-0" />
```

- `colorA / colorB`: string — Ink gradient across the screen.
- `background`: string — Paper colour.
- `cell`: number = 14 — Dot pitch in CSS px (resolution independent).
- `angle`: number = 20 — Screen angle in degrees.
- `shape`: "circle" | "square" | "diamond" = "circle" — Dot shape.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Voronoi Glass (`voronoi-glass`)

Backgrounds / Shader. Stained-glass cells from an animated Voronoi diagram with bevelled shading and glowing leads. The cell under the pointer lights up and its neighbours’ edges glow.

File: components/opus/backgrounds/voronoi-glass.tsx

```tsx
import { VoronoiGlass } from "@/components/opus/backgrounds/voronoi-glass";

<VoronoiGlass scale={5} className="absolute inset-0" />
```

- `colorA / colorB`: string — Cell colours (randomly mixed per cell).
- `edge`: string — Lead / edge glow colour.
- `scale`: number = 5 — Cells across the short side.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Hyperspace (`hyperspace`)

Backgrounds / Shader. Jump-to-lightspeed star streaks in three rotated layers. The vanishing point steers toward your pointer, and every click punches the throttle for a burst.

File: components/opus/backgrounds/hyperspace.tsx

```tsx
import { Hyperspace } from "@/components/opus/backgrounds/hyperspace";

<Hyperspace warp={0.6} className="absolute inset-0" />
```

- `colorA / colorB`: string — Star colours (cores fade to white).
- `warp`: number = 0.6 — Streak length — 0 gives point stars.
- `density`: number = 1 — Star count multiplier.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Synthwave Grid (`synthwave-grid`)

Backgrounds / Shader. An outrun horizon: infinite perspective grid, striped sun, noise-carved mountains and twinkling sky. Move the pointer to pan and tilt the camera.

File: components/opus/backgrounds/synthwave-grid.tsx

```tsx
import { SynthwaveGrid } from "@/components/opus/backgrounds/synthwave-grid";

<SynthwaveGrid className="absolute inset-0" />
```

- `gridColor`: string — Neon grid lines.
- `sunTop / sunBottom`: string — Sun gradient.
- `skyTop / skyBottom`: string — Sky gradient.
- `sun / mountains`: boolean = true — Toggle scene elements.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Event Horizon (`event-horizon`)

Backgrounds / Shader. A black hole with gravitational lensing, a Doppler-beamed accretion disk, a photon ring and the far side of the disk bent over the shadow. It drifts toward your pointer and warps the starfield behind it.

File: components/opus/backgrounds/event-horizon.tsx

```tsx
import { EventHorizon } from "@/components/opus/backgrounds/event-horizon";

<EventHorizon className="absolute inset-0" />
```

- `diskInner / diskOuter`: string — Accretion disk temperature gradient.
- `nebula / background`: string — Space behind the hole.
- `size`: number = 1 — Event-horizon radius multiplier.
- `tilt`: number = 0.28 — How edge-on the disk appears (0.1–1).
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Liquid Chrome (`liquid-chrome`)

Backgrounds / Shader. Polished molten metal: a noise height-field reflecting a procedural studio environment with strip lights and Fresnel tint. The pointer drags a ripple; clicks drop a splash.

File: components/opus/backgrounds/liquid-chrome.tsx

```tsx
import { LiquidChrome } from "@/components/opus/backgrounds/liquid-chrome";

<LiquidChrome tint="#c7d2fe" className="absolute inset-0" />
```

- `tint`: string — Colour of the reflected lights.
- `shadow`: string — Colour of the dark reflections.
- `scale / amplitude`: number = 1 / 1 — Wave frequency and height.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Dither Field (`dither-field`)

Backgrounds / Shader. 1-bit (or 3-tone) ordered dithering of drifting noise through a 2×2, 4×4 or 8×8 Bayer matrix at a chunky pixel size. The pointer is a soft spotlight.

File: components/opus/backgrounds/dither-field.tsx

```tsx
import { DitherField } from "@/components/opus/backgrounds/dither-field";

<DitherField color="#d4ff4f" pixel={3} matrix={8} className="absolute inset-0" />
```

- `color / background`: string — Ink and paper colours.
- `midtone`: string — Optional third tone for a 3-level dither.
- `pixel`: number = 3 — Dither pixel size (CSS px).
- `matrix`: 2 | 4 | 8 = 8 — Bayer matrix size.
- `bias`: number = 0 — Brightness offset.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Caustics (`caustics`)

Backgrounds / Shader. Light dancing on a pool floor — two layers of animated Voronoi edges refracted by a noisy water surface, with drifting motes. The pointer is a sunbeam that focuses the network.

File: components/opus/backgrounds/caustics.tsx

```tsx
import { Caustics } from "@/components/opus/backgrounds/caustics";

<Caustics className="absolute inset-0" />
```

- `light / deep / shallow`: string — Caustic light and water gradient.
- `scale`: number = 1 — Pattern size.
- `intensity`: number = 1 — Brightness of the light network.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Light Rays (`light-rays`)

Backgrounds / Shader. Volumetric god rays pouring from above, flickering through noise with dust caught in the beams. The source swings to aim at your pointer.

File: components/opus/backgrounds/light-rays.tsx

```tsx
import { LightRays } from "@/components/opus/backgrounds/light-rays";

<LightRays className="absolute inset-0" />
```

- `color / colorB`: string — Beam colours (alternating).
- `background`: string — Darkness behind the light.
- `rays`: number = 14 — Beam count.
- `spread`: number = 0.7 — Cone width.
- `dust`: boolean = true — Floating dust particles.
- `speed`: number = 1 — Time multiplier. 0 freezes the animation; the pointer stays live.
- `interactive`: boolean = true — React to the pointer (tracked on window, so overlaid content never blocks it).
- `className`: string — Classes for the wrapper. Use `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Fluid (`fluid`)

Backgrounds / Simulation. Real-time Navier–Stokes ink on the GPU: semi-Lagrangian advection, vorticity confinement, a 20-iteration Jacobi pressure solve and dye with fake lighting. Drag to stir, click to burst, or leave it to paint itself.

File: components/opus/backgrounds/fluid.tsx

```tsx
import { Fluid } from "@/components/opus/backgrounds/fluid";

<Fluid colors={["#7c5cff", "#22d3ee", "#ff5ea8"]} className="absolute inset-0" />
```

- `colors`: string[] — Dye palette cycled per stroke. Pass [] for a rainbow.
- `background`: string = "#04040a" — Colour under the dye.
- `curl`: number = 28 — Vorticity confinement — how swirly the flow is.
- `dissipation`: number = 0.9 — How fast the dye fades.
- `viscosity`: number = 0.25 — How fast motion dies down.
- `radius / force`: number = 0.22 / 1 — Splat size and strength.
- `shading`: boolean = true — Fake lighting from the dye gradient.
- `autoplay`: boolean = true — Ambient splats while nobody interacts.
- `simResolution / dyeResolution`: number = 128 / 720 — Grid sizes (short side). Lower for weak GPUs.
- `interactive / className / children`: — — As for every OPUS background.

## Water Ripple (`water-ripple`)

Backgrounds / Simulation. A height-field wave equation solved on the GPU, refracting a procedural tiled pool — or any image you pass. Move to leave a wake, click to drop a stone, and let the rain fall when idle.

File: components/opus/backgrounds/water-ripple.tsx

```tsx
import { WaterRipple } from "@/components/opus/backgrounds/water-ripple";

<WaterRipple className="absolute inset-0" />
// or ripple any (same-origin / CORS) image:
<WaterRipple image="/hero.jpg" className="absolute inset-0" />
```

- `image`: string — Image to refract (needs CORS if cross-origin). Omit for the procedural pool.
- `deep / shallow / tile`: string — Procedural pool colours.
- `tileSize`: number = 48 — Pool tile size (CSS px).
- `radius / strength`: number = 0.03 / 0.35 — Drop size and height.
- `damping`: number = 0.985 — Wave lifetime (0.9–0.999).
- `refraction`: number = 0.04 — How strongly waves bend the image.
- `rain`: boolean = true — Random drops while idle.

## Reaction–Diffusion (`reaction-diffusion`)

Backgrounds / Simulation. The Gray–Scott model growing coral, mitosis, worms, mazes or spots in real time. Paint new life with your pointer; double-click to reseed. Every frame runs up to 24 simulation steps.

File: components/opus/backgrounds/reaction-diffusion.tsx

```tsx
import { ReactionDiffusion } from "@/components/opus/backgrounds/reaction-diffusion";

<ReactionDiffusion pattern="coral" className="absolute inset-0" />
```

- `pattern`: "coral" | "mitosis" | "worms" | "maze" | "spots" | "waves" = "coral" — Named feed/kill presets.
- `feed / kill`: number — Override the Gray–Scott parameters directly.
- `colorA / colorB / background`: string — Low/high concentration colours and the empty medium.
- `speed`: number = 12 — Simulation steps per frame (1–24).
- `scale`: number = 1 — Sim cell size: 1 = one cell per 2 CSS px.
- `brush`: number = 0.02 — Paint radius.

## Constellation (`constellation`)

Backgrounds / Canvas. Drifting nodes linked by distance-faded lines, accelerated with a spatial hash. The pointer wires itself into the network and attracts (or repels) nearby stars; clicks blast them apart.

File: components/opus/backgrounds/constellation.tsx

```tsx
import { Constellation } from "@/components/opus/backgrounds/constellation";

<Constellation className="absolute inset-0" />
```

- `color / accent`: string — Network colour and pointer-link colour.
- `density`: number = 1 — Nodes per 10,000 px² (capped at 400).
- `linkDistance`: number = 120 — Max link length (px).
- `speed`: number = 1 — Cruise speed.
- `mode`: "attract" | "repel" | "none" = "attract" — Pointer force.
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Flow Field (`flow-field`)

Backgrounds / Canvas. Thousands of particles riding the curl of a Perlin field — divergence-free, so streams never clump — leaving silky colour trails. The pointer is a vortex every stream bends around.

File: components/opus/backgrounds/flow-field.tsx

```tsx
import { FlowField } from "@/components/opus/backgrounds/flow-field";

<FlowField colors={["#7c5cff", "#22d3ee", "#ff5ea8"]} className="absolute inset-0" />
```

- `colors`: string[] — Gradient sampled by each particle’s heading.
- `count`: number = 1800 — Particles (max 6000).
- `scale`: number = 1.4 — Noise zoom.
- `trail`: number = 0.93 — Trail persistence (0.8–0.995).
- `weight`: number = 1.1 — Stroke width (px).
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Dot Grid (`dot-grid`)

Backgrounds / Canvas. A matrix of spring-loaded dots that bulge away from (or toward) the pointer and wobble back into place. Clicking sends a shockwave rolling through the grid.

File: components/opus/backgrounds/dot-grid.tsx

```tsx
import { DotGrid } from "@/components/opus/backgrounds/dot-grid";

<DotGrid className="absolute inset-0" />
```

- `color / activeColor`: string — Resting and excited dot colours.
- `gap / size`: number = 26 / 1.6 — Grid pitch and dot radius (px).
- `radius`: number = 140 — Pointer influence radius (px).
- `mode`: "push" | "pull" = "push" — Direction of the pointer force.
- `stiffness`: number = 0.08 — Spring stiffness — lower is jelly.
- `shockwave`: boolean = true — Click sends a ring through the grid.
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Glyph Rain (`glyph-rain`)

Backgrounds / Canvas. Digital rain in katakana, binary, hex, latin or block glyphs with mutating trails. Optional torch mode dims the rain except where your pointer shines.

File: components/opus/backgrounds/glyph-rain.tsx

```tsx
import { GlyphRain } from "@/components/opus/backgrounds/glyph-rain";

<GlyphRain glyphs="katakana" className="absolute inset-0" />
```

- `color / headColor`: string — Trail and leading-glyph colours.
- `glyphs`: "katakana" | "binary" | "hex" | "latin" | "blocks" = "katakana" — Character set.
- `fontSize`: number = 16 — Glyph size (px).
- `spotlight`: boolean = false — Torch mode: dark except around the pointer.
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## ASCII Field (`ascii-field`)

Backgrounds / Canvas. Two octaves of noise rendered through a character ramp — terminal art that breathes. The pointer sends ripples through the field and brightens what it touches.

File: components/opus/backgrounds/ascii-field.tsx

```tsx
import { AsciiField } from "@/components/opus/backgrounds/ascii-field";

<AsciiField ramp=" .:-=+*#%@" className="absolute inset-0" />
```

- `color / highlight`: string — Dim and bright character colours.
- `ramp`: string = " .:-=+*#%@" — Characters from dark to bright.
- `cell`: number = 14 — Character cell size (px).
- `scale`: number = 1 — Noise zoom.
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Boids (`boids`)

Backgrounds / Canvas. Craig Reynolds’ flocking — separation, alignment, cohesion — on a spatial hash. The flock scatters from your pointer (blushing as it flees) or follows it like a shadow.

File: components/opus/backgrounds/boids.tsx

```tsx
import { Boids } from "@/components/opus/backgrounds/boids";

<Boids count={160} className="absolute inset-0" />
```

- `color / alarm`: string — Calm and fleeing colours.
- `count`: number = 160 — Number of boids (max 400).
- `speed / size`: number = 110 / 6 — Cruise speed (px/s) and body size (px).
- `mode`: "flee" | "follow" = "flee" — Pointer behaviour.
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Magnetic Field (`magnetic-field`)

Backgrounds / Canvas. A lattice of compass needles that swing to face the pointer (or orbit around it), growing and glowing as you get close. Idle, they track a wandering attractor.

File: components/opus/backgrounds/magnetic-field.tsx

```tsx
import { MagneticField } from "@/components/opus/backgrounds/magnetic-field";

<MagneticField className="absolute inset-0" />
```

- `color / activeColor`: string — Far and near needle colours.
- `gap / length`: number = 28 / 14 — Grid pitch and needle length (px).
- `ease`: number = 0.12 — Rotation easing per frame.
- `mode`: "toward" | "around" = "toward" — Point at the pointer, or orbit it.
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Elastic Grid (`elastic-grid`)

Backgrounds / Canvas. A rubber-sheet grid: the pointer is a lens that bulges (or pinches) the mesh, stretched edges glow, and every vertex springs back with a wobble. Clicks punch it.

File: components/opus/backgrounds/elastic-grid.tsx

```tsx
import { ElasticGrid } from "@/components/opus/backgrounds/elastic-grid";

<ElasticGrid strength={0.6} className="absolute inset-0" />
```

- `color / accent`: string — Line colour and stretch glow.
- `cell`: number = 40 — Grid cell size (px).
- `radius`: number = 180 — Lens radius (px).
- `strength`: number = 0.6 — Positive bulges, negative pinches (−1..1).
- `stiffness`: number = 0.07 — Spring stiffness.
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Pixel Trail (`pixel-trail`)

Backgrounds / Canvas. A grid that lights up cell by cell behind the pointer — strokes are rasterised so fast swipes leave no gaps — fading back with a shrink. Idle sparkles keep it alive.

File: components/opus/backgrounds/pixel-trail.tsx

```tsx
import { PixelTrail } from "@/components/opus/backgrounds/pixel-trail";

<PixelTrail cell={22} className="absolute inset-0" />
```

- `colors`: string[] — Colours cycled along each stroke.
- `gridColor`: string = "rgba(255,255,255,0.04)" — Grid lines (use "transparent" to hide).
- `cell`: number = 22 — Cell size (px).
- `fade`: number = 1.2 — Seconds to fade.
- `brush`: number = 1 — Brush radius in cells.
- `sparkle`: boolean = true — Random idle sparkles.
- `interactive`: boolean = true — React to the pointer (tracked on window).
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Optional content rendered above the canvas.

## Spotlight Grid (`spotlight-grid`)

Backgrounds / CSS. The Linear/Vercel hero grid: a faint pattern with a pointer-following spotlight that reveals brighter lines and a colour wash. Driven by two CSS variables from a single rAF — zero re-renders.

File: components/opus/backgrounds/spotlight-grid.tsx

```tsx
import { SpotlightGrid } from "@/components/opus/backgrounds/spotlight-grid";

<SpotlightGrid pattern="lines" className="absolute inset-0" />
```

- `pattern`: "lines" | "dots" | "cross" = "lines" — Grid style.
- `lineColor / glowColor`: string — Resting and revealed line colours (any CSS colour).
- `wash`: string — Soft colour under the spotlight.
- `cell / radius`: number = 44 / 260 — Cell size and spotlight radius (px).
- `fade`: boolean = true — Fade the grid toward the edges.
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Content rendered on top.

## Aurora Blobs (`aurora-blobs`)

Backgrounds / CSS. Blurred gradient orbs drifting on transform-only keyframes with a film-grain overlay. The cheapest beautiful background there is — and it renders on the server.

File: components/opus/backgrounds/aurora-blobs.tsx

```tsx
import { AuroraBlobs } from "@/components/opus/backgrounds/aurora-blobs";

<AuroraBlobs className="absolute inset-0" />
```

- `colors`: string[] — Up to five blob colours.
- `background`: string — Base colour.
- `blur`: number = 64 — Blur radius (px).
- `duration`: number = 22 — Seconds per loop.
- `opacity / grain`: number = 0.9 / 0.12 — Blob opacity and grain overlay.
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Content rendered on top.

## Meteors (`meteors`)

Backgrounds / CSS. A deterministic meteor shower over a faint star field — identical on server and client, animated purely with the `animate-meteor` keyframes from opus.css.

File: components/opus/backgrounds/meteors.tsx

```tsx
import { Meteors } from "@/components/opus/backgrounds/meteors";

<Meteors count={18} className="absolute inset-0" />
```

- `count`: number = 18 — Number of meteors.
- `color / background`: string — Meteor and sky colours.
- `angle`: number = 215 — Fall direction (deg).
- `duration`: number = 7 — Average flight time (s).
- `stars`: boolean = true — Static stars behind.
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Content rendered on top.

## Pattern (`pattern`)

Backgrounds / CSS. Eight SVG tile patterns — grid, dots, cross, diagonal, checker, plus, waves, isometric — with edge fades and optional pulsing highlight tiles. The workhorse behind most hero sections.

File: components/opus/backgrounds/pattern.tsx

```tsx
import { Pattern } from "@/components/opus/backgrounds/pattern";

<Pattern kind="dots" fade="radial" className="absolute inset-0" />
```

- `kind`: "grid" | "dots" | "cross" | "diagonal" | "checker" | "plus" | "waves" | "isometric" = "grid" — Tile shape.
- `color`: string — Stroke/fill colour — any CSS colour.
- `size / stroke`: number = 32 / 1 — Tile size and line width (px).
- `fade`: "radial" | "top" | "bottom" | "x" | "none" = "radial" — Edge mask.
- `highlights`: number = 0 — Randomly lit, pulsing tiles.
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Content rendered on top.

## Retro Grid (`retro-grid`)

Backgrounds / CSS. A CSS-3D perspective floor scrolling toward the viewer, with a horizon glow. The lightweight sibling of Synthwave Grid.

File: components/opus/backgrounds/retro-grid.tsx

```tsx
import { RetroGrid } from "@/components/opus/backgrounds/retro-grid";

<RetroGrid className="absolute inset-0" />
```

- `lineColor / glow / background`: string — Grid, horizon glow and sky.
- `angle`: number = 68 — Floor tilt (deg).
- `cell`: number = 60 — Cell size (px).
- `duration`: number = 1.4 — Seconds per cell of travel.
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Content rendered on top.

## Beams (`beams`)

Backgrounds / CSS. Glowing light pulses racing along the lines of a faded grid — the “background beams” look with deterministic placement and no JavaScript.

File: components/opus/backgrounds/beams.tsx

```tsx
import { Beams } from "@/components/opus/backgrounds/beams";

<Beams className="absolute inset-0" />
```

- `colors`: string[] — Beam colours (cycled).
- `lineColor / background`: string — Grid and backdrop.
- `cell / count / duration`: number = 64 / 14 / 5 — Grid pitch, number of beams, average crossing time.
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Content rendered on top.

## Ripple Rings (`ripple-rings`)

Backgrounds / CSS. Concentric rings breathing in a staggered wave, fading downward — a calm focal backdrop for a logo, avatar or call-to-action.

File: components/opus/backgrounds/ripple-rings.tsx

```tsx
import { RippleRings } from "@/components/opus/backgrounds/ripple-rings";

<RippleRings className="absolute inset-0" />
```

- `color`: string — Ring colour — use rgba(…, 1) so the inner glow can derive its alpha.
- `rings / base / step`: number = 8 / 180 / 90 — Count, first diameter and growth (px).
- `duration`: number = 3.4 — Seconds per breath.
- `className`: string — Wrapper classes — `absolute inset-0` to fill a relative parent.
- `children`: ReactNode — Content rendered on top.

## Spotlight Card (`spotlight-card`)

Effects / Pointer. A card lit by your pointer — a soft pool of light inside and a brighter rim where the light catches the border.

File: components/opus/effects/spotlight-card.tsx

```tsx
import { SpotlightCard } from "@/components/opus/effects/spotlight-card";

<SpotlightCard className="p-6">…</SpotlightCard>
```

- `color`: string = "rgba(124,92,255,0.16)" — Light pooling inside the card.
- `borderColor`: string = "rgba(167,139,250,0.75)" — Light on the border.
- `radius`: number = 360 — Spotlight radius (px).
- `...props`: HTMLAttributes<div> — Passed to the card element.

## Tilt Card (`tilt-card`)

Effects / Pointer. 3D tilt with a specular glare and real depth — wrap children in <TiltLayer depth> to float them toward you.

File: components/opus/effects/tilt-card.tsx

```tsx
import { TiltCard, TiltLayer } from "@/components/opus/effects/tilt-card";

<TiltCard className="p-6">
  <TiltLayer depth={40}>Floating title</TiltLayer>
</TiltCard>
```

- `max`: number = 12 — Max tilt (deg).
- `scale`: number = 1.03 — Hover lift.
- `glare`: boolean = true — Pointer-following specular highlight.
- `perspective`: number = 900 — Perspective (px) — lower is more dramatic.
- `TiltLayer.depth`: number = 30 — translateZ for a child layer (px).

## Magnetic (`magnetic`)

Effects / Pointer. Pulls any element toward the pointer when it comes near, then springs back. Mark an inner node with data-magnetic-inner for parallax.

File: components/opus/effects/magnetic.tsx

```tsx
import { Magnetic } from "@/components/opus/effects/magnetic";

<Magnetic strength={0.4}>
  <button><span data-magnetic-inner>Hover</span></button>
</Magnetic>
```

- `range`: number = 60 — Reach beyond the element edge (px).
- `strength`: number = 0.35 — Fraction of the pointer offset followed.
- `innerStrength`: number = 0.2 — Extra travel for [data-magnetic-inner].

## Glow Cards (`glow-cards`)

Effects / Pointer. Linear-style grid: one pointer lights the borders of every nearby card, so the light appears to slide across the gaps.

File: components/opus/effects/glow-cards.tsx

```tsx
import { GlowGroup, GlowCard } from "@/components/opus/effects/glow-cards";

<GlowGroup className="grid grid-cols-3 gap-3">
  <GlowCard className="p-6">…</GlowCard>
</GlowGroup>
```

- `color`: string = "rgba(167,139,250,0.9)" — On <GlowGroup>: glow colour.
- `radius`: number = 300 — On <GlowGroup>: glow radius (px).

## Lens (`lens`)

Effects / Pointer. A magnifying glass over any React content — images, text, charts. The copy is scaled around the pointer and clipped to a circle.

File: components/opus/effects/lens.tsx

```tsx
import { Lens } from "@/components/opus/effects/lens";

<Lens zoom={2.5}><img src="/poster.jpg" alt="" /></Lens>
```

- `zoom`: number = 2.2 — Magnification.
- `size`: number = 170 — Lens diameter (px).
- `ringColor`: string — Ring around the lens.

## Hover Reveal List (`hover-reveal-list`)

Effects / Pointer. An editorial index — hover a row and its image floats beside the cursor, leaning into your movement.

File: components/opus/effects/hover-reveal-list.tsx

```tsx
import { HoverRevealList } from "@/components/opus/effects/hover-reveal-list";

<HoverRevealList items={[{ title: "Project", meta: "2026", image: "/p.jpg", href: "/p" }]} />
```

- `items`: { title; meta?; image; href? }[] — Rows to render.
- `previewWidth`: number = 260 — Floating preview width (px).

## Image Trail (`image-trail`)

Effects / Pointer. Move across the area and a trail of images unfurls behind the pointer. Pooled DOM nodes and the Web Animations API — no re-renders.

File: components/opus/effects/image-trail.tsx

```tsx
import { ImageTrail } from "@/components/opus/effects/image-trail";

<ImageTrail images={["/a.jpg", "/b.jpg"]} className="h-96" />
```

- `images`: string[] — Image URLs, cycled.
- `threshold`: number = 80 — Pointer distance between drops (px).
- `width`: number = 160 — Image width (px).
- `life`: number = 900 — ms each image lives.
- `max`: number = 12 — Pool size.

## Parallax Depth (`parallax-depth`)

Effects / Pointer. A pointer-driven parallax scene. Stack <ParallaxLayer depth> children — positive moves with you, negative against.

File: components/opus/effects/parallax-depth.tsx

```tsx
import { ParallaxDepth, ParallaxLayer } from "@/components/opus/effects/parallax-depth";

<ParallaxDepth className="h-96">
  <ParallaxLayer depth={-0.3}>sky</ParallaxLayer>
  <ParallaxLayer depth={1}>foreground</ParallaxLayer>
</ParallaxDepth>
```

- `travel`: number = 30 — Max travel for depth 1 (px).
- `ParallaxLayer.depth`: number = 1 — Layer multiplier (negative = opposite).

## Liquid Glass (`liquid-glass`)

Effects / Pointer. Glass that refracts what’s behind it: backdrop blur + an SVG displacement map, rim lighting and a pointer-tracked specular. Frosted fallback outside Chromium.

File: components/opus/effects/liquid-glass.tsx

```tsx
import { LiquidGlass } from "@/components/opus/effects/liquid-glass";

<LiquidGlass className="p-6">…</LiquidGlass>
```

- `refraction`: number = 60 — Displacement strength.
- `blur`: number = 4 — Backdrop blur (px).
- `tint`: string = "rgba(255,255,255,0.06)" — Glass tint.
- `highlight`: boolean = true — Pointer specular.

## Border Beam (`border-beam`)

Effects / Borders & light. A light that races around its parent’s border, inheriting the radius. Stack several with delays for orbiting comets.

File: components/opus/effects/border-beam.tsx

```tsx
import { BorderBeam } from "@/components/opus/effects/border-beam";

<div className="relative rounded-2xl border">
  <BorderBeam />
  …
</div>
```

- `colorFrom / colorTo`: string — Head and tail colours.
- `duration`: number = 6 — Seconds per lap.
- `width`: number = 1.5 — Border thickness (px).
- `length`: number = 0.18 — Beam length (fraction of a lap).
- `delay`: number = 0 — Start offset (0–1 of a lap).
- `reverse`: boolean — Counter-clockwise.

## Gradient Border (`gradient-border`)

Effects / Borders & light. A container with a rotating multi-colour border and an optional blurred halo.

File: components/opus/effects/gradient-border.tsx

```tsx
import { GradientBorder } from "@/components/opus/effects/gradient-border";

<GradientBorder className="rounded-2xl"><div className="p-6">…</div></GradientBorder>
```

- `colors`: string[] — Gradient stops (repeat the first at the end for a seamless loop).
- `width`: number = 1.5 — Border thickness (px).
- `duration`: number = 4 — Seconds per rotation (0 = static).
- `glow`: number = 0.5 — Halo opacity.

## Shimmer Button (`shimmer-button`)

Effects / Borders & light. A premium CTA: a spark orbits the border while a highlight sweeps across the face.

File: components/opus/effects/shimmer-button.tsx

```tsx
import { ShimmerButton } from "@/components/opus/effects/shimmer-button";

<ShimmerButton>Get early access</ShimmerButton>
```

- `shimmerColor`: string = "#ffffff" — Spark + sweep colour.
- `background`: string — Button fill (gradients welcome).
- `duration`: number = 3 — Seconds per orbit.

## Marquee (`marquee`)

Effects / Motion. Seamless infinite scroller — horizontal or vertical, reversible, pause on hover, faded edges. Pure CSS.

File: components/opus/effects/marquee.tsx

```tsx
import { Marquee } from "@/components/opus/effects/marquee";

<Marquee duration={30}>{logos}</Marquee>
```

- `duration`: number = 30 — Seconds per loop.
- `gap`: string = "1rem" — Gap between items.
- `reverse / vertical`: boolean — Direction and axis.
- `pauseOnHover`: boolean = true — Pause while hovered.
- `fade`: boolean = true — Mask the edges.
- `repeat`: number = 2 — Copies of the content (raise for short lists on wide screens).

## Reveal (`reveal`)

Effects / Motion. Scroll-into-view entrances — fade, blur, scale, flip, slide — with optional per-child stagger.

File: components/opus/effects/reveal.tsx

```tsx
import { Reveal } from "@/components/opus/effects/reveal";

<Reveal effect="blur" stagger={80}>
  <h2>…</h2><p>…</p>
</Reveal>
```

- `effect`: "fade" | "fade-up" | "fade-down" | "slide-left" | "slide-right" | "scale" | "blur" | "flip" = "fade-up" — Entrance style.
- `delay / stagger / duration`: number = 0 / 0 / 700 — Timing (ms).
- `repeat`: boolean = false — Hide again when leaving the viewport.
- `threshold`: number = 0.15 — IntersectionObserver threshold.

## Dock (`dock`)

Effects / Motion. macOS dock magnification with transforms only — icons scale and neighbours shift to make room, the glass shelf widens with them.

File: components/opus/effects/dock.tsx

```tsx
import { Dock } from "@/components/opus/effects/dock";

<Dock items={[{ id: "mail", label: "Mail", icon: <MailIcon />, onClick }]} />
```

- `items`: DockItem[] — { id, label, icon, onClick?, href?, active? }
- `size`: number = 48 — Base icon size (px).
- `magnification`: number = 1.8 — Peak scale.
- `distance`: number = 150 — Influence distance (px).

## Animated List (`animated-list`)

Effects / Motion. Notification-feed choreography: items drop in from the top with a springy settle while older ones recede.

File: components/opus/effects/animated-list.tsx

```tsx
import { AnimatedList } from "@/components/opus/effects/animated-list";

<AnimatedList interval={1500}>{notifications}</AnimatedList>
```

- `interval`: number = 1400 — ms between items.
- `loop`: boolean = true — Restart after the last item.
- `max`: number = 5 — Items visible at once.

## Confetti (`confetti`)

Effects / Motion. A `confetti()` function with physics, flutter and three shapes, plus a <ConfettiButton>. One shared canvas, removed when the last piece lands.

File: components/opus/effects/confetti.tsx

```tsx
import { confetti, ConfettiButton } from "@/components/opus/effects/confetti";

confetti({ x: 200, y: 300, spread: 90 });
<ConfettiButton>Celebrate</ConfettiButton>
```

- `x / y`: number — Origin in viewport px (default: screen centre).
- `count / spread / angle / velocity`: number = 120 / 70 / -90 / 900 — Burst shape.
- `colors`: string[] — Palette.
- `shape`: "square" | "circle" | "strip" | "mixed" = "mixed" — Piece shape.
- `gravity`: number = 1 — Fall speed multiplier.

## Scroll Progress (`scroll-progress`)

Effects / Motion. A reading-progress bar for the page or any scroll container, animated with scaleX only.

File: components/opus/effects/scroll-progress.tsx

```tsx
import { ScrollProgress } from "@/components/opus/effects/scroll-progress";

<ScrollProgress />  // page
<ScrollProgress container={ref} />  // a scroll box
```

- `container`: RefObject<HTMLElement> — Scroll container (default: window).
- `color`: string — Bar background.
- `height`: number = 3 — Bar height (px).
- `position`: "top" | "bottom" = "top" — Edge.

## Ripple (`ripple`)

Effects / Motion. Material-style ink from the exact press point; grows while held, fades on release.

File: components/opus/effects/ripple.tsx

```tsx
import { Ripple } from "@/components/opus/effects/ripple";

<Ripple className="rounded-xl"><button>Press</button></Ripple>
```

- `color`: string = "currentColor" — Ink colour.
- `duration`: number = 650 — Grow time (ms).

## Custom Cursor (`custom-cursor`)

Effects / Cursor. Dot + lagging ring that swells over links, morphs into a label with data-cursor-text, and squishes on press. Scoped or page-wide; off on touch.

File: components/opus/effects/custom-cursor.tsx

```tsx
import { CustomCursor } from "@/components/opus/effects/custom-cursor";

<CustomCursor />  // in your root layout
<div data-cursor-text="View">…</div>
```

- `color`: string = "#ffffff" — Cursor colour.
- `size`: number = 36 — Ring diameter (px).
- `ease`: number = 0.18 — Ring lag.
- `blend`: "difference" | "normal" | "exclusion" = "difference" — mix-blend-mode.
- `hideNative`: boolean = true — Hide the OS cursor in scope.
- `scope`: string — Element id to restrict to.

## Click Spark (`click-spark`)

Effects / Cursor. Every click throws a ring of sparks in currentColor — a tiny, satisfying acknowledgement.

File: components/opus/effects/click-spark.tsx

```tsx
import { ClickSpark } from "@/components/opus/effects/click-spark";

<ClickSpark className="text-primary">…</ClickSpark>
```

- `color`: string = "currentColor" — Spark colour.
- `count / radius / length`: number = 8 / 26 / 10 — Spark count, travel and size (px).
- `duration`: number = 0.45 — Seconds.

## Scramble Text (`scramble-text`)

Text / Animated. A decoder effect — characters cycle through random glyphs and lock in left to right. Plays on mount, on view or on hover.

File: components/opus/text/scramble-text.tsx

```tsx
import { ScrambleText } from "@/components/opus/text/scramble-text";

<ScrambleText text="ACCESS GRANTED" trigger="view" className="font-mono" />
```

- `text`: string — Final text (also the aria-label).
- `trigger`: "mount" | "view" | "hover" = "view" — When to play.
- `speed`: number = 32 — ms per character settle.
- `charset`: string — Glyphs used while scrambling.
- `as`: ElementType = "span" — Element to render.

## Gradient Text (`gradient-text`)

Text / Animated. Text filled with a slowly panning gradient via background-clip. Zero JS.

File: components/opus/text/gradient-text.tsx

```tsx
import { GradientText } from "@/components/opus/text/gradient-text";

<h1>Build <GradientText>beautiful</GradientText> things</h1>
```

- `colors`: string[] — Stops (repeat the first at the end for a seamless pan).
- `duration`: number = 6 — Seconds per pan (0 = static).
- `angle`: number = 90 — Gradient angle.

## Shiny Text (`shiny-text`)

Text / Animated. A sheen sweeping across muted text — perfect for announcement pills and “thinking…” states. Inherits your text colour.

File: components/opus/text/shiny-text.tsx

```tsx
import { ShinyText } from "@/components/opus/text/shiny-text";

<ShinyText>✦ Introducing v2</ShinyText>
```

- `duration`: number = 2.8 — Seconds per sweep.
- `width`: number = 24 — Shine band width (%).
- `dim`: number = 0.45 — Resting opacity of the text.

## Typewriter (`typewriter`)

Text / Animated. Types, holds and deletes phrases with a human-ish rhythm and a blinking caret. Screen readers get the full list once.

File: components/opus/text/typewriter.tsx

```tsx
import { Typewriter } from "@/components/opus/text/typewriter";

<Typewriter words={["landing page.", "dashboard."]} />
```

- `words`: string[] — Phrases in order.
- `typeSpeed / deleteSpeed`: number = 70 / 35 — ms per character.
- `pause`: number = 1400 — Hold time (ms).
- `loop`: boolean = true — Cycle forever.
- `caret`: "bar" | "block" | "underscore" | "none" = "bar" — Caret style.

## Number Ticker (`number-ticker`)

Text / Animated. Counts to a value with an expo-out ease when it scrolls into view, and animates from the current number on every change. Intl-formatted.

File: components/opus/text/number-ticker.tsx

```tsx
import { NumberTicker } from "@/components/opus/text/number-ticker";

<NumberTicker value={1284390} format={{ style: "currency", currency: "USD" }} />
```

- `value`: number — Target value.
- `from`: number = 0 — Start value.
- `duration`: number = 1600 — ms.
- `format / locale`: Intl.NumberFormatOptions / string — Formatting.
- `startOnView`: boolean = true — Wait until visible.

## Text Reveal (`text-reveal`)

Text / Animated. Splits a heading into words or characters and reveals them in a stagger — blur, rise, fade or masked slide.

File: components/opus/text/text-reveal.tsx

```tsx
import { TextReveal } from "@/components/opus/text/text-reveal";

<TextReveal as="h2" text="Design is how it feels when it moves." effect="blur" />
```

- `text`: string — The text (kept as aria-label).
- `by`: "word" | "char" = "word" — Split granularity.
- `effect`: "blur" | "rise" | "fade" | "mask" = "blur" — Entrance.
- `stagger / duration / delay`: number — Timing (ms).

## Rotating Words (`rotating-words`)

Text / Animated. Swaps words in place while the slot glides to the new width, so the sentence never jumps. Slide, flip or blur.

File: components/opus/text/rotating-words.tsx

```tsx
import { RotatingWords } from "@/components/opus/text/rotating-words";

<h1>Made for <RotatingWords words={["designers", "engineers"]} /></h1>
```

- `words`: string[] — Words to cycle.
- `interval`: number = 2200 — ms per word.
- `effect`: "slide" | "flip" | "blur" = "slide" — Swap animation.

## Morphing Text (`morphing-text`)

Text / Animated. Words melt into one another — a cross-blur pushed through an SVG alpha threshold for a liquid, gooey morph.

File: components/opus/text/morphing-text.tsx

```tsx
import { MorphingText } from "@/components/opus/text/morphing-text";

<MorphingText words={["Design", "Ship", "Repeat"]} className="text-7xl font-bold" />
```

- `words`: string[] — Words to morph between.
- `morphTime / holdTime`: number = 1.1 / 1.6 — Seconds.

## Slot Counter (`slot-counter`)

Text / Animated. An odometer — every digit is a 0–9 column that rolls with a springy overshoot when the value changes.

File: components/opus/text/slot-counter.tsx

```tsx
import { SlotCounter } from "@/components/opus/text/slot-counter";

<SlotCounter value={visitors} />
```

- `value`: number — Number to show.
- `format / locale`: Intl.NumberFormatOptions / string — Formatting.
- `duration`: number = 900 — Base roll time (ms).

## Glitch Text (`glitch-text`)

Text / Animated. RGB-split slice glitch from two pseudo-element copies — always on, or only while hovered. Zero JS.

File: components/opus/text/glitch-text.tsx

```tsx
import { GlitchText } from "@/components/opus/text/glitch-text";

<GlitchText text="SIGNAL LOST" />
```

- `text`: string — Text (copied into data-text for the layers).
- `onHover`: boolean = false — Glitch only while hovered.
- `speed`: number = 2.2 — Seconds per cycle.
- `colorA / colorB`: string — Split colours.

## Highlighter (`highlighter`)

Text / Interactive. Hand-drawn emphasis that draws itself into view — marker, underline, circle, strike-through or box.

File: components/opus/text/highlighter.tsx

```tsx
import { Highlighter } from "@/components/opus/text/highlighter";

Components that <Highlighter>actually ship</Highlighter>
```

- `variant`: "highlight" | "underline" | "circle" | "strike" | "box" = "highlight" — Mark style.
- `color`: string = "#facc15" — Ink colour.
- `duration / delay`: number = 800 / 0 — Timing (ms).

## Text Pressure (`text-pressure`)

Text / Interactive. Each letter’s variable-font weight responds to pointer proximity — a typographic lens. Static fonts still get the stretch.

File: components/opus/text/text-pressure.tsx

```tsx
import { TextPressure } from "@/components/opus/text/text-pressure";

<TextPressure text="PRESSURE" className="text-8xl" />
```

- `minWeight / maxWeight`: number = 200 / 900 — wght axis range.
- `radius`: number = 160 — Influence radius (px).
- `stretch`: number = 0.25 — Extra scaleY under the pointer.

## Particle Text (`particle-text`)

Text / Interactive. Text rasterised into thousands of particles that scatter from your pointer and spring home. Clicks blow the letters apart.

File: components/opus/text/particle-text.tsx

```tsx
import { ParticleText } from "@/components/opus/text/particle-text";

<ParticleText text="OPUS" className="h-96" />
```

- `text`: string — Text to sample.
- `colors`: string[] — Left→right gradient.
- `fontWeight / fontFamily`: number / string = 800 / "inherit" — Sampling font (auto-fitted).
- `density`: number = 4 — Sampling step (px) — lower = more particles.
- `size / radius`: number = 1.6 / 90 — Particle size and repel radius (px).

## Circular Text (`circular-text`)

Text / Interactive. Text set on a rotating circle — the “scroll down ·” badge — speeding up on hover. Pure SVG + CSS.

File: components/opus/text/circular-text.tsx

```tsx
import { CircularText } from "@/components/opus/text/circular-text";

<CircularText text="scroll down · scroll down · "><ArrowDown /></CircularText>
```

- `text`: string — Text around the circle (add separators).
- `size`: number = 140 — Diameter (px).
- `duration`: number = 14 — Seconds per turn.
- `fontSize / spacing`: number = 12 / 0.28 — Type size and tracking (em).

## Ring Carousel (`ring-carousel`)

3D / Gallery. A 3D cylinder of cards — drag with inertia and snapping, arrow keys, or let it auto-spin. The front card gets data-front.

File: components/opus/three/ring-carousel.tsx

```tsx
import { RingCarousel } from "@/components/opus/three/ring-carousel";

<RingCarousel itemWidth={200}>{cards}</RingCarousel>
```

- `itemWidth / gap`: number = 220 / 24 — Card width and spacing (px) — radius is derived.
- `autoplay`: number = 8 — Idle spin (deg/s); pauses on hover.
- `snap`: boolean = true — Settle on the nearest card.
- `tilt / perspective`: number = -8 / 1200 — Camera tilt and perspective.

## Sphere Gallery (`sphere-gallery`)

3D / Gallery. Stand inside a dome of images. Drag to look around with inertia; click a tile to bring it forward. CSS 3D only.

File: components/opus/three/sphere-gallery.tsx

```tsx
import { SphereGallery } from "@/components/opus/three/sphere-gallery";

<SphereGallery images={urls} className="h-[600px]" />
```

- `images`: string[] — Image URLs (repeated to fill the sphere).
- `radius / tile`: number = 420 / 110 — Sphere radius and tile size (px).
- `rings`: number = 5 — Latitude rings.
- `speed`: number = 6 — Idle rotation (deg/s).

## Coverflow (`coverflow`)

3D / Gallery. Classic coverflow with reflections — click, drag, swipe, wheel or arrow keys. Exposes listbox semantics.

File: components/opus/three/coverflow.tsx

```tsx
import { Coverflow } from "@/components/opus/three/coverflow";

<Coverflow initial={2}>{covers}</Coverflow>
```

- `initial`: number = 0 — Starting index.
- `itemWidth`: number = 220 — Cover size (px).
- `angle / spacing`: number = 55 / 0.42 — Side rotation and spread.
- `onChange`: (i: number) => void — Active index changed.

## Expand Gallery (`expand-gallery`)

3D / Gallery. Hover-accordion panels that widen to reveal the image and caption. Keyboard focus expands too.

File: components/opus/three/expand-gallery.tsx

```tsx
import { ExpandGallery } from "@/components/opus/three/expand-gallery";

<ExpandGallery items={[{ image, title, caption }]} />
```

- `items`: { image; title; caption? }[] — Panels.
- `grow`: number = 5 — Flex-grow of the active panel.

## 3D Marquee (`marquee-3d`)

3D / Gallery. A tilted wall of endlessly scrolling columns with alternating directions — a striking hero backdrop, zero JS.

File: components/opus/three/marquee-3d.tsx

```tsx
import { Marquee3D } from "@/components/opus/three/marquee-3d";

<Marquee3D items={thumbnails} className="h-[600px]" />
```

- `items`: ReactNode[] — Tiles distributed across columns.
- `columns`: number = 4 — Column count.
- `duration`: number = 40 — Seconds per loop.
- `rotateX / rotateZ`: number = 28 / -22 — Wall tilt (deg).

## Dot Globe (`dot-globe`)

3D / Objects. A dotted planet on canvas — Fibonacci sphere, procedural continents, pulsing markers and great-circle arcs with comets. Drag to spin.

File: components/opus/three/dot-globe.tsx

```tsx
import { DotGlobe } from "@/components/opus/three/dot-globe";

<DotGlobe markers={[{ lat: 13.75, lng: 100.5 }]} arcs={[[0, 1]]} className="h-[420px]" />
```

- `color / oceanColor / accent`: string — Land, ocean and arc/marker colours.
- `dots`: number = 2200 — Sphere resolution.
- `speed`: number = 8 — Auto-spin (deg/s).
- `markers`: { lat; lng; label? }[] — Pins.
- `arcs`: [number, number][] — Marker index pairs to connect.
- `seed`: number = 3 — Continent layout.

## Card Stack (`card-stack`)

3D / Objects. A swipeable deck: drag the top card and fling it — it flies off with spin and returns to the back. Keys and buttons too.

File: components/opus/three/card-stack.tsx

```tsx
import { CardStack } from "@/components/opus/three/card-stack";

<CardStack onSwipe={(i, dir) => …}>{cards}</CardStack>
```

- `depth`: number = 3 — Visible cards behind the top one.
- `threshold`: number = 110 — Drag distance for a throw (px).
- `onSwipe`: (index, "left" | "right") => void — Called after a throw.

## Flip Card (`flip-card`)

3D / Objects. A two-sided card that turns over in 3D on hover/focus, or on click/Enter. X or Y axis, springy easing.

File: components/opus/three/flip-card.tsx

```tsx
import { FlipCard } from "@/components/opus/three/flip-card";

<FlipCard front={<Front />} back={<Back />} trigger="click" />
```

- `front / back`: ReactNode — Faces.
- `trigger`: "hover" | "click" = "hover" — How it flips.
- `axis`: "y" | "x" = "y" — Rotation axis.

## Button (`button`)

Components / General. Eight variants, seven sizes, a width-stable loading state and `buttonVariants()` for links that should look like buttons.

File: components/opus/ui/button.tsx

```tsx
import { Button, buttonVariants } from "@/components/opus/ui/button";

<Button variant="glow" size="lg" loading={saving}>Deploy</Button>
<a href="/docs" className={buttonVariants({ variant: "outline" })}>Docs</a>
```

- `variant`: "primary" | "secondary" | "outline" | "soft" | "ghost" | "destructive" | "link" | "glow" = "primary" — Visual style.
- `size`: "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-xs" = "md" — Height and padding. icon sizes are square.
- `loading`: boolean = false — Spinner overlay; disables the button and sets aria-busy.
- `...props`: ButtonHTMLAttributes — Everything a native <button> accepts, including ref.

## Badge (`badge`)

Components / General. Status pills with semantic colours, an optional status dot and a pulsing live indicator.

File: components/opus/ui/badge.tsx

```tsx
import { Badge } from "@/components/opus/ui/badge";

<Badge variant="success" dot>Operational</Badge>
```

- `variant`: "default" | "secondary" | "outline" | "soft" | "success" | "warning" | "destructive" | "info" | "gradient" = "default" — Colour scheme.
- `dot`: boolean — Leading status dot in the current colour.
- `pulse`: boolean — Animate the dot with a ping (live / incident).

## Kbd (`kbd`)

Components / General. Key caps for shortcuts and keyboard hints.

File: components/opus/ui/kbd.tsx

```tsx
import { Kbd } from "@/components/opus/ui/kbd";

<Kbd>⌘</Kbd><Kbd>K</Kbd>
```

## Separator (`separator`)

Components / General. Horizontal and vertical rules, with an optional centred label for “or continue with”.

File: components/opus/ui/separator.tsx

```tsx
import { Separator } from "@/components/opus/ui/separator";

<Separator label="or" />
```

- `orientation`: "horizontal" | "vertical" = "horizontal" — Direction of the rule.
- `label`: string — Text centred on a horizontal rule.
- `decorative`: boolean = true — Hide from assistive tech. Set false for a semantic separator.

## Spinner (`spinner`)

Components / General. Ring, dots and petal loaders that inherit `currentColor` and announce themselves to screen readers.

File: components/opus/ui/spinner.tsx

```tsx
import { Spinner } from "@/components/opus/ui/spinner";

<Spinner variant="dots" />
```

- `variant`: "ring" | "dots" | "bars" = "ring" — Shape of the loader.
- `size`: "xs" | "sm" | "md" | "lg" = "sm" — Size (ring and bars).
- `label`: string = "Loading" — Accessible label (role=status).

## Input (`input`)

Components / Data entry. Text input with prefix/suffix adornments, a clear button, password reveal and automatic Field wiring.

File: components/opus/ui/input.tsx

```tsx
import { Input } from "@/components/opus/ui/input";

<Input prefix={<SearchIcon />} placeholder="Search…" clearable />
```

- `size`: "sm" | "md" | "lg" = "md" — Height and text size.
- `prefix / suffix`: ReactNode — Leading / trailing adornment (icon, unit, Kbd).
- `clearable`: boolean — Show × when there is a value; fires a real input event so controlled state updates.
- `invalid`: boolean — Error styling. Set automatically inside <Field error>.
- `wrapperClassName`: string — Classes for the outer shell; `className` goes to the <input>.

## Textarea (`textarea`)

Components / Data entry. Auto-growing textarea (CSS `field-sizing`) with min/max rows and a live character counter.

File: components/opus/ui/textarea.tsx

```tsx
import { Textarea } from "@/components/opus/ui/textarea";

<Textarea maxLength={280} showCount />
```

- `autosize`: boolean = true — Grow with content between minRows and maxRows.
- `minRows / maxRows`: number = 3 / 12 — Height bounds in rows.
- `showCount`: boolean — Live “n / max” counter (needs maxLength).

## Field (`field`)

Components / Data entry. Label, description and error around any control — ids, aria-describedby and aria-invalid are wired for you.

File: components/opus/ui/field.tsx

```tsx
import { Field } from "@/components/opus/ui/field";

<Field label="Email" description="We never share it." error={errors.email}>
  <Input type="email" />
</Field>
```

- `label`: ReactNode — Label text — clicking it focuses the control.
- `description`: ReactNode — Helper text (hidden while an error shows).
- `error`: ReactNode — Error message; flips the control to invalid.
- `required`: boolean — Adds a red asterisk and aria-required.
- `horizontal`: boolean — Label and control on one row — for switches and checkboxes.
- `labelAside`: ReactNode — Right side of the label row, e.g. “Forgot password?”.

## Select (`select`)

Components / Data entry. Custom listbox with groups, descriptions, icons, typeahead and full keyboard support — positioned with collision flipping.

File: components/opus/ui/select.tsx

```tsx
import { Select } from "@/components/opus/ui/select";

<Select value={v} onValueChange={setV} options={[{ value: "a", label: "Alpha" }]} />
```

- `options`: SelectOption[] — { value, label, text?, description?, icon?, disabled?, group? }
- `value / defaultValue`: string — Controlled / uncontrolled selection.
- `onValueChange`: (value: string) => void — Fires when the user picks an option.
- `placeholder`: string = "Select…" — Shown when nothing is selected.
- `size`: "sm" | "md" | "lg" = "md" — Trigger height.

## Switch (`switch`)

Components / Data entry. Toggle with a springy thumb, three sizes and optional on/off glyphs inside the thumb.

File: components/opus/ui/switch.tsx

```tsx
import { Switch } from "@/components/opus/ui/switch";

<Switch checked={on} onCheckedChange={setOn} />
```

- `checked / defaultChecked`: boolean — Controlled / uncontrolled state.
- `onCheckedChange`: (checked: boolean) => void — Change handler.
- `size`: "sm" | "md" | "lg" = "md" — Track size.
- `thumbOn / thumbOff`: ReactNode — Tiny glyph inside the thumb per state.

## Slider (`slider`)

Components / Data entry. Pointer-captured slider with step snapping, marks, a value bubble and complete keyboard support.

File: components/opus/ui/slider.tsx

```tsx
import { Slider } from "@/components/opus/ui/slider";

<Slider value={v} onValueChange={setV} min={0} max={100} />
```

- `value / defaultValue`: number — Controlled / uncontrolled value.
- `min / max / step`: number = 0 / 100 / 1 — Range and snapping.
- `onValueChange`: (v: number) => void — Fires while dragging.
- `onValueCommit`: (v: number) => void — Fires once on release.
- `tooltip`: "drag" | "always" | "never" = "drag" — When to show the value bubble.
- `marks`: { value; label? }[] — Ticks along the track.
- `formatValue`: (v: number) => string — Formats bubble + aria-valuetext.

## Tabs (`tabs`)

Components / Navigation. Tabs with a gliding indicator in three styles, roving focus and proper tab/tabpanel semantics.

File: components/opus/ui/tabs.tsx

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/opus/ui/tabs";

<Tabs defaultValue="a">
  <TabsList>
    <TabsTrigger value="a">Account</TabsTrigger>
    <TabsTrigger value="b">Billing</TabsTrigger>
  </TabsList>
  <TabsContent value="a">…</TabsContent>
  <TabsContent value="b">…</TabsContent>
</Tabs>
```

- `variant`: "pill" | "underline" | "ghost" = "pill" — Indicator style (on <Tabs>).
- `value / defaultValue`: string — Active tab (controlled / uncontrolled).
- `onValueChange`: (v: string) => void — Change handler.
- `forceMount`: boolean — On <TabsContent>: keep inactive panels mounted.

## Command (`command`)

Components / Navigation. ⌘K command palette with fuzzy ranking, match highlighting, groups, shortcuts and a `useHotkey` helper.

File: components/opus/ui/command.tsx

```tsx
import { CommandDialog, useHotkey } from "@/components/opus/ui/command";

useHotkey("mod+k", () => setOpen((o) => !o));
<CommandDialog open={open} onOpenChange={setOpen} items={items} />
```

- `items`: CommandItem[] — { id, label, group?, keywords?, icon?, hint?, shortcut?, onSelect }
- `initialItems`: CommandItem[] — Curated list shown before the user types.
- `placeholder`: string — Input placeholder.
- `limit`: number = 50 — Max ranked results.
- `footer`: ReactNode — Hint bar under the list.

## Dialog (`dialog`)

Components / Overlay. Modal on the native <dialog> element — real inertness, focus trap and Esc for free, animated with @starting-style.

File: components/opus/ui/dialog.tsx

```tsx
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/opus/ui/dialog";

<Dialog>
  <DialogTrigger><Button>Open</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader>
    …
  </DialogContent>
</Dialog>
```

- `open / defaultOpen`: boolean — On <Dialog>: controlled / uncontrolled.
- `onOpenChange`: (open: boolean) => void — On <Dialog>.
- `size`: "sm" | "md" | "lg" | "xl" | "full" = "md" — On <DialogContent>: max width.
- `dismissible`: boolean = true — Close on backdrop click and Esc.
- `showClose`: boolean = true — Render the × button.

## Sheet (`sheet`)

Components / Overlay. Edge drawer (right, left, top, bottom) sharing the Dialog engine — bottom sheets get a grab handle.

File: components/opus/ui/sheet.tsx

```tsx
import { Sheet, SheetTrigger, SheetContent } from "@/components/opus/ui/sheet";

<Sheet>
  <SheetTrigger><Button>Filters</Button></SheetTrigger>
  <SheetContent side="right">…</SheetContent>
</Sheet>
```

- `side`: "right" | "left" | "top" | "bottom" = "right" — Edge to slide from (on <SheetContent>).

## Tooltip (`tooltip`)

Components / Overlay. Hover/focus tooltip with collision flipping and a shared warm-up — neighbours open instantly once one has shown.

File: components/opus/ui/tooltip.tsx

```tsx
import { Tooltip } from "@/components/opus/ui/tooltip";

<Tooltip content="Copy to clipboard">
  <Button size="icon" variant="ghost">…</Button>
</Tooltip>
```

- `content`: ReactNode — Tooltip body.
- `side`: "top" | "right" | "bottom" | "left" = "top" — Preferred side; flips if it would overflow.
- `align`: "start" | "center" | "end" = "center" — Alignment along the side.
- `delay`: number = 450 — Hover delay (ms). Keyboard focus opens instantly.

## Avatar (`avatar`)

Components / General. Image avatar with graceful initials fallback (stable colour per name), status dot, two shapes and an overlapping group with +N.

File: components/opus/ui/avatar.tsx

```tsx
import { Avatar, AvatarGroup } from "@/components/opus/ui/avatar";

<Avatar src={user.image} name={user.name} status="online" />
<AvatarGroup max={3}>{team.map((u) => <Avatar key={u.id} name={u.name} />)}</AvatarGroup>
```

- `src / name / alt`: string — Image, and the name used for initials + colour.
- `size`: "xs" | "sm" | "md" | "lg" | "xl" = "md" — Diameter.
- `shape`: "circle" | "square" = "circle" — Mask shape.
- `status`: "online" | "away" | "busy" | "offline" — Presence dot.
- `AvatarGroup.max`: number = 4 — Visible before +N.

## Tag (`tag`)

Components / General. Labels in eight colours, closable chips and checkable filter tags (Ant Design’s CheckableTag).

File: components/opus/ui/tag.tsx

```tsx
import { Tag } from "@/components/opus/ui/tag";

<Tag color="success">Paid</Tag>
<Tag closable onClose={remove}>#react</Tag>
<Tag checkable checked={on} onCheckedChange={setOn}>Design</Tag>
```

- `color`: "default" | "primary" | "success" | "warning" | "danger" | "info" | "purple" | "pink" = "default" — Colour.
- `closable / onClose`: boolean / () => void — × button.
- `checkable / checked / onCheckedChange`: boolean — Toggle chip mode.
- `icon`: ReactNode — Leading icon.

## Card (`card`)

Components / General. Composable card — header with action slot, content, footer — in default, elevated, ghost and interactive variants.

File: components/opus/ui/card.tsx

```tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/opus/ui/card";

<Card>
  <CardHeader><CardTitle>Title</CardTitle><CardDescription>…</CardDescription></CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>
```

- `variant`: "default" | "elevated" | "ghost" | "interactive" = "default" — Chrome style.

## Skeleton (`skeleton`)

Components / General. Loading placeholders with a shimmer sweep or pulse, plus a ready-made paragraph.

File: components/opus/ui/skeleton.tsx

```tsx
import { Skeleton, SkeletonText } from "@/components/opus/ui/skeleton";

<Skeleton className="size-10 rounded-full" />
<SkeletonText lines={3} />
```

- `animation`: "shimmer" | "pulse" | "none" = "shimmer" — Loading animation.

## Checkbox (`checkbox`)

Components / Data entry. Checkbox with a drawn tick animation, indeterminate state, built-in label + description and Field wiring.

File: components/opus/ui/checkbox.tsx

```tsx
import { Checkbox } from "@/components/opus/ui/checkbox";

<Checkbox label="Accept terms" checked={ok} onCheckedChange={setOk} />
```

- `checked / defaultChecked`: boolean | "indeterminate" — State.
- `onCheckedChange`: (c) => void — Change handler.
- `label / description`: ReactNode — Inline label (clickable) and helper text.
- `size`: "sm" | "md" = "md" — Box size.

## Radio Group (`radio-group`)

Components / Data entry. Radio group with roving focus and arrow keys, plus a card variant for plan/option pickers with icons and prices.

File: components/opus/ui/radio-group.tsx

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/opus/ui/radio-group";

<RadioGroup variant="card" value={plan} onValueChange={setPlan}>
  <RadioGroupItem value="pro" label="Pro" description="For teams" aside="$20" />
</RadioGroup>
```

- `value / defaultValue / onValueChange`: string — Selection.
- `variant`: "default" | "card" = "default" — List or tiles.
- `orientation`: "vertical" | "horizontal" = "vertical" — Layout.
- `RadioGroupItem`: { value, label, description?, aside?, icon?, disabled? } — An option.

## Segmented (`segmented`)

Components / Data entry. Ant Design’s Segmented control — a sliding thumb, icons, disabled options, block width and arrow-key navigation.

File: components/opus/ui/segmented.tsx

```tsx
import { Segmented } from "@/components/opus/ui/segmented";

<Segmented options={["Day", "Week", "Month"]} value={v} onValueChange={setV} />
```

- `options`: (string | { value, label, icon?, disabled? })[] — Segments.
- `value / defaultValue / onValueChange`: string — Selection.
- `size`: "sm" | "md" | "lg" = "md" — Height.
- `block`: boolean — Fill the container with equal segments.

## Input OTP (`input-otp`)

Components / Data entry. One-time-code input — auto-advance, backspace-back, arrows, full-code paste, SMS autofill, grouping and masking.

File: components/opus/ui/input-otp.tsx

```tsx
import { InputOTP } from "@/components/opus/ui/input-otp";

<InputOTP length={6} groups={[2]} onComplete={verify} />
```

- `length`: number = 6 — Slots.
- `value / onValueChange / onComplete`: string — Code + completion callback.
- `mode`: "numeric" | "alphanumeric" = "numeric" — Accepted characters.
- `groups`: number[] — Separator after these indices.
- `mask / invalid`: boolean — Password dots / error style.

## Number Input (`number-input`)

Components / Data entry. Stepper with press-and-hold repeat, ↑/↓ (Shift ×10), Home/End, clamping, precision and Intl display formatting.

File: components/opus/ui/number-input.tsx

```tsx
import { NumberInput } from "@/components/opus/ui/number-input";

<NumberInput value={qty} onValueChange={setQty} min={1} max={20} />
```

- `value / defaultValue / onValueChange`: number — Value.
- `min / max / step / precision`: number — Bounds and stepping.
- `format`: Intl.NumberFormatOptions — Display format while not editing.
- `controls`: "split" | "stacked" = "split" — Button layout.

## Tag Input (`tag-input`)

Components / Data entry. Chips input — Enter, comma or paste to add, Backspace to edit the last chip, validation, max count and suggestions.

File: components/opus/ui/tag-input.tsx

```tsx
import { TagInput } from "@/components/opus/ui/tag-input";

<TagInput value={tags} onValueChange={setTags} suggestions={topics} />
```

- `value / defaultValue / onValueChange`: string[] — Tags.
- `validate`: (t) => boolean | string — Reject with a message.
- `max`: number — Max tags.
- `suggestions`: string[] — Autocomplete list.
- `separators`: string[] = ["Enter", ",", "Tab"] — Commit keys.

## Rating (`rating`)

Components / Data entry. Star rating with hover preview, half steps, read-only mode, custom glyphs and slider-style keyboard support.

File: components/opus/ui/rating.tsx

```tsx
import { Rating } from "@/components/opus/ui/rating";

<Rating value={v} onValueChange={setV} allowHalf />
```

- `value / defaultValue / onValueChange`: number — Rating.
- `count`: number = 5 — Glyphs.
- `allowHalf / readOnly`: boolean — Half steps / display only.
- `icon / colorClassName`: ReactNode / string — Custom glyph and fill colour.

## Combobox (`combobox`)

Components / Data entry. Searchable select with ranked matching (prefix > word > substring, keywords too), clear button and an optional “Create …” row.

File: components/opus/ui/combobox.tsx

```tsx
import { Combobox } from "@/components/opus/ui/combobox";

<Combobox options={opts} value={v} onValueChange={setV} onCreate={addOption} />
```

- `options`: { value, label, description?, icon?, keywords?, disabled? }[] — Choices.
- `value / onValueChange`: string — Selection.
- `onCreate`: (text) => void — Enables the create row.
- `emptyText / placeholder`: ReactNode / string — Copy.

## Calendar (`calendar`)

Components / Data entry. Accessible month grid — single or range, two-month view, disabled days, min/max, week start, Intl labels and full keyboard nav.

File: components/opus/ui/calendar.tsx

```tsx
import { Calendar } from "@/components/opus/ui/calendar";

<Calendar selected={day} onSelect={setDay} />
<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
```

- `mode`: "single" | "range" = "single" — Selection model.
- `selected / onSelect`: Date | { from, to } — Value.
- `min / max / isDisabled`: Date / (d) => boolean — Constraints.
- `weekStartsOn / locale / numberOfMonths`: 0|1 / string / 1|2 — Presentation.

## Date Picker (`date-picker`)

Components / Data entry. Field-styled trigger with a floating Calendar; range mode adds a two-month view and quick presets (Last 7 days…).

File: components/opus/ui/date-picker.tsx

```tsx
import { DatePicker } from "@/components/opus/ui/date-picker";

<DatePicker value={date} onValueChange={setDate} />
<DatePicker mode="range" value={range} onValueChange={setRange} />
```

- `mode`: "single" | "range" = "single" — Selection model.
- `value / onValueChange`: Date | null | DateRange — Value.
- `presets`: { label, range: () => DateRange }[] — Range shortcuts (defaults provided).
- `format / locale`: Intl.DateTimeFormatOptions / string — Trigger label.

## Color Picker (`color-picker`)

Components / Data entry. Saturation/value pad, hue strip, hex input, swatches and the native EyeDropper — inline or in a popover.

File: components/opus/ui/color-picker.tsx

```tsx
import { ColorPicker, ColorPickerPopover } from "@/components/opus/ui/color-picker";

<ColorPickerPopover value={hex} onValueChange={setHex} />
```

- `value / defaultValue / onValueChange`: string — Hex colour.
- `swatches`: string[] — Preset colours.

## File Upload (`file-upload`)

Components / Data entry. Drag-and-drop dropzone with type/size validation, image thumbnails, per-file progress bars and remove buttons.

File: components/opus/ui/file-upload.tsx

```tsx
import { FileUpload } from "@/components/opus/ui/file-upload";

<FileUpload accept="image/*,.pdf" maxSize={5_000_000} onFilesChange={upload} progress={progress} />
```

- `accept / multiple / maxSize / maxFiles`: string / boolean / number — Constraints.
- `onFilesChange`: (files: File[]) => void — Accepted files.
- `progress`: Record<fileName, 0..100> — Drive the bars from your upload code.

## Accordion (`accordion`)

Components / Data display. Single or multiple expansion with grid-rows height animation, three looks and arrow-key header navigation.

File: components/opus/ui/accordion.tsx

```tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/opus/ui/accordion";

<Accordion type="single" defaultValue={["a"]}>
  <AccordionItem value="a">
    <AccordionTrigger>Question</AccordionTrigger>
    <AccordionContent>Answer</AccordionContent>
  </AccordionItem>
</Accordion>
```

- `type`: "single" | "multiple" = "single" — Expansion model.
- `value / defaultValue / onValueChange`: string[] — Open items.
- `collapsible`: boolean = true — Single mode: allow closing all.
- `variant`: "default" | "separated" | "ghost" = "default" — Look.

## Data Table (`table`)

Components / Data display. Typed data table — click-to-sort headers (aria-sort), row selection with page-level select-all, paging, sticky header, empty state.

File: components/opus/ui/table.tsx

```tsx
import { DataTable, type Column } from "@/components/opus/ui/table";

const columns: Column<User>[] = [
  { key: "name", header: "Name", sortValue: (u) => u.name },
  { key: "mrr", header: "MRR", align: "right", sortValue: (u) => u.mrr },
];
<DataTable columns={columns} rows={users} rowKey={(u) => u.id} selectable pageSize={10} />
```

- `columns`: Column<T>[] — { key, header, cell?, sortValue?, align?, width? }
- `rows / rowKey`: T[] / (row) => string — Data.
- `selectable / selected / onSelectedChange`: boolean / string[] — Row selection.
- `pageSize`: number = 0 — Client paging (0 = off).
- `striped / dense / maxHeight / onRowClick / empty`: — — Presentation & behaviour.

## Pagination (`pagination`)

Components / Navigation. Page list with smart ellipses and sibling count, or a compact simple variant. `pageRange()` is exported for custom UIs.

File: components/opus/ui/pagination.tsx

```tsx
import { Pagination } from "@/components/opus/ui/pagination";

<Pagination total={20} page={page} onPageChange={setPage} />
```

- `total`: number — Page count.
- `page / defaultPage / onPageChange`: number — Current page (1-based).
- `siblings`: number = 1 — Pages beside the current one.
- `variant / size`: "numbers" | "simple" / "sm" | "md" — Presentation.

## Progress (`progress`)

Components / Feedback. Linear progress (scaleX, striped, gradient, indeterminate) and a circular ring with centred label.

File: components/opus/ui/progress.tsx

```tsx
import { Progress, ProgressCircle } from "@/components/opus/ui/progress";

<Progress value={64} label="Uploading" showValue />
<ProgressCircle value={92} tone="success" />
```

- `value`: number — 0–100; omit for indeterminate.
- `tone`: "primary" | "success" | "warning" | "destructive" | "gradient" = "primary" — Colour.
- `size / striped / label / showValue`: — — Bar options.
- `ProgressCircle.size / thickness`: number = 64 / 6 — Ring geometry.

## Statistic (`statistic`)

Components / Data display. KPI card — label, big value, coloured delta (with polarity for costs/latency), icon and a trend sparkline.

File: components/opus/ui/statistic.tsx

```tsx
import { Statistic } from "@/components/opus/ui/statistic";

<Statistic label="Revenue" value="$84,210" delta={12.4} trend={series} />
```

- `label / value / hint / icon`: ReactNode — Content.
- `delta`: number — Percent change.
- `polarity`: "up-good" | "up-bad" = "up-good" — Which direction is green.
- `trend`: number[] — Sparkline data.

## Sparkline (`sparkline`)

Components / Data display. Dependency-free SVG mini chart — smooth line, gradient area or bars — for cards and table cells. Server-component safe.

File: components/opus/ui/sparkline.tsx

```tsx
import { Sparkline } from "@/components/opus/ui/sparkline";

<Sparkline data={[3, 5, 4, 8, 7, 10]} type="area" />
```

- `data`: number[] — Series.
- `type`: "area" | "line" | "bar" = "area" — Mark type.
- `width / height / strokeWidth`: number = 120 / 36 / 1.75 — Geometry.
- `color / smooth / showLast`: string / boolean — Style.

## Timeline (`timeline`)

Components / Data display. Vertical activity timeline with tone dots or icons, timestamps and a pulsing pending tail.

File: components/opus/ui/timeline.tsx

```tsx
import { Timeline } from "@/components/opus/ui/timeline";

<Timeline items={[{ title: "Deployed", time: "2m ago", tone: "success" }]} />
```

- `items`: { title, description?, time?, icon?, tone?, pending? }[] — Events, newest first.

## Empty (`empty`)

Components / Data display. Empty state with drawn illustrations (inbox, search, error, folder), title, description and actions.

File: components/opus/ui/empty.tsx

```tsx
import { Empty } from "@/components/opus/ui/empty";

<Empty title="No projects yet" action={<Button>New project</Button>} />
```

- `illustration`: "inbox" | "search" | "error" | "folder" | ReactNode = "inbox" — Picture.
- `title / description / action`: ReactNode — Content.
- `bordered`: boolean = true — Dashed frame.

## Descriptions (`descriptions`)

Components / Data display. Key–value details as a semantic <dl> — bordered grid or airy list, 1–4 columns, spanning cells.

File: components/opus/ui/descriptions.tsx

```tsx
import { Descriptions } from "@/components/opus/ui/descriptions";

<Descriptions items={[{ label: "Plan", value: "Pro" }]} columns={3} />
```

- `items`: { label, value, span? }[] — Pairs.
- `columns`: 1 | 2 | 3 | 4 = 3 — Columns on wide screens.
- `variant / title`: "grid" | "list" / ReactNode — Look and heading.

## Tree (`tree`)

Components / Data display. File-explorer tree with indent guides, icons, meta, disabled nodes and full WAI-ARIA tree keyboard support.

File: components/opus/ui/tree.tsx

```tsx
import { Tree } from "@/components/opus/ui/tree";

<Tree data={nodes} selected={id} onSelectedChange={setId} defaultExpanded={["src"]} />
```

- `data`: TreeNode[] — { id, label, icon?, meta?, children?, disabled? }
- `selected / onSelectedChange`: string — Selection.
- `expanded / defaultExpanded / onExpandedChange`: string[] — Open folders.
- `guides`: boolean = true — Indent lines.

## Carousel (`carousel`)

Components / Data display. Scroll-snap carousel — native swipe momentum, arrows, dots, keyboard, multi-slide widths and pausable autoplay.

File: components/opus/ui/carousel.tsx

```tsx
import { Carousel } from "@/components/opus/ui/carousel";

<Carousel autoplay={4000}>{slides}</Carousel>
```

- `slideWidth`: string = "100%" — CSS width per slide.
- `gap`: number = 16 — Gap (px).
- `autoplay`: number = 0 — ms between slides (pauses on hover/focus).
- `loop / showDots / showArrows`: boolean = true — Behaviour.

## Alert (`alert`)

Components / Feedback. Callouts in info, success, warning, destructive and neutral tones — with actions, inline actions and dismiss.

File: components/opus/ui/alert.tsx

```tsx
import { Alert } from "@/components/opus/ui/alert";

<Alert tone="warning" title="Trial ends soon" action={<Button size="xs">Upgrade</Button>} />
```

- `tone`: "info" | "success" | "warning" | "destructive" | "neutral" = "info" — Colour + icon.
- `title / icon`: ReactNode — Heading; icon={null} hides the icon.
- `action / inlineAction`: ReactNode / boolean — Buttons below or at the right.
- `closable / onClose`: boolean / () => void — Dismiss.

## Toast (`toast`)

Components / Feedback. Sonner-style notifications: an imperative toast() API, promise toasts, actions, stacking that expands on hover, swipe to dismiss.

File: components/opus/ui/toast.tsx

```tsx
import { toast, Toaster } from "@/components/opus/ui/toast";

// once, in your root layout:
<Toaster position="bottom-right" />

// anywhere:
toast.success("Saved");
toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Failed" });
```

- `toast(title, options?)`: { description?, duration?, action?, icon?, id? } — Also .success .error .warning .info .loading .promise .dismiss.
- `Toaster.position`: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" = "bottom-right" — Corner.
- `Toaster.visible / duration / expand`: number / number / boolean = 3 / 4000 / false — Stack depth, lifetime, always expanded.

## Breadcrumb (`breadcrumb`)

Components / Navigation. Trail with icons, custom separators and a collapsible middle (click … to reveal the full path).

File: components/opus/ui/breadcrumb.tsx

```tsx
import { Breadcrumb } from "@/components/opus/ui/breadcrumb";

<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Settings" }]} maxItems={3} />
```

- `items`: { label, href?, icon? }[] — Trail; the last item is the current page.
- `separator`: ReactNode — Custom separator.
- `maxItems`: number = 0 — Collapse threshold.

## Steps (`steps`)

Components / Navigation. Flow progress (Ant Design’s Steps) — numbered or dots, horizontal or vertical, error state, clickable finished steps.

File: components/opus/ui/steps.tsx

```tsx
import { Steps } from "@/components/opus/ui/steps";

<Steps items={[{ title: "Account" }, { title: "Team" }]} current={1} />
```

- `items`: { title, description?, icon? }[] — Steps.
- `current`: number — Active index.
- `status`: "process" | "error" = "process" — Current step state.
- `orientation / dots / onStepClick`: — — Presentation and navigation.

## Dropdown Menu (`dropdown-menu`)

Components / Navigation. Data-driven menu — items with icons/shortcuts, checkbox & radio items, labels, separators, nested submenus, typeahead.

File: components/opus/ui/dropdown-menu.tsx

```tsx
import { DropdownMenu } from "@/components/opus/ui/dropdown-menu";

<DropdownMenu
  trigger={<Button>Open</Button>}
  items={[{ label: "Profile", onSelect }, { type: "separator" }, { label: "Log out", destructive: true }]}
/>
```

- `trigger`: ReactElement — Element that toggles the menu (gets ref + aria).
- `items`: MenuItem[] — item | checkbox | radio | submenu | label | separator
- `side / align`: Side / Align = "bottom" / "start" — Placement (flips on collision).

## Context Menu (`context-menu`)

Components / Navigation. Right-click menu for any area (also Shift+F10 / the Menu key), sharing the DropdownMenu panel and item model.

File: components/opus/ui/context-menu.tsx

```tsx
import { ContextMenu } from "@/components/opus/ui/context-menu";

<ContextMenu items={items}><div>Right-click me</div></ContextMenu>
```

- `items`: MenuItem[] — Same model as DropdownMenu.

## Popover (`popover`)

Components / Overlay. Click-to-open floating panel with an optional arrow, collision flipping, focus handoff and Esc/outside dismiss.

File: components/opus/ui/popover.tsx

```tsx
import { Popover } from "@/components/opus/ui/popover";

<Popover trigger={<Button>Edit</Button>}>{(close) => <Form onDone={close} />}</Popover>
```

- `trigger`: ReactElement — Toggle element.
- `children`: ReactNode | (close) => ReactNode — Content.
- `open / defaultOpen / onOpenChange`: boolean — State.
- `side / align / offset / arrow`: — — Placement.

## Hover Card (`hover-card`)

Components / Overlay. Rich preview on hover or focus — profile cards, link previews — that stays open while you move onto it.

File: components/opus/ui/hover-card.tsx

```tsx
import { HoverCard } from "@/components/opus/ui/hover-card";

<HoverCard trigger={<a href="/u/ada">@ada</a>}>…</HoverCard>
```

- `trigger / children`: ReactElement / ReactNode — Anchor and card content.
- `openDelay / closeDelay`: number = 450 / 200 — Delays (ms).
- `side / align`: Side / Align — Placement.

## Popconfirm (`popconfirm`)

Components / Overlay. Inline confirmation bubble (Ant Design’s Popconfirm) — async-aware confirm button with a spinner until it resolves.

File: components/opus/ui/popconfirm.tsx

```tsx
import { Popconfirm } from "@/components/opus/ui/popconfirm";

<Popconfirm trigger={<Button>Delete</Button>} title="Delete it?" destructive onConfirm={remove} />
```

- `trigger / title / description`: ReactElement / ReactNode — Anchor and copy.
- `onConfirm`: () => void | Promise — Awaited; button shows loading.
- `confirmText / cancelText / destructive / side`: — — Options.

## Hero · Aurora (`hero-aurora`)

Blocks / Marketing. Centred launch hero over a live aurora — announcement pill with shimmer, rotating headline word, CTAs and a logo marquee.

File: components/opus/blocks/hero-aurora.tsx

```tsx
import { HeroAurora } from "@/components/opus/blocks/hero-aurora";

export default function Page() {
  return <HeroAurora />;
}
```

## Hero · Globe (`hero-globe`)

Blocks / Marketing. Split hero for infrastructure products: copy and ticking stats on the left, a draggable dotted planet with live arcs on the right.

File: components/opus/blocks/hero-globe.tsx

```tsx
import { HeroGlobe } from "@/components/opus/blocks/hero-globe";

<HeroGlobe />
```

## Floating Navbar (`floating-navbar`)

Blocks / Marketing. Pill navbar that turns to frosted glass on scroll, hides on scroll-down, returns on scroll-up, with a sheet menu on mobile.

File: components/opus/blocks/floating-navbar.tsx

```tsx
import { FloatingNavbar } from "@/components/opus/blocks/floating-navbar";

// in your layout, above the page content:
<FloatingNavbar />
```

- `scrollContainer`: HTMLElement | null — Track a scroll box instead of the window.

## Features · Bento (`features-bento`)

Blocks / Marketing. Bento feature grid with a shared border glow and a live mini-visual in every cell: command list, sparkline, switches, integrations marquee.

File: components/opus/blocks/features-bento.tsx

```tsx
import { FeaturesBento } from "@/components/opus/blocks/features-bento";

<FeaturesBento />
```

## Pricing (`pricing`)

Blocks / Marketing. Three tiers with a monthly/yearly segmented switch, odometer-rolling prices and a border beam around the featured plan.

File: components/opus/blocks/pricing.tsx

```tsx
import { Pricing } from "@/components/opus/blocks/pricing";

<Pricing />
```

## Testimonials (`testimonials`)

Blocks / Marketing. Two counter-scrolling rows of testimonial cards with ratings and avatars; pauses on hover.

File: components/opus/blocks/testimonials.tsx

```tsx
import { Testimonials } from "@/components/opus/blocks/testimonials";

<Testimonials />
```

## Stats Band (`stats-band`)

Blocks / Marketing. Proof in numbers — four counters that tick up when scrolled into view, over a plus-pattern band.

File: components/opus/blocks/stats-band.tsx

```tsx
import { StatsBand } from "@/components/opus/blocks/stats-band";

<StatsBand />
```

## FAQ (`faq-section`)

Blocks / Marketing. Two-column FAQ: heading and support CTA on the left, an animated accordion on the right.

File: components/opus/blocks/faq-section.tsx

```tsx
import { FaqSection } from "@/components/opus/blocks/faq-section";

<FaqSection />
```

## CTA · Beams (`cta-beams`)

Blocks / Marketing. Closing call-to-action card over racing grid beams.

File: components/opus/blocks/cta-beams.tsx

```tsx
import { CtaBeams } from "@/components/opus/blocks/cta-beams";

<CtaBeams />
```

## Footer (`site-footer`)

Blocks / Marketing. Multi-column footer with newsletter signup, link groups, social icons and a legal row.

File: components/opus/blocks/site-footer.tsx

```tsx
import { SiteFooter } from "@/components/opus/blocks/site-footer";

<SiteFooter />
```

## Waitlist (`waitlist`)

Blocks / Marketing. Pre-launch page: warp-speed starfield, liquid-glass card, email capture, rolling counter and a confetti thank-you.

File: components/opus/blocks/waitlist.tsx

```tsx
import { Waitlist } from "@/components/opus/blocks/waitlist";

<Waitlist />
```

## Sign in (`auth-login`)

Blocks / Application. Split sign-in screen: a living mesh gradient with a revealed quote, and an accessible form with social buttons and validation.

File: components/opus/blocks/auth-login.tsx

```tsx
import { AuthLogin } from "@/components/opus/blocks/auth-login";

<AuthLogin />
```

## Dashboard (`dashboard`)

Blocks / Application. Complete SaaS app shell — sidebar, header with search, KPI statistics, range-switchable revenue chart, activity timeline and invoices table.

File: components/opus/blocks/dashboard.tsx

```tsx
import { Dashboard } from "@/components/opus/blocks/dashboard";

<Dashboard />
```

## 404 (`not-found`)

Blocks / Application. A 404 people screenshot: glitching numerals over a 1-bit dithered field that follows the cursor.

File: components/opus/blocks/not-found.tsx

```tsx
// app/not-found.tsx
import { NotFound } from "@/components/opus/blocks/not-found";

export default function NotFoundPage() {
  return <NotFound />;
}
```