Components

Layout

Window Card

The frosted-glass 'OS window' — a chrome bar (with a single functional mac-style red close dot when onClose is passed) above a content slot. This is the shell behind the homepage's AI intake card.

Layout

Dock Item

A single floating-dock tile — hover tooltip, active-state dot indicator, macOS-style magnification driven by boost. Renders as a Link when href is passed, or a button otherwise (used for the AI-chat reopen action).

Canvas

Ambient Canvas

A full-viewport fragment shader — a halftone dot grid colorized by a domain-warped FBM noise field (churning, water-like blobs rather than straight bands), alpha-blended at low opacity for a retro-CRT/static look. Theme-independent by design: always the same rainbow palette, low opacity so it stays ambient instead of fighting page content. Pointer-reactive: the dot grid morphs — same cells, same pitch — into black ASCII glyphs (ring/cross/plus/square) only where the pointer actually moves, painted via a ping-pong feedback buffer with an organic, noise-jittered width. The stamp itself is snapped to the same dot grid with a hard edge (no anti-aliasing) — still a round silhouette, but stepped/blocky at the edges since it's built from grid cells rather than smooth math, matching the retro grid's pixel language. The trail's continuous decay is quantized into 3 discrete steps before driving color/shape, so a stroke fades out in 3 visible layers instead of one smooth continuous fade. A stationary pointer paints nothing new — the existing stroke just steps through its fade-out.

Canvas

Plasma Logo Mark

A fluid plasma fragment shader (raw WebGL, no `three`) CSS-masked to the silhouette of the site's logo image — domain-warped FBM noise flowing through a cyan/orange/purple/blue palette. A plain `<Image>` of the same logo renders underneath at all times as the SSR/no-WebGL fallback; once the canvas mounts it's masked to the identical logo shape and fully occludes the image beneath it. Swaps between light/dark logo assets based on the current theme.

Layout

Phone Mockup

A skeuomorphic iPhone mockup with a looping chat demo: a collapsed "Ask anything…" pill expands into a card, types out `chatPrompt` (GSAP TextPlugin), lights up and bounces its send button, then a marker travels an SVG connector path (GSAP MotionPathPlugin) down into a notification stack that staggers in — holds, fades back to the resting state, then loops. Also has a mouse-driven 3D tilt scoped to the mockup's own bounding box. Theme-independent by design (the phone screen is always dark, regardless of the page's light/dark theme), same rationale as Ambient Canvas.

Layout

Glow Button

A CTA pill button with a diagonal sheen that sweeps across on hover, plus a soft blue glow and lift. Touch devices never trigger `:hover`, so tapping instead adds a manual `.is-active` class (mirroring the hover state) immediately, then calls `onClick` about 450ms later — just long enough for the sheen to actually be seen before whatever the click does (e.g. navigation) unmounts the button.

Layout

Gradient Heading

A large heading treatment in two variants: `matte` (solid `--color-on-surface` with a soft layered text-shadow) and `silver` (the same color gradient-clipped into the text itself, `background-clip: text`, plus a matching layered `drop-shadow` filter since a clipped-text element can't use `text-shadow`). Reads `--color-on-surface`, so it retints automatically under the `.light` theme class — no separate light/dark variant needed. Plays a one-shot entrance on mount by default — `matte` fades/rises up out of a blur, `silver` wipes in via an animated `clip-path` — matching the two-line tagline reveal on the homepage. `delay` lets a second heading's reveal overlap the first's, for that same cascading two-line effect.