# BoseUI — LLM & AI Assistant Documentation Index

> Modern React components built with Framer Motion, Tailwind CSS, and TypeScript.
> Crafted by Rishabh Bose (https://theb0se.vercel.app/)

## Overview
- **Library**: BoseUI
- **Website**: https://boseui.site
- **Author**: Rishabh Bose — GitHub: https://github.com/Theb0se | LinkedIn: https://www.linkedin.com/in/rishabhbose3107/
- **Stack**: Next.js (App Router), React, TypeScript, Tailwind CSS, Framer Motion
- **Registry Index**: https://boseui.site/registry.json

## Available Kinetic Components (127)

### Accordion (`Accordion`)
- **Slug**: `accordion`
- **Category**: Navigation
- **Tagline**: Animated collapsible panels with single or multi-expand support.
- **Description**: Smooth collapsible disclosure panels with spring-rotated chevron indicators, single or multiple expansion modes, and full keyboard accessibility.
- **Docs URL**: https://boseui.site/components/accordion
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/accordion.json`
- **Registry Manifest**: https://boseui.site/r/accordion.json
- **Key Features**:
  - Smooth height and opacity transitions powered by Framer Motion AnimatePresence.
  - Supports both single-open and allowMultiple expansion modes.
  - Optional monospace subtitle badges for each accordion header.
- **Accessibility**:
  - Uses semantic <button> headers with aria-expanded state announcements.
  - Full Enter and Space keyboard support for toggling panels.
  - Respects prefers-reduced-motion automatically.
- **Props**:
  - `items` (AccordionItem[]): Array of accordion items with id, title, optional subtitle, and content.
  - `allowMultiple` (boolean, default: false): When true, multiple panels can remain open at the same time.
  - `defaultOpenIds` (string[], default: ["item-1"]): Array of item IDs expanded on initial render.
- **Usage Example**:
```tsx
import { Accordion } from "@/components/ui/accordion";

export function Example() {
  return <Accordion allowMultiple={false} />;
}
```

---

### Accordion Stack Cards (`AccordionStackCards`)
- **Slug**: `accordion-stack-cards`
- **Category**: Cards
- **Tagline**: Spatial 3D card deck with hover cascade and spring cycling.
- **Description**: Spatial 3D card deck that fans out into a vertical cascade on pointer hover or focus and cycles card order with spring layout projection.
- **Docs URL**: https://boseui.site/components/accordion-stack-cards
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/accordion-stack-cards.json`
- **Registry Manifest**: https://boseui.site/r/accordion-stack-cards.json
- **Key Features**:
  - Depth-scaled 3D card stack that smoothly fans out into an inspectable vertical cascade on hover or keyboard focus.
  - Click or press Enter/Space on any card to cycle the front card to the back with Hooke's Law layout springs.
  - Zero external dependencies beyond Framer Motion and Lucide icons.
- **Accessibility**:
  - Each card is keyboard-focusable and automatically expands the stack when focused via Tab.
  - Supports Enter and Space keys to cycle cards through the deck.
  - Disables scale depth transformations when prefers-reduced-motion is enabled.
- **Props**:
  - `items` (StackCardItem[]): Array of card items containing id, badge, title, metric, and subtitle.
  - `stiffness` (number, default: 300): Spring stiffness coefficient for deck expansion and card cycling.
  - `damping` (number, default: 25): Spring damping coefficient controlling stack oscillation decay.
- **Usage Example**:
```tsx
import { AccordionStackCards } from "@/components/ui/accordion-stack-cards";

export function Example() {
  return (
    <AccordionStackCards stiffness={300} damping={25} />
  );
}
```

---

### Animated Tabs (`AnimatedTabs`)
- **Slug**: `animated-tabs`
- **Category**: Navigation
- **Tagline**: Sliding pill tabs built with Framer Motion layoutId springs.
- **Description**: Smooth shared-element sliding pill tabs with animated panel transitions, optional badge counters, and keyboard arrow navigation.
- **Docs URL**: https://boseui.site/components/animated-tabs
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/animated-tabs.json`
- **Registry Manifest**: https://boseui.site/r/animated-tabs.json
- **Key Features**:
  - Shared-element active pill indicator powered by Framer Motion layoutId.
  - Crossfades tab panel content smoothly on selection change.
  - Supports badge counts and Left/Right arrow keyboard navigation.
- **Accessibility**:
  - Implements WAI-ARIA role='tablist', role='tab', and role='tabpanel'.
  - Supports Left and Right arrow keys to switch between tabs.
  - Respects prefers-reduced-motion automatically.
- **Props**:
  - `tabs` (TabItem[]): Array of tab items containing id, label, optional badge, and content.
  - `defaultTabId` (string): ID of the tab selected on initial render.
  - `onChange` ((tabId: string) => void): Callback fired when the user switches tabs.
- **Usage Example**:
```tsx
import { AnimatedTabs } from "@/components/ui/animated-tabs";

export function Example() {
  return <AnimatedTabs />;
}
```

---

### Context Menu & Popover (`AppleContextMenu`)
- **Slug**: `apple-context-menu`
- **Category**: Overlays
- **Tagline**: Blurred popover menu with arrow caret and destructive actions.
- **Description**: Frosted glassmorphic context menu and popover with a directional pointer arrow, hairline-divided action groups, keyboard shortcuts, and red destructive items.
- **Docs URL**: https://boseui.site/components/apple-context-menu
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/apple-context-menu.json`
- **Registry Manifest**: https://boseui.site/r/apple-context-menu.json
- **Key Features**:
  - Frosted `backdrop-blur-xl` panel with a diamond-rotated top pointer arrow.
  - Supports both left-click button trigger and right-click context menu activation.
  - Hairline-divided action groups with dedicated red styling for destructive actions.
- **Accessibility**:
  - Uses `role='menu'` and `role='menuitem'` with `aria-haspopup='menu'` and `aria-expanded`.
  - Dismisses automatically on `Escape` key press or outside pointer click.
  - Respects `prefers-reduced-motion` for menu scale transitions.
- **Props**:
  - `groups` (ContextMenuGroup[]): Array of action groups separated by hairline dividers.
  - `triggerLabel` (string, default: "Actions Menu"): Label displayed inside the menu trigger button.
  - `defaultOpen` (boolean, default: false): Initial open state when rendered.
  - `onSelect` ((item: ContextMenuItem) => void): Callback fired when any menu item is clicked.
  - `className` (string): Additional Tailwind CSS classes for the wrapper.
- **Usage Example**:
```tsx
import { AppleContextMenu } from "@/components/ui/apple-context-menu";

export function Example() {
  return (
    <AppleContextMenu
      triggerLabel="Actions Menu"
      onSelect={(item) => console.log("Selected:", item.label)}
    />
  );
}
```

---

### Search Field (`AppleSearchField`)
- **Slug**: `apple-search-field`
- **Category**: Inputs
- **Tagline**: Rounded search bar with sliding Cancel button and quick chips.
- **Description**: Rounded iOS-inspired search bar with a magnifier icon, inline clear badge, quick suggestion pills, and a 'Cancel' button that slides in smoothly on focus.
- **Docs URL**: https://boseui.site/components/apple-search-field
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/apple-search-field.json`
- **Registry Manifest**: https://boseui.site/r/apple-search-field.json
- **Key Features**:
  - Shared-layout spring compression on the input bar as the 'Cancel' button slides in from the right.
  - Animated circular clear (`X`) button that appears as soon as the user types.
  - Reveals filterable quick-suggestion pills while focused.
- **Accessibility**:
  - Uses semantic `type='search'` with `Escape` key bound to clear and dismiss focus.
  - Includes explicit `aria-label` on the clear button.
  - Respects `prefers-reduced-motion` for layout and slide transitions.
- **Props**:
  - `placeholder` (string, default: "Search components, tokens, or docs..."): Placeholder text shown inside the search bar.
  - `value` (string): Controlled search query value.
  - `defaultValue` (string, default: ""): Initial search query for uncontrolled mode.
  - `onChange` ((query: string) => void): Callback fired whenever the search query changes.
  - `onCancel` (() => void): Callback fired when the Cancel button or Escape key is pressed.
  - `suggestions` (string[]): Quick suggestion chips displayed below the field when active.
  - `className` (string): Additional Tailwind CSS classes for the outer wrapper.
- **Usage Example**:
```tsx
import { AppleSearchField } from "@/components/ui/apple-search-field";

export function Example() {
  return (
    <AppleSearchField
      placeholder="Search components..."
      onChange={(q) => console.log("Query:", q)}
    />
  );
}
```

---

### Asteroid Field (`AsteroidField`)
- **Slug**: `asteroid-field`
- **Category**: Backgrounds
- **Tagline**: Three-layer parallax planetesimals with live meteor showers.
- **Description**: Deep-space parallax asteroid field and meteor shower on Canvas 2D featuring procedural faceted rock polygons across three depth layers, crater shading, ambient dust motes, and high-speed bolide meteors.
- **Docs URL**: https://boseui.site/components/asteroid-field
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/asteroid-field.json`
- **Registry Manifest**: https://boseui.site/r/asteroid-field.json
- **Key Features**:
  - Procedurally generated faceted polygon rocks with directional solar shading and surface craters
  - Three distinct parallax depth planes (far, mid, near) rotating and drifting at realistic relative speeds
  - High-speed glowing bolide meteors with linear gradient plasma tails
  - Three mineral composition palettes: Basalt, Kuiper Ice, and Ferrous Iron
- **Accessibility**:
  - Decorative canvas is marked aria-hidden so screen readers focus on foreground content
  - Velocity slider allows slowing or pausing orbital drift for motion-sensitive users
- **Props**:
  - `asteroidCount` (number, default: 32): Total number of procedural faceted asteroids across the 3 depth layers.
  - `speed` (number, default: 1.0): Parallax drift velocity multiplier.
  - `angle` (number, default: 18): Drift trajectory angle in degrees.
  - `meteorFrequency` (number, default: 0.4): Spawn probability multiplier for high-speed glowing meteors.
  - `colorTheme` ("basalt" | "ice" | "iron", default: "basalt"): Mineral color palette applied to asteroids, craters, and meteors.
  - `children` (React.ReactNode): Optional foreground UI rendered above the asteroid field.
  - `className` (string): Additional CSS classes for the root container.
- **Usage Example**:
```tsx
import { AsteroidField } from "@/components/ui/AsteroidField";

export function AsteroidFieldDemo() {
  return (
    <AsteroidField
      asteroidCount={32}
      speed={1.0}
      angle={18}
      meteorFrequency={0.4}
      colorTheme="basalt"
    />
  );
}
```

---

### Atmospheric Fog (`AtmosphericFog`)
- **Slug**: `atmospheric-fog`
- **Category**: Backgrounds
- **Tagline**: Volumetric domain-warped mist layers drifting across twilight.
- **Description**: Volumetric drifting fog and mist banks powered by a custom WebGL domain-warped FBM shader with multi-layer parallax across a moody moonlit depth gradient.
- **Docs URL**: https://boseui.site/components/atmospheric-fog
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/atmospheric-fog.json`
- **Registry Manifest**: https://boseui.site/r/atmospheric-fog.json
- **Key Features**:
  - Real-time WebGL fragment shader using nested domain-warped Fractional Brownian Motion (FBM)
  - Configurable multi-octave parallax mist layers moving at independent horizon speeds
  - Subtle pointer parting displacement that gently parts the mist around the cursor
  - Live HUD presets for Moonlit Slate, Nordic Pine, Crimson Dusk, and Golden Dawn palettes
- **Accessibility**:
  - Low-frequency, smooth motion prevents visual fatigue andvestibular strain
  - All HUD controls are keyboard accessible and non-intrusive when custom children are supplied
- **Props**:
  - `density` (number, default: 0.7): Controls the opacity and volumetric thickness of the mist layers.
  - `speed` (number, default: 1.0): Multiplier for horizontal drift and internal domain-warp evolution speed.
  - `fogColor` (string, default: "#CBD5E1"): Hex color for the illuminated mist banks and moonlit scattering.
  - `backgroundColor` (string, default: "#090D16"): Hex color for the deep twilight zenith sky gradient.
  - `layers` (number, default: 4): Number of parallax mist banks stacked from foreground to background (1 to 6).
  - `children` (React.ReactNode): Optional foreground UI rendered above the WebGL fog canvas.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { AtmosphericFog } from "@/components/ui/AtmosphericFog";

export default function AtmosphericFogDemo() {
  return (
    <AtmosphericFog
      density={0.75}
      speed={1.0}
      fogColor="#CBD5E1"
      backgroundColor="#090D16"
      layers={4}
    >
      <div className="flex min-h-[520px] flex-col items-center justify-center p-8 text-center">
        <h1 className="text-4xl font-bold tracking-tight text-white">
          Silent Valley
        </h1>
        <p className="mt-3 max-w-md text-slate-300">
          Multi-layered volumetric mist powered by domain-warped FBM noise.
        </p>
      </div>
    </AtmosphericFog>
  );
}
```

---

### Aurora (`AuroraBackground`)
- **Slug**: `aurora-background`
- **Category**: Backgrounds
- **Tagline**: Screen-blended aurora blobs on offset keyframe loops.
- **Description**: macOS-inspired northern lights background using 3 to 5 large 60px blurred color blobs with screen blend mode drifting on offset keyframe loops.
- **Docs URL**: https://boseui.site/components/aurora-background
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/aurora-background.json`
- **Registry Manifest**: https://boseui.site/r/aurora-background.json
- **Key Features**:
  - Uses `filter: blur(60px)` and `mix-blend-mode: screen` across 4 offset radial color layers.
  - Pure CSS keyframe drift with zero JavaScript per-frame overhead.
  - Includes Borealis, Sonoma, and Polar color palette presets in the interactive preview.
- **Accessibility**:
  - Marks decorative aurora blob layers with `aria-hidden='true'`.
  - Maintains high foreground text contrast over the dark `#04060E` base canvas.
  - Preset selector buttons are keyboard focusable.
- **Props**:
  - `colors` (string[], default: ["#10B981", "#06B6D4", "#8B5CF6", "#3B82F6"]): Array of 3 to 5 hex or RGB color strings for the aurora blobs.
  - `speed` (number, default: 1): Speed multiplier for the keyframe drift cycle.
  - `intensity` (number, default: 0.75): Overall opacity intensity of the aurora layer (0.2 to 1).
  - `children` (React.ReactNode): Optional foreground content rendered above the aurora.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { AuroraBackground } from "@/components/ui/aurora-background";

export function Example() {
  return (
    <AuroraBackground
      colors={["#10B981", "#06B6D4", "#8B5CF6", "#3B82F6"]}
      speed={1}
      intensity={0.75}
    />
  );
}
```

---

### Aurora Flux Surface (`AuroraFluxSurface`)
- **Slug**: `aurora-flux-surface`
- **Category**: Backgrounds
- **Tagline**: Dual-mass GPU radial aurora surface with zero React re-renders.
- **Description**: GPU-composited ambient aurora canvas where dual radial luminance fields with contrasting spring mass chase the pointer.
- **Docs URL**: https://boseui.site/components/aurora-flux-surface
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/aurora-flux-surface.json`
- **Registry Manifest**: https://boseui.site/r/aurora-flux-surface.json
- **Key Features**:
  - Pairs a low-mass leading radial orb (m=0.4) with a high-mass trailing orb (m=1.4) for organic fluidseparation.
  - Composited directly via Framer Motion useMotionTemplate with zero React state re-renders.
  - Monochrome architectural dot overlay preserving BoseUI's high-contrast aesthetic.
- **Accessibility**:
  - Marks all ambient luminance and dot texture layers with aria-hidden='true'.
  - Freezes luminance orb coordinates when prefers-reduced-motion is active.
  - Preserves WCAG AA contrast inside the foreground container.
- **Props**:
  - `orbRadius` (number, default: 260): Radius of the primary radial luminance field in pixels.
  - `stiffness` (number, default: 180): Spring stiffness coefficient for the leading luminance orb.
  - `damping` (number, default: 24): Spring damping coefficient controlling luminance trail decay.
- **Usage Example**:
```tsx
import { AuroraFluxSurface } from "@/components/ui/aurora-flux-surface";

export function Example() {
  return (
    <AuroraFluxSurface orbRadius={260} stiffness={180} damping={24} />
  );
}
```

---

### Autocomplete (`Autocomplete`)
- **Slug**: `autocomplete`
- **Category**: Inputs
- **Tagline**: Searchable combobox input with grouped results and keyboard navigation.
- **Description**: Customizable search combobox with instant filtering, grouped categories, keyboard navigation, and spring-animated dropdown results.
- **Docs URL**: https://boseui.site/components/autocomplete
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/autocomplete.json`
- **Registry Manifest**: https://boseui.site/r/autocomplete.json
- **Key Features**:
  - Real-time filtering across labels, values, descriptions, and categories.
  - Full ArrowUp, ArrowDown, Enter, and Escape keyboard navigation with auto-scroll.
  - Supports grouped option categories, descriptions, and one-click clear.
- **Accessibility**:
  - Implements ARIA combobox, listbox, and option roles with unique aria-controls ID.
  - Supports full keyboard operation without requiring a mouse.
  - Respects prefers-reduced-motion for dropdown open/close transitions.
- **Props**:
  - `options` (AutocompleteOption[], default: DEFAULT_OPTIONS): Array of options with value, label, optional description, icon, and category.
  - `value` (string): Controlled selected option value.
  - `defaultValue` (string, default: ""): Initial selected value when used as an uncontrolled component.
  - `onChange` ((value: string, option: AutocompleteOption | null) => void): Callback triggered whenever the user selects or clears an option.
  - `label` (string): Optional visible label rendered above the combobox.
  - `placeholder` (string, default: "Search options..."): Placeholder text shown when no option is selected.
  - `emptyMessage` (string, default: "No matching results found."): Message displayed when no options match the search query.
  - `clearable` (boolean, default: true): Displays a clear button when an option is selected.
  - `disabled` (boolean, default: false): Disables user interaction with the combobox.
  - `className` (string): Additional CSS classes applied to the outer wrapper.
- **Usage Example**:
```tsx
import { Autocomplete } from "@/components/ui/autocomplete";

const FRAMEWORKS = [
  { value: "nextjs", label: "Next.js", category: "Fullstack", description: "App Router & Server Actions" },
  { value: "remix", label: "Remix", category: "Fullstack", description: "Web standards router" },
  { value: "vite", label: "Vite", category: "Build Tools", description: "Next-gen frontend tooling" },
];

export function Example() {
  return (
    <Autocomplete
      label="Framework"
      placeholder="Select a framework..."
      options={FRAMEWORKS}
      defaultValue="nextjs"
    />
  );
}
```

---

### Autoplay Story Carousel (`AutoplayStoryCarousel`)
- **Slug**: `autoplay-story-carousel`
- **Category**: Cards
- **Tagline**: Apple News-inspired story carousel with pill progress bars and hold-to-pause.
- **Description**: Apple News and Instagram-style interactive story carousel featuring segmented pill progress bars, directional half-card tap navigation, hover-to-pause gestures, and fluid slide transitions.
- **Docs URL**: https://boseui.site/components/autoplay-story-carousel
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/autoplay-story-carousel.json`
- **Registry Manifest**: https://boseui.site/r/autoplay-story-carousel.json
- **Key Features**:
  - Segmented pill progress bars that fill sequentially across autoplay intervals.
  - Half-card tap navigation: left 40% returns to previous slide, right 60% advances.
  - Pointer hold / hover-to-pause mechanism preserving elapsed progress accurately.
  - Direction-aware Framer Motion spring slide transitions.
  - Simulated audio sound toggle and customizable duration presets.
- **Accessibility**:
  - Includes play/pause toggle button for users who need non-moving content.
  - Aria indicators and keyboard operable slide progression dots.
  - Respects reduced motion preferences by switching to instant crossfade transitions.
- **Props**:
  - `slides` (StorySlide[]): Array of story slide objects containing titles, badges, and metrics.
  - `duration` (number, default: 5000): Display duration per story slide in milliseconds.
  - `defaultIndex` (number, default: 0): Initial story slide index.
  - `autoPlay` (boolean, default: true): Whether the carousel automatically progresses through stories.
  - `onSlideChange` ((index: number) => void): Callback invoked whenever the active slide index updates.
  - `className` (string): Additional Tailwind CSS classes for the root container.
  - `showHeader` (boolean): Whether to render header controls and story metadata chip
  - `showControls` (boolean): Whether to show navigation arrows and pause/play controls
- **Usage Example**:
```tsx
import { AutoplayStoryCarousel } from "@/components/ui/AutoplayStoryCarousel";

export function Example() {
  return (
    <AutoplayStoryCarousel
      duration={5000}
      autoPlay={true}
      onSlideChange={(index) => console.log("Current story:", index)}
    />
  );
}
```

---

### Avatar Stack Presence (`AvatarStackPresence`)
- **Slug**: `avatar-stack-presence`
- **Category**: Overlays
- **Tagline**: Overlapping team avatar stack with live presence dots and rich profile hover cards.
- **Description**: Slack and Figma-style overlapping user avatar stack with live online/idle/offline status indicator dots, +N overflow chip, rich member profile popover cards with timezone and quick ping, and full team drawer directory.
- **Docs URL**: https://boseui.site/components/avatar-stack-presence
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/avatar-stack-presence.json`
- **Registry Manifest**: https://boseui.site/r/avatar-stack-presence.json
- **Key Features**:
  - Overlapping negative-space avatar ring styling with crisp border knockouts.
  - Real-time presence status dots with emerald pulsing online, amber idle, and slate offline indicators.
  - Dynamic +N overflow chip with expandable full-directory modal.
  - Rich profile card popovers with timezones, role titles, recent activities, and interactive pings.
  - Quick status filter buttons and adjustable visible avatar capacity limits.
- **Accessibility**:
  - Comprehensive aria-labels for each avatar announcing member name and current presence state.
  - Full keyboard navigation into the hover card and team directory modal.
  - Accessible focus rings and WCAG AAA compliance for avatar text contrast.
- **Props**:
  - `members` (TeamMember[]): Array of team member objects with name, role, initials, status, and timezone.
  - `maxVisible` (number, default: 5): Maximum number of individual avatar rings displayed before grouping into +N.
  - `size` ("sm" | "md" | "lg", default: "md"): Diameter scaling preset for the avatar stack.
  - `className` (string): Additional CSS classes to apply to the root container.
- **Usage Example**:
```tsx
import { AvatarStackPresence } from "@/components/ui/AvatarStackPresence";

export function Example() {
  return (
    <AvatarStackPresence
      maxVisible={4}
      size="md"
    />
  );
}
```

---

### Black Hole (`BlackHole`)
- **Slug**: `black-hole`
- **Category**: Backgrounds
- **Tagline**: WebGL relativistic accretion disk with geodesic light bending.
- **Description**: Interstellar-inspired gravitational lensing black hole background powered by a WebGL relativistic ray-marching shader with a pitch-black event horizon, incandescent photon ring, bent upper and lower lensing arcs, and Doppler-beamed accretion plasma.
- **Docs URL**: https://boseui.site/components/black-hole
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/black-hole.json`
- **Registry Manifest**: https://boseui.site/r/black-hole.json
- **Key Features**:
  - Real-time WebGL geodesic light-bending ray marcher around a Schwarzschild/Kerr event horizon
  - True 3D tilted accretion disk with multi-octave FBM spiraling plasma filaments and bent upper/lower gravitational lensing arches
  - Relativistic Doppler beaming that shifts the approaching disk toward incandescent white-gold and the receding side toward deep amber-crimson
  - Gravitationally lensed background starfield and razor-sharp incandescent photon sphere ring
  - Interactive telemetry HUD with live presets (Gargantua, Quasar Jet, Crimson Singularity) when children are omitted
- **Accessibility**:
  - Decorative WebGL canvas is marked aria-hidden so screen readers focus on foreground content
  - High-contrast translucent HUD controls with keyboard-focusable buttons and range sliders
- **Props**:
  - `size` (number, default: 95): Radius scale of the central event horizon void in pixels.
  - `diskColor` (string, default: "#FF7A18"): Primary hex color of the glowing accretion disk and lensing halo.
  - `spinSpeed` (number, default: 1.2): Angular velocity and relativistic Doppler beaming multiplier for orbiting matter.
  - `particleCount` (number, default: 260): Filament resolution scale in the relativistic accretion disk.
  - `pull` (number, default: 0.35): Radial inward gravitational pull and spacetime curvature strength.
  - `lensing` (boolean, default: true): Whether to enable full relativistic gravitational light bending.
  - `children` (React.ReactNode): Optional foreground content rendered above the black hole canvas.
  - `className` (string): Additional CSS classes applied to the root container.
- **Usage Example**:
```tsx
import { BlackHole } from "@/components/ui/BlackHole";

export function BlackHoleDemo() {
  return (
    <BlackHole
      size={95}
      diskColor="#FF7A18"
      spinSpeed={1.2}
      particleCount={260}
      pull={0.35}
      lensing
    />
  );
}
```

---

### Carousel with Dots (`CarouselWithDots`)
- **Slug**: `carousel-with-dots`
- **Category**: Cards
- **Tagline**: Swipeable card carousel with pill dot indicator and arrow controls.
- **Description**: Horizontally snapping card carousel with swipe gesture physics, a pill-shaped morphing dot indicator, keyboard arrow support, and circular navigation buttons.
- **Docs URL**: https://boseui.site/components/carousel-with-dots
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/carousel-with-dots.json`
- **Registry Manifest**: https://boseui.site/r/carousel-with-dots.json
- **Key Features**:
  - Horizontal drag and swipe gestures with velocity-sensitive slide snapping.
  - Pill-shaped frosted page indicator where the active dot smoothly expands into a capsule.
  - Circular previous/next arrow controls plus optional autoPlay timer.
- **Accessibility**:
  - Uses `role='region'` and `aria-roledescription='carousel'` with numbered slide labels.
  - Supports `ArrowLeft` and `ArrowRight` keyboard navigation when focused.
  - Respects `prefers-reduced-motion` for instant slide changes.
- **Props**:
  - `slides` (CarouselSlide[]): Array of slide items ({ id, eyebrow, title, description, stat }).
  - `defaultIndex` (number, default: 0): Initial active slide index (0-based).
  - `autoPlay` (boolean, default: false): Automatically advances slides on a timer when true.
  - `interval` (number, default: 4500): Auto-play rotation interval in milliseconds.
  - `onSlideChange` ((index: number) => void): Callback fired whenever the active slide changes.
  - `className` (string): Additional Tailwind CSS classes for the carousel root.
- **Usage Example**:
```tsx
import { CarouselWithDots } from "@/components/ui/carousel-with-dots";

export function Example() {
  return (
    <CarouselWithDots
      onSlideChange={(index) => console.log("Active slide:", index)}
    />
  );
}
```

---

### Category Filter Scroller (`CategoryFilterScroller`)
- **Slug**: `category-filter-scroller`
- **Category**: Navigation
- **Tagline**: Airbnb-inspired horizontal category filter bar with edge fade masks.
- **Description**: Airbnb-style horizontal scrolling category filter bar with edge gradient fade masks, spring active underline indicator, and tactile left/right chevron navigation.
- **Docs URL**: https://boseui.site/components/category-filter-scroller
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/category-filter-scroller.json`
- **Registry Manifest**: https://boseui.site/r/category-filter-scroller.json
- **Key Features**:
  - Horizontally scrolling row of curated category icons with smooth momentum and boundary detection.
  - Dynamic left and right gradient edge masks that appear only when additional scrollable content exists.
  - Spring-animated active underline pill that glides across categories using layoutId.
  - Left and right chevron navigation buttons with spring hover physics.
  - Responsive card showcase demonstrating reactive content switching on category change.
- **Accessibility**:
  - Buttons have distinct accessible labels for Left and Right scroll actions.
  - Selected category communicates active status visually and semantically.
  - Smooth scroll and spring transitions honor reduced motion preferences.
- **Props**:
  - `defaultCategory` (string, default: "trending"): ID of the category selected on mount.
  - `onSelectCategory` ((category: CategoryItem) => void): Callback triggered when a user selects a new category.
  - `className` (string): Optional custom CSS class names for the container wrapper.
- **Usage Example**:
```tsx
import { CategoryFilterScroller } from "@/components/ui/category-filter-scroller";

export function Example() {
  return (
    <CategoryFilterScroller
      defaultCategory="beachfront"
      onSelectCategory={(cat) => console.log("Category selected:", cat.label)}
    />
  );
}
```

---

### Cipher Scramble Text (`CipherScrambleText`)
- **Slug**: `cipher-scramble-text`
- **Category**: Text
- **Tagline**: Cryptographic glyph permutation wave with screen-reader safety.
- **Description**: Cryptographic matrix text decoder that permutes characters through a high-frequency glyph wave on pointer hover, focus, or click.
- **Docs URL**: https://boseui.site/components/cipher-scramble-text
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/cipher-scramble-text.json`
- **Registry Manifest**: https://boseui.site/r/cipher-scramble-text.json
- **Key Features**:
  - Progressive left-to-right cryptographic character lock-in with customizable glyph pool and frame cadence.
  - Triggers seamlessly on pointer hover, keyboard focus, or tactile click.
  - Pairs an sr-only canonical string with an aria-hidden visual stream so screen readers never read scrambled noise.
- **Accessibility**:
  - Exposes the decoded canonical string inside an sr-only node while marking the permuting glyph stream aria-hidden='true'.
  - Fully keyboard-triggerable via Tab focus or Enter/Space activation.
  - Bypasses character scrambling immediately when prefers-reduced-motion is enabled.
- **Props**:
  - `text` (string, default: "ZERO-DEPENDENCY KINETIC PRIMITIVES"): Target decoded text string.
  - `charset` (string, default: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+<>?"): Pool of cipher characters sampled during scramble frames.
  - `frameInterval` (number, default: 28): Duration of each scramble frame tick in milliseconds.
  - `cyclesPerChar` (number, default: 2): Number of scramble ticks per character before locking into place.
- **Usage Example**:
```tsx
import { CipherScrambleText } from "@/components/ui/cipher-scramble-text";

export function Example() {
  return (
    <CipherScrambleText
      text="ZERO-DEPENDENCY KINETIC PRIMITIVES"
      frameInterval={28}
      cyclesPerChar={2}
    />
  );
}
```

---

### Clouds Drift (`CloudsDrift`)
- **Slug**: `clouds-drift`
- **Category**: Backgrounds
- **Tagline**: Multi-layer CSS cloud parallax with day, sunset, and night skies.
- **Description**: Seamless multi-layer CSS cloud parallax background where far, mid, and near cloud formations drift horizontally at independent speeds.
- **Docs URL**: https://boseui.site/components/clouds-drift
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/clouds-drift.json`
- **Registry Manifest**: https://boseui.site/r/clouds-drift.json
- **Key Features**:
  - Three depth planes (far, mid, near) moving on independent `translate3d(-50%, 0, 0)` infinite loops.
  - Supports `day`, `sunset`, and `night` atmospheric color palettes.
  - Pure CSS hardware-accelerated transforms with zero JavaScript animation loop.
- **Accessibility**:
  - Marks decorative cloud layers with `aria-hidden='true'`.
  - Interactive sky theme switcher buttons support keyboard focus.
  - Maintains readable foreground contrast across all three sky presets.
- **Props**:
  - `speed` (number, default: 1): Horizontal drift speed multiplier.
  - `opacity` (number, default: 0.85): Overall cloud opacity multiplier (0.2 to 1).
  - `variant` ("day" | "sunset" | "night", default: "day"): Atmospheric sky palette.
  - `children` (React.ReactNode): Optional foreground content rendered above the clouds.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { CloudsDrift } from "@/components/ui/clouds-drift";

export function Example() {
  return (
    <CloudsDrift
      variant="day"
      speed={1}
      opacity={0.85}
    />
  );
}
```

---

### Color Finish Picker (`ColorFinishPicker`)
- **Slug**: `color-finish-picker`
- **Category**: Inputs
- **Tagline**: Apple-inspired titanium finish selector with concentric rings and ambient tinting.
- **Description**: Apple-style device finish selector featuring concentric selection rings, synchronized ambient page background tinting, crossfading vector hardware graphics, and technical metallurgy specifications.
- **Docs URL**: https://boseui.site/components/color-finish-picker
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/color-finish-picker.json`
- **Registry Manifest**: https://boseui.site/r/color-finish-picker.json
- **Key Features**:
  - Concentric selection rings with smooth Apple-style scale and offset animations.
  - Dynamic ambient page background tinting synchronized with selected finish hex.
  - Smooth crossfading vector hardware preview across multiple view angles (rear, profile, camera).
  - Comprehensive technical metallurgy specs panel with alloy, coating, and optical reflectance metrics.
  - Fully keyboard accessible with ARIA selection attributes.
- **Accessibility**:
  - Each color swatch acts as an accessible radio/button element with descriptive `aria-label`.
  - Keyboard focus indicators preserve high contrast regardless of dark/light theme.
  - Respects reduced motion preferences for smooth crossfade transitions.
- **Props**:
  - `finishes` (ColorFinish[]): Array of finish definitions including hex colors, ambient rgba, and metallurgy specs.
  - `defaultFinishId` (string, default: "natural-titanium"): Identifier of the finish selected by default on mount.
  - `onChange` ((finish: ColorFinish) => void): Callback invoked whenever user selects a new color finish.
  - `className` (string): Additional Tailwind CSS classes applied to the root container.
  - `showHeader` (boolean): Whether to display the header title and titanium finish spec label
- **Usage Example**:
```tsx
import { ColorFinishPicker } from "@/components/ui/ColorFinishPicker";

export function Example() {
  return (
    <ColorFinishPicker
      defaultFinishId="natural-titanium"
      onChange={(finish) => console.log("Selected finish:", finish.name)}
    />
  );
}
```

---

### Command Menu (`CommandMenu`)
- **Slug**: `command-menu`
- **Category**: Navigation
- **Tagline**: Cmd+K command palette with grouped actions and instant search.
- **Description**: Spotlight-style Cmd+K command palette portaled above the viewport with grouped actions, live keyword filtering, and full keyboard navigation.
- **Docs URL**: https://boseui.site/components/command-menu
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/command-menu.json`
- **Registry Manifest**: https://boseui.site/r/command-menu.json
- **Key Features**:
  - Portaled to document.body at z-[9999] so it always renders above navbars and page layouts.
  - Global Cmd+K / Ctrl+K shortcut listener plus customizable search trigger button.
  - Grouped command sections with keyword search, ArrowUp/ArrowDown navigation, and auto-scroll.
- **Accessibility**:
  - Renders with role='dialog' and aria-modal='true' with automatic search input focus.
  - Supports full keyboard operation (ArrowUp, ArrowDown, Enter, Escape).
  - Locks background page scroll while open and respects prefers-reduced-motion.
- **Props**:
  - `items` (CommandItem[]): Array of command items ({ id, label, group, shortcut, keywords, icon, onSelect }).
  - `placeholder` (string, default: "Type a command or search..."): Placeholder text inside the command search input.
  - `triggerLabel` (string, default: "Search commands..."): Label displayed inside the trigger button.
  - `enableGlobalShortcut` (boolean, default: true): Listens for global Cmd+K / Ctrl+K keyboard shortcut when true.
  - `open` (boolean): Controlled open state for the command menu dialog.
  - `onOpenChange` ((open: boolean) => void): Callback fired when the command menu opens or closes.
  - `onSelect` ((item: CommandItem) => void): Callback fired when a command item is executed.
  - `emptyMessage` (string, default: "No matching commands found."): Message displayed when no commands match the search query.
  - `className` (string): Additional Tailwind CSS classes for the trigger wrapper.
- **Usage Example**:
```tsx
import { CommandMenu } from "@/components/ui/command-menu";

export function Example() {
  return (
    <CommandMenu
      triggerLabel="Quick commands..."
      onSelect={(item) => console.log("Executed:", item.label)}
    />
  );
}
```

---

### Constellation Map (`ConstellationMap`)
- **Slug**: `constellation-map`
- **Category**: Backgrounds
- **Tagline**: Precision J2000.0 celestial star chart with animated constellation vectors.
- **Description**: Astronomical SVG star chart plotting authentic geometries for Orion, Cassiopeia, Ursa Major, Cygnus, and Lyra over a celestial Right Ascension and Declination coordinate grid with animated stroke-dashoffset line tracing.
- **Docs URL**: https://boseui.site/components/constellation-map
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/constellation-map.json`
- **Registry Manifest**: https://boseui.site/r/constellation-map.json
- **Key Features**:
  - Authentic stellar coordinates and Bayer designations for Orion, Cassiopeia, Ursa Major, Cygnus, and Lyra.
  - Staggered SVG pathLength vector animation over a toggleable Right Ascension / Declination grid.
  - Interactive star nodes displaying apparent visual magnitude and Bayer designation telemetry on hover.
- **Accessibility**:
  - Semantic SVG chart includes an aria-label while background field stars are marked aria-hidden='true'.
  - Interactive HUD toggles support full keyboard navigation and clear active state indicators.
- **Props**:
  - `lineColor` (string, default: "#38BDF8"): Stroke color for constellation edges and celestial grid lines.
  - `starColor` (string, default: "#F8FAFC"): Fill color for primary constellation star nodes and field stars.
  - `drawSpeed` (number, default: 1.0): Speed multiplier for the constellation line-drawing animation.
  - `showGrid` (boolean, default: true): Renders Right Ascension meridians, Declination parallels, and the ecliptic arc.
  - `showLabels` (boolean, default: true): Displays constellation headers, Bayer designations, and star names.
  - `children` (React.ReactNode): Optional foreground overlay content.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { ConstellationMap } from "@/components/ui/ConstellationMap";

export function Example() {
  return (
    <ConstellationMap
      lineColor="#38BDF8"
      starColor="#F8FAFC"
      drawSpeed={1.2}
      showGrid
      showLabels
    />
  );
}
```

---

### Constellation Mesh Field (`ConstellationMeshField`)
- **Slug**: `constellation-mesh-field`
- **Category**: Backgrounds
- **Tagline**: Interactive SVG constellation graph with pointer proximity edges.
- **Description**: Interactive SVG vertex constellation surface that dynamically tethers proximity edges to the pointer with spring-scaled nodes.
- **Docs URL**: https://boseui.site/components/constellation-mesh-field
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/constellation-mesh-field.json`
- **Registry Manifest**: https://boseui.site/r/constellation-mesh-field.json
- **Key Features**:
  - Crisp vector SVG constellation lattice that scales cleanly to any container resolution.
  - Real-time Euclidean distance culling that draws opacity-graded edges between the pointer and nearby vertices.
  - Spring-inflated vertex radii when captured within the pointer's connection radius.
- **Accessibility**:
  - Decorative SVG graph layer is marked aria-hidden='true'.
  - Disables dynamic edge tethering when prefers-reduced-motion is enabled.
  - Maintains high foreground text contrast inside a translucent HUD card.
- **Props**:
  - `connectRadius` (number, default: 130): Maximum Euclidean distance in viewBox units to connect pointer edges.
  - `children` (React.ReactNode): Optional foreground content rendered above the constellation mesh.
- **Usage Example**:
```tsx
import { ConstellationMeshField } from "@/components/ui/constellation-mesh-field";

export function Example() {
  return (
    <ConstellationMeshField connectRadius={130} />
  );
}
```

---

### Copy Code Block (`CopyCodeBlock`)
- **Slug**: `copy-code-block`
- **Category**: Cards
- **Tagline**: Multi-tab CLI command and code block with instant copy feedback.
- **Description**: Multi-tab CLI and code snippet block with sliding spring package-manager tabs (npx, pnpm, bun, yarn), optional line numbers, and one-click clipboard copy feedback.
- **Docs URL**: https://boseui.site/components/copy-code-block
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/copy-code-block.json`
- **Registry Manifest**: https://boseui.site/r/copy-code-block.json
- **Key Features**:
  - Spring-animated tab pill indicator for switching between npx, pnpm, bun, and yarn or multiple files.
  - One-click clipboard copy button with animated Check/Copy icon transition.
  - Supports single-line CLI prompts ($) as well as multi-line code blocks with line numbers.
- **Accessibility**:
  - Uses native button elements with focus-visible rings for tab switching and clipboard copy.
  - Provides explicit aria-label on the clipboard button.
  - Respects prefers-reduced-motion for tab indicator transitions.
- **Props**:
  - `tabs` (CodeSnippetTab[]): Array of tabs ({ id, label, code, language }) displayed in the header bar.
  - `code` (string): Optional single code string when multiple tabs are not needed.
  - `title` (string, default: "Terminal"): Header label used when a single `code` prop is provided.
  - `showLineNumbers` (boolean, default: false): Displays line numbers next to multi-line code snippets.
  - `showPromptPrefix` (boolean, default: true): Displays a `$` terminal prefix before single-line commands.
  - `onCopy` ((copiedText: string) => void): Callback fired when the active snippet is copied.
  - `className` (string): Additional Tailwind CSS classes for the outer card.
- **Usage Example**:
```tsx
import { CopyCodeBlock } from "@/components/ui/copy-code-block";

export function Example() {
  return (
    <CopyCodeBlock
      tabs={[
        { id: "npx", label: "npx", code: "npx shadcn@latest add button" },
        { id: "pnpm", label: "pnpm", code: "pnpm dlx shadcn@latest add button" },
        { id: "bun", label: "bun", code: "bunx shadcn@latest add button" },
      ]}
    />
  );
}
```

---

### Cursor Follower (`CursorFollower`)
- **Slug**: `cursor-follower`
- **Category**: Motion
- **Tagline**: Coupled dual-spring pointer follower with declarative HUD labels.
- **Description**: Dual-spring custom pointer stage with a high-stiffness inner core and morphing outer ring that expands into contextual HUD pills.
- **Docs URL**: https://boseui.site/components/cursor-follower
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/cursor-follower.json`
- **Registry Manifest**: https://boseui.site/r/cursor-follower.json
- **Key Features**:
  - High-stiffness inner core dot paired with a damped trailing outer ring.
  - Declarative contextual label morphing via the data-cursor-label HTML attribute.
  - Built-in live X/Y coordinate telemetry HUD in the stage corner.
- **Accessibility**:
  - Automatically restores native OS pointer and hides custom follower rings when prefers-reduced-motion is enabled.
  - Follower layers use pointer-events-none so underlying buttons and links remain 100% clickable.
  - Decorative follower elements are hidden from screen readers via aria-hidden='true'.
- **Props**:
  - `accentColor` (string, default: undefined): Optional hex or CSS color override applied to the inner core dot and trailing ring border.
  - `ringStiffness` (number, default: 260): Spring stiffness of the trailing outer ring.
  - `ringDamping` (number, default: 22): Spring damping of the trailing outer ring.
  - `ringSize` (number, default: 34): Idle diameter in pixels of the outer ring.
  - `showCoordinates` (boolean, default: true): Displays a live X/Y coordinate telemetry badge in the top-right corner.
- **Usage Example**:
```tsx
import { CursorFollower } from "@/components/ui/cursor-follower";

export function Example() {
  return (
    <CursorFollower className="p-8">
      <div data-cursor-label="OPEN PROJECT ↗" className="rounded-xl border p-6">
        Hover me to morph the trailing cursor ring into a HUD pill.
      </div>
    </CursorFollower>
  );
}
```

---

### Deployment Timeline (`DeploymentTimeline`)
- **Slug**: `deployment-timeline`
- **Category**: Motion
- **Tagline**: Vercel-style deployment pipeline stepper with live streaming build console.
- **Description**: Vercel-inspired deployment pipeline stepper with multi-phase statuses, elapsed timers, commit SHA metadata, and an interactive streaming build stdout log console.
- **Docs URL**: https://boseui.site/components/deployment-timeline
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/deployment-timeline.json`
- **Registry Manifest**: https://boseui.site/r/deployment-timeline.json
- **Key Features**:
  - Four-phase deployment workflow: Queued, Building, Assigning Domains, and Production Ready.
  - Animated spinners, real-time elapsed timer clocks, and automated state transitions.
  - Live simulated stdout log terminal with ANSI-styled build step outputs and auto-scroll.
  - Interactive simulation toolbar to restart deployments, simulate failures, copy commit SHAs, and toggle log streams.
- **Accessibility**:
  - Pipeline status steps provide aria-current and status badges with high contrast text.
  - Live terminal console exposes an accessible aria-live region for screen reader progress announcements.
  - Log viewer is scrollable and supports standard keyboard navigation.
- **Props**:
  - `commitSha` (string, default: "a89e4c1"): Git commit hash associated with the pipeline run.
  - `branch` (string, default: "main"): Repository branch triggered for continuous deployment.
  - `autoPlay` (boolean, default: true): Whether the deployment simulation advances through stages automatically.
  - `className` (string): Optional custom classes applied to the root container.
- **Usage Example**:
```tsx
import { DeploymentTimeline } from "@/components/ui/DeploymentTimeline";

export function Example() {
  return (
    <DeploymentTimeline
      commitSha="a89e4c1"
      branch="main"
      autoPlay={true}
    />
  );
}
```

---

### Diff Viewer (`DiffViewer`)
- **Slug**: `diff-viewer`
- **Category**: Cards
- **Tagline**: GitHub/GitLab-style code diff viewer with unified and split view modes.
- **Description**: GitHub and GitLab-inspired code difference viewer featuring side-by-side split and unified inspection modes, line gutter numbering, collapsible unchanged regions, and copy diff clipboard actions.
- **Docs URL**: https://boseui.site/components/diff-viewer
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/diff-viewer.json`
- **Registry Manifest**: https://boseui.site/r/diff-viewer.json
- **Key Features**:
  - Side-by-side split and unified single-column view layout modes with instant toggle.
  - Dual line gutter numbering, deletion red gutters (-), and addition green gutters (+).
  - Collapsible unchanged code fold markers with expandable hidden line counts.
  - Multiple diff file presets (TypeScript Auth, Rust Engine, and Prisma Schema).
  - One-click copy raw unified git patch or patched final source code.
- **Accessibility**:
  - Line gutters include descriptive ARIA attributes and screen-reader accessible deletion/addition prefixes.
  - Supports full keyboard navigation across fold toggle controls and diff panels.
  - High-contrast color tokens adhering to WCAG AAA contrast for deletion and addition highlights.
- **Props**:
  - `initialViewMode` ("split" | "unified", default: "unified"): Default display layout presentation mode.
  - `fileName` (string, default: "src/auth/session.ts"): Filename and file path header for the active diff view.
  - `allowCopyDiff` (boolean, default: true): Whether the copy raw diff button is displayed in the header toolbar.
  - `className` (string): Optional custom classes applied to the root container.
- **Usage Example**:
```tsx
import { DiffViewer } from "@/components/ui/DiffViewer";

export function Example() {
  return (
    <DiffViewer
      initialViewMode="split"
      fileName="src/auth/session.ts"
    />
  );
}
```

---

### Digital Radar (`DigitalRadar`)
- **Slug**: `digital-radar`
- **Category**: Backgrounds
- **Tagline**: Tactical polar radar sweep with phosphor target persistence.
- **Description**: Tactical polar radar sweep background featuring concentric nautical range rings, degree azimuth ticks, a rotating phosphor conic beam, and target blips that illuminate with decaying afterglow on sweep contact.
- **Docs URL**: https://boseui.site/components/digital-radar
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/digital-radar.json`
- **Registry Manifest**: https://boseui.site/r/digital-radar.json
- **Key Features**:
  - Multi-slice phosphor conic sweep beam that triggers expanding target pings upon angular intersection.
  - Precision azimuth degree ring, dashed diagonal crosshairs, and nautical mile range markers.
  - Live interactive HUD controls for target count, telemetry callouts, phosphor color, and sweep velocity.
- **Accessibility**:
  - Marks the tactical radar <canvas> with aria-hidden='true' to keep screen reader navigation focused on semantic content.
  - All interactive HUD controls include keyboard focus styles and descriptive accessible labels.
- **Props**:
  - `sweepSpeed` (number, default: 1.0): Angular velocity multiplier for the rotating radar beam.
  - `blipCount` (number, default: 8): Number of tracked target contacts distributed across the polar grid.
  - `color` (string, default: "#10B981"): Primary radar phosphor color in hex format.
  - `rangeRings` (number, default: 4): Number of concentric range rings rendered from the radar origin.
  - `showTelemetry` (boolean, default: true): Displays flight-level callouts, target IDs, and compass bearings.
  - `children` (React.ReactNode): Optional foreground UI rendered above the radar canvas.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { DigitalRadar } from "@/components/ui/DigitalRadar";

export function Example() {
  return (
    <DigitalRadar
      color="#10B981"
      sweepSpeed={1.0}
      blipCount={8}
      rangeRings={4}
      showTelemetry
    />
  );
}
```

---

### macOS Dock Magnification (`DockMagnification`)
- **Slug**: `dock-magnification`
- **Category**: Navigation
- **Tagline**: Fluid macOS dock magnification with spring physics and launch bounce.
- **Description**: macOS-inspired dock magnification bar with continuous Gaussian/cosine pointer falloff, spring physics scaling, click-to-bounce launch animations, floating tooltip labels, and running indicator dots.
- **Docs URL**: https://boseui.site/components/dock-magnification
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/dock-magnification.json`
- **Registry Manifest**: https://boseui.site/r/dock-magnification.json
- **Key Features**:
  - Continuous Gaussian/cosine pointer falloff calculating dynamic icon sizing smoothly in real-time.
  - Spring-damped physics eliminating jarring jumps during rapid pointer movement.
  - Click-to-bounce keyframe oscillation simulating macOS application launch feedback.
  - Frosted backdrop glass container with specular reflections and dark/light mode elegance.
  - Customizable magnification factor, falloff radius, and app running indicator dots.
- **Accessibility**:
  - Keyboard accessible with tab navigation and focus indicators on dock apps.
  - Clear ARIA labels for each application icon with tooltips for screen readers.
  - Respects reduced motion settings for bounce oscillations and scale effects.
- **Props**:
  - `items` (DockAppItem[]): Array of dock application objects with icons, colors, running states, and badges.
  - `baseSize` (number, default: 48): Default unmagnified icon size in pixels.
  - `magnification` (number, default: 1.65): Peak magnification multiplier when cursor directly hovers an item.
  - `distance` (number, default: 140): Gaussian falloff influence radius in pixels on either side of pointer.
  - `onItemClick` ((item: DockAppItem) => void): Callback triggered when a dock icon is clicked.
  - `className` (string): Additional Tailwind CSS classes applied to root container.
  - `embedded` (boolean): Whether the dock renders embedded inside container rather than fixed to viewport
- **Usage Example**:
```tsx
import { DockMagnification } from "@/components/ui/DockMagnification";

export function Example() {
  return (
    <DockMagnification
      magnification={1.7}
      distance={150}
      onItemClick={(app) => console.log("Launched:", app.name)}
    />
  );
}
```

---

### Drawer (`Drawer`)
- **Slug**: `drawer`
- **Category**: Overlays
- **Tagline**: Multi-directional slide-over panel and draggable bottom sheet.
- **Description**: Slide-over panel and bottom sheet drawer with 4-direction support, drag-to-dismiss gestures, top-level portal rendering, and Escape dismissal.
- **Docs URL**: https://boseui.site/components/drawer
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/drawer.json`
- **Registry Manifest**: https://boseui.site/r/drawer.json
- **Key Features**:
  - Renders in a top-level document.body portal (z-9999) above all navbars and containers.
  - Slides from right, left, bottom, or top with directional drag-to-dismiss gestures.
  - Works both controlled (open/onOpenChange) and uncontrolled with custom triggers.
- **Accessibility**:
  - Renders with role='dialog' and aria-modal='true' and locks background scroll while open.
  - Closes immediately when pressing the Escape key or clicking the backdrop.
  - Collapses slide motion to a subtle fade when prefers-reduced-motion is enabled.
- **Props**:
  - `side` ("right" | "left" | "bottom" | "top", default: "right"): Screen edge from which the drawer slides in.
  - `open` (boolean): Controlled open state.
  - `defaultOpen` (boolean, default: false): Initial open state when used uncontrolled.
  - `onOpenChange` ((open: boolean) => void): Callback fired when the drawer opens or closes.
  - `title` (string, default: "Drawer Panel"): Heading title displayed in the drawer header.
  - `description` (string): Optional helper subtitle below the drawer heading.
  - `triggerLabel` (string, default: "Open Drawer"): Label for the default trigger button when no custom trigger is passed.
  - `trigger` (React.ReactNode): Custom trigger element that opens the drawer on click.
  - `children` (React.ReactNode): Custom content rendered inside the scrollable drawer body.
  - `footer` (React.ReactNode): Custom footer actions rendered at the bottom of the drawer.
  - `className` (string): Additional CSS classes applied to the drawer panel.
- **Usage Example**:
```tsx
import { Drawer } from "@/components/ui/drawer";

export function Example() {
  return (
    <div className="flex gap-3">
      <Drawer
        side="right"
        title="Project Settings"
        description="Configure deployment environment variables."
        triggerLabel="Open Right Drawer"
      />
      <Drawer
        side="bottom"
        title="Quick Actions"
        description="Swipe down or press Escape to dismiss."
        triggerLabel="Open Bottom Sheet"
      />
    </div>
  );
}
```

---

### Dynamic Island Toast (`DynamicIslandToast`)
- **Slug**: `dynamic-island-toast`
- **Category**: Overlays
- **Tagline**: Three-stage morphing status capsule with spring layout projection.
- **Description**: Morphing top-edge status capsule that expands smoothly between compact badge, live telemetry pill, and actionable notification drawer.
- **Docs URL**: https://boseui.site/components/dynamic-island-toast
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/dynamic-island-toast.json`
- **Registry Manifest**: https://boseui.site/r/dynamic-island-toast.json
- **Key Features**:
  - Three-state layout projection (compact -> telemetry -> expanded) driven by Hooke's Law spring geometry.
  - Click directly on the capsule or use external state triggers to morph dimensions and border radii seamlessly.
  - Includes interactive collapse and dismiss actions inside the expanded notification card.
- **Accessibility**:
  - Uses role='status' and aria-live='polite' to announce live notification state transitions.
  - All interactive stages and collapse buttons are keyboard-focusable via Tab and Enter/Space.
  - Collapses transition duration to near-zero when prefers-reduced-motion is enabled.
- **Props**:
  - `defaultMode` ("compact" | "telemetry" | "expanded", default: "compact"): Initial visual state of the morphing status island.
  - `title` (string, default: "Registry Sync Active"): Primary notification heading displayed in telemetry and expanded modes.
  - `subtitle` (string, default: "12 shadcn v2 manifests compiled in 42ms"): Detailed status description displayed in expanded mode.
  - `stiffness` (number, default: 340): Hooke's Law spring stiffness for capsule dimension morphing.
  - `damping` (number, default: 25): Spring damping coefficient controlling capsule oscillation decay.
- **Usage Example**:
```tsx
import { DynamicIslandToast } from "@/components/ui/dynamic-island-toast";

export function Example() {
  return (
    <DynamicIslandToast
      defaultMode="compact"
      title="Registry Sync Active"
      subtitle="12 shadcn v2 manifests compiled in 42ms"
    />
  );
}
```

---

### Elastic Dock (`ElasticDock`)
- **Slug**: `elastic-dock`
- **Category**: Navigation
- **Tagline**: Continuous Euclidean pointer falloff and spring-tethered magnification.
- **Description**: Physics-coupled magnification dock with continuous Euclidean pointer falloff, spring-tethered icon scaling, and roving keyboard navigation.
- **Docs URL**: https://boseui.site/components/elastic-dock
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/elastic-dock.json`
- **Registry Manifest**: https://boseui.site/r/elastic-dock.json
- **Key Features**:
  - Continuous Euclidean pointer distance interpolation with zero React re-renders during mouse movement.
  - Shared layoutId active indicator dot and floating HUD tooltips.
  - Full WAI-ARIA toolbar semantics with ArrowLeft, ArrowRight, Home, and End keyboard navigation.
- **Accessibility**:
  - Implements role='toolbar' with roving arrow-key focus management across all dock items.
  - Disables continuous magnification and vertical lift when prefers-reduced-motion is active.
  - Provides aria-label and aria-current='page' state announcements for screen readers.
- **Props**:
  - `items` (ElasticDockItem[]): Array of dock items containing id, label, icon node, optional badge, and click handler.
  - `baseSize` (number, default: 46): Resting icon button width and height in pixels.
  - `magnifiedSize` (number, default: 68): Peak magnified button dimension in pixels at zero pointer distance.
  - `distance` (number, default: 140): Pointer proximity radius in pixels within which neighboring icons scale.
  - `stiffness` (number, default: 320): Hooke's Law spring stiffness coefficient for magnification interpolation.
  - `damping` (number, default: 22): Spring damping coefficient controlling oscillation settling.
  - `defaultActiveId` (string): Identifier of the initially active dock item
  - `onSelect` ((item: ElasticDockItem) => void): Callback fired when a dock icon is selected
- **Usage Example**:
```tsx
import { ElasticDock } from "@/components/ui/elastic-dock";

export function Example() {
  return (
    <div className="flex items-center justify-center py-8">
      <ElasticDock baseSize={46} magnifiedSize={68} distance={140} />
    </div>
  );
}
```

---

### Elastic Snap Sortable (`ElasticSnapSortable`)
- **Slug**: `elastic-snap-sortable`
- **Category**: Motion
- **Tagline**: Spring-projected reorderable list with keyboard arrow sorting.
- **Description**: Reorderable priority queue where list items swap positions with Hooke's Law layout spring projection and full keyboard arrow-key control.
- **Docs URL**: https://boseui.site/components/elastic-snap-sortable
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/elastic-snap-sortable.json`
- **Registry Manifest**: https://boseui.site/r/elastic-snap-sortable.json
- **Key Features**:
  - Automatic FLIP layout projection via Framer Motion layout prop when rows swap positions.
  - Full keyboard reordering using ArrowUp and ArrowDown keys directly on focused list items.
  - Tactile up/down stepper triggers for single-click touch and pointer sorting.
- **Accessibility**:
  - Implements role='list' and role='listitem' with live position announcements in aria-label.
  - Supports ArrowUp and ArrowDown keyboard reordering without requiring pointer drag dexterity.
  - Snaps reordered rows instantaneously when prefers-reduced-motion is enabled.
- **Props**:
  - `items` (SortableTaskItem[]): Initial array of task items containing id, title, and priority tag.
  - `stiffness` (number, default: 380): Spring stiffness coefficient for row swap layout projection.
  - `damping` (number, default: 26): Spring damping coefficient controlling row settle oscillation.
  - `onReorder` ((items: ElasticSortableItem[]) => void): Callback fired when items are reordered via drag-and-drop
- **Usage Example**:
```tsx
import { ElasticSnapSortable } from "@/components/ui/elastic-snap-sortable";

export function Example() {
  return (
    <ElasticSnapSortable stiffness={380} damping={26} />
  );
}
```

---

### Elastic Tag Input (`ElasticTagInput`)
- **Slug**: `elastic-tag-input`
- **Category**: Inputs
- **Tagline**: Tokenized pill input with layout springs and Backspace warning wiggle.
- **Description**: Tokenized multi-tag input with Hooke's Law pill pop-in, FLIP layout reflow, and a two-step Backspace warning wiggle before deletion.
- **Docs URL**: https://boseui.site/components/elastic-tag-input
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/elastic-tag-input.json`
- **Registry Manifest**: https://boseui.site/r/elastic-tag-input.json
- **Key Features**:
  - Automatic FLIP layout reflow across remaining pills when a tag is inserted or removed.
  - Two-press Backspace safety that highlights and wiggles the last tag before deleting it.
  - Normalizes whitespace into clean kebab-case tokens automatically.
- **Accessibility**:
  - Each tag pill includes a dedicated button with aria-label='Remove tag X'.
  - Supports Enter and comma keys to commit new tags and Backspace to remove.
  - Disables scale pop-in and warning wiggle when prefers-reduced-motion is active.
- **Props**:
  - `defaultTags` (string[], default: ["framer-motion", "spring-physics", "shadcn-v2"]): Initial list of keyword tags rendered inside the field.
  - `maxTags` (number, default: 8): Maximum number of tags allowed before locking the input.
  - `stiffness` (number, default: 380): Hooke's Law spring stiffness for tag pop-in and layout reflow.
  - `damping` (number, default: 24): Spring damping coefficient controlling pill settle.
  - `placeholder` (string): Placeholder text displayed in the tag input field
  - `onChange` ((tags: string[]) => void): Callback fired whenever the list of tags updates
- **Usage Example**:
```tsx
import { ElasticTagInput } from "@/components/ui/elastic-tag-input";

export function Example() {
  return (
    <ElasticTagInput
      defaultTags={["framer-motion", "spring-physics", "shadcn-v2"]}
      maxTags={8}
    />
  );
}
```

---

### Elastic Wave Text (`ElasticWaveText`)
- **Slug**: `elastic-wave-text`
- **Category**: Text
- **Tagline**: Transverse sinusoidal wave propagation across headline glyphs.
- **Description**: Plucked-string kinetic typography that propagates a damped transverse wave across every character on hover or click.
- **Docs URL**: https://boseui.site/components/elastic-wave-text
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/elastic-wave-text.json`
- **Registry Manifest**: https://boseui.site/r/elastic-wave-text.json
- **Key Features**:
  - Phase-delayed vertical oscillation that ripples sequentially from the first glyph to the last.
  - Secondary harmonic rebound (-0.45x crest) before settling at baseline.
  - Screen-reader safe sr-only canonical string paired with aria-hidden visual glyphs.
- **Accessibility**:
  - Exposes a single uninterrupted sr-only string for assistive technologies.
  - Operable as a focusable button via Enter or Space keys.
  - Suppresses transverse wave displacement when prefers-reduced-motion is active.
- **Props**:
  - `text` (string, default: "Harmonic Transverse Wave"): Headline string rendered along the transverse wave.
  - `amplitude` (number, default: -14): Peak vertical wave crest displacement in pixels.
  - `stiffness` (number, default: 420): Spring stiffness coefficient for glyph oscillation.
  - `damping` (number, default: 14): Damping coefficient controlling wave crest decay.
- **Usage Example**:
```tsx
import { ElasticWaveText } from "@/components/ui/elastic-wave-text";

export function Example() {
  return (
    <ElasticWaveText text="Harmonic Transverse Wave" amplitude={-14} />
  );
}
```

---

### Expandable Bento Card (`ExpandableBentoCard`)
- **Slug**: `expandable-bento-card`
- **Category**: Cards
- **Tagline**: Inline-expanding bento card with spring height projection.
- **Description**: Interactive bento surface that expands inline with Hooke's Law spring height projection to reveal secondary diagnostic modules.
- **Docs URL**: https://boseui.site/components/expandable-bento-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/expandable-bento-card.json`
- **Registry Manifest**: https://boseui.site/r/expandable-bento-card.json
- **Key Features**:
  - Smooth inline height and layout projection powered by Framer Motion layout and AnimatePresence.
  - Rotational spring chevron indicator synchronized with expansion state.
  - Zero layout shift on neighboring grid cells when paired with layout-aware containers.
- **Accessibility**:
  - Header trigger is a semantic button with aria-expanded state announcement.
  - Supports Enter and Space keys to toggle expansion.
  - Collapses transition duration when prefers-reduced-motion is enabled.
- **Props**:
  - `badge` (string, default: "RUNTIME_TELEMETRY"): Eyebrow badge label displayed above the card heading.
  - `title` (string, default: "GPU Compositor Pipeline"): Primary heading text of the bento card.
  - `defaultExpanded` (boolean, default: false): Whether the diagnostic drawer is expanded on initial mount.
  - `stiffness` (number, default: 320): Spring stiffness coefficient for height expansion.
  - `damping` (number, default: 26): Spring damping coefficient controlling expansion settle.
  - `summary` (string): Short summary text displayed when the card is collapsed
- **Usage Example**:
```tsx
import { ExpandableBentoCard } from "@/components/ui/expandable-bento-card";

export function Example() {
  return (
    <ExpandableBentoCard
      badge="RUNTIME_TELEMETRY"
      title="GPU Compositor Pipeline"
    />
  );
}
```

---

### Expanding Search Pill (`ExpandingSearchPill`)
- **Slug**: `expanding-search-pill`
- **Category**: Navigation
- **Tagline**: Airbnb-inspired morphing search pill with shared layout springs.
- **Description**: Airbnb-style compact floating search pill that fluidly morphs with layout springs into an expanded multi-segment drawer with destination, date, and guest selection panels.
- **Docs URL**: https://boseui.site/components/expanding-search-pill
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/expanding-search-pill.json`
- **Registry Manifest**: https://boseui.site/r/expanding-search-pill.json
- **Key Features**:
  - Compact pill showing dynamic summary for destination, travel dates, and guest headcount.
  - Framer Motion layoutId morphing between compact pill and expanded multi-segment drawer.
  - Interactive tabbed popover sheets for destination regions, date presets, and guest steppers.
  - Live reactive simulated results cards updating as filters and guest parameters change.
  - Click outside and escape key handling with smooth spring collapse physics.
- **Accessibility**:
  - Interactive segments support standard keyboard navigation (Enter / Space).
  - Descriptive ARIA labels for search triggers and guest stepper buttons.
  - Disabled steppers communicate minimum boundaries (e.g. at least 1 adult required).
- **Props**:
  - `initialDestination` (string, default: "Anywhere"): Default destination text shown in the first segment.
  - `initialDateRange` (string, default: "Any week"): Default travel duration or date range string.
  - `initialAdults` (number, default: 1): Default adult guest count.
  - `onSearch` ((state: SearchState) => void): Callback invoked when search is triggered with current parameters.
  - `className` (string): Additional CSS classes for the container wrapper.
  - `embedded` (boolean): Whether pill renders embedded in container or floating with fixed coordinates
- **Usage Example**:
```tsx
import { ExpandingSearchPill } from "@/components/ui/expanding-search-pill";

export function Example() {
  return (
    <ExpandingSearchPill
      initialDestination="Kyoto, Japan"
      initialDateRange="Autumn Foliage"
      initialAdults={2}
      onSearch={(state) => console.log("Searching stays:", state)}
    />
  );
}
```

---

### Falling Petals (`FallingPetals`)
- **Slug**: `falling-petals`
- **Category**: Backgrounds
- **Tagline**: 3D-projected sakura petals and autumn leaves drifting on the wind.
- **Description**: Botanical particle background rendering organic Bezier cherry blossom petals, autumn maple leaves, and golden ginkgo foliage with 3D pitch/roll/yaw flutter and shared wind gusts.
- **Docs URL**: https://boseui.site/components/falling-petals
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/falling-petals.json`
- **Registry Manifest**: https://boseui.site/r/falling-petals.json
- **Key Features**:
  - Hand-crafted Bezier geometries for notched Sakura petals, Autumn Maple leaves, and Golden Ginkgo fans
  - 3D-projected pitch, roll, and yaw rotation using dynamic Canvas 2D matrix transforms
  - Harmonic horizontal sway combined with global wind gusts and pointer breeze impulse
  - Depth-of-field scaling and alpha layering for natural parallax depth
- **Accessibility**:
  - Canvas element is non-interactive (pointer-events-none) so foreground content remains fully accessible
  - HUD theme switchers and sliders support keyboard navigation
- **Props**:
  - `variant` ("sakura" | "autumn" | "golden", default: "sakura"): Selects the botanical shape and color palette preset.
  - `count` (number, default: 65): Number of falling petals or leaves rendered simultaneously.
  - `windSpeed` (number, default: 1.0): Multiplier for horizontal wind drift and rolling gusts.
  - `fallSpeed` (number, default: 1.0): Multiplier for vertical downward descent speed.
  - `flutter` (number, default: 1.0): Intensity of 3D rotational pitch/roll/yaw tumbling and horizontal sway.
  - `children` (React.ReactNode): Optional foreground content rendered above the petals canvas.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { FallingPetals } from "@/components/ui/FallingPetals";

export default function FallingPetalsDemo() {
  return (
    <FallingPetals
      variant="sakura"
      count={65}
      windSpeed={1.0}
      fallSpeed={1.0}
      flutter={1.0}
    >
      <div className="flex min-h-[520px] flex-col items-center justify-center p-8 text-center">
        <h1 className="text-4xl font-bold tracking-tight text-white">
          Spring Equinox
        </h1>
        <p className="mt-3 max-w-md text-pink-100/80">
          Delicate cherry blossom petals carried across a twilight breeze.
        </p>
      </div>
    </FallingPetals>
  );
}
```

---

### Feature Card (`FeatureCard`)
- **Slug**: `feature-card`
- **Category**: Cards
- **Tagline**: Large rounded feature card with media preview and hover lift.
- **Description**: Large rounded showcase card with an eyebrow badge, headline, concise copy, interactive media stage, and smooth spring hover lift.
- **Docs URL**: https://boseui.site/components/feature-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/feature-card.json`
- **Registry Manifest**: https://boseui.site/r/feature-card.json
- **Key Features**:
  - 28px rounded architectural container with spring-driven hover elevation (`y: -6`).
  - Supports both vertical and horizontal layouts with a dedicated media preview well.
  - Interactive default media telemetry bars that respond dynamically when the card is hovered.
- **Accessibility**:
  - Uses semantic `<article>` markup with high-contrast typography.
  - Action button includes visible keyboard focus rings and active press feedback.
  - Disables vertical lift animation when `prefers-reduced-motion` is enabled.
- **Props**:
  - `eyebrow` (string, default: "Apple Silicon Architecture"): Small uppercase label displayed above the headline.
  - `title` (string, default: "Engineered for fluid 120Hz motion."): Primary headline inside the feature card.
  - `description` (string): Concise supporting paragraph below the headline.
  - `ctaLabel` (string, default: "Explore Architecture"): Text label for the call-to-action pill button.
  - `onAction` (() => void): Callback fired when the CTA button is clicked.
  - `media` (React.ReactNode): Custom visual or media node rendered inside the media stage.
  - `layout` ("vertical" | "horizontal", default: "vertical"): Controls whether text and media stack vertically or sit side-by-side.
  - `className` (string): Additional Tailwind CSS classes for the card.
- **Usage Example**:
```tsx
import { FeatureCard } from "@/components/ui/feature-card";

export function Example() {
  return (
    <FeatureCard
      eyebrow="Performance"
      title="Engineered for fluid 120Hz motion."
      description="Every interaction responds with spring physics and zero layout shift."
      ctaLabel="Learn More"
    />
  );
}
```

---

### File Tree (`FileTree`)
- **Slug**: `file-tree`
- **Category**: Navigation
- **Tagline**: Animated nested folder tree with instant file filtering.
- **Description**: Hierarchical file and folder explorer with animated expand/collapse transitions, instant file search filtering, and active path tracking.
- **Docs URL**: https://boseui.site/components/file-tree
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/file-tree.json`
- **Registry Manifest**: https://boseui.site/r/file-tree.json
- **Key Features**:
  - Recursive nested folders with smooth Framer Motion height transitions.
  - Built-in instant search bar that auto-expands matching file paths.
  - Supports custom badges, file type icons, and selection callbacks.
- **Accessibility**:
  - Uses semantic role='tree', role='treeitem', and role='group' attributes.
  - Announces folder open/close state via aria-expanded and selection via aria-selected.
  - Respects prefers-reduced-motion when expanding or collapsing directories.
- **Props**:
  - `data` (FileTreeNode[]): Hierarchical array of folder and file nodes.
  - `defaultExpandedIds` (string[], default: ["src", "src/components"]): Array of folder IDs expanded on initial render.
  - `defaultSelectedId` (string): ID of the initially highlighted file or folder.
  - `onSelect` ((node: FileTreeNode) => void): Callback fired when a file or folder item is clicked.
  - `searchable` (boolean, default: true): Renders an instant filter input at the top of the tree.
- **Usage Example**:
```tsx
import { FileTree } from "@/components/ui/file-tree";

export function Example() {
  return (
    <FileTree
      searchable
      onSelect={(node) => console.log("Selected:", node.id)}
    />
  );
}
```

---

### Fireflies (`Fireflies`)
- **Slug**: `fireflies`
- **Category**: Backgrounds
- **Tagline**: Bioluminescent twilight fireflies above a layered pine forest.
- **Description**: Enchanted twilight forest background with bioluminescent firefly orbs drifting along smooth organic trajectories and pulsing with soft radial halos.
- **Docs URL**: https://boseui.site/components/fireflies
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/fireflies.json`
- **Registry Manifest**: https://boseui.site/r/fireflies.json
- **Key Features**:
  - Smooth harmonic drift trajectories with depth-sorted parallax layers
  - Non-linear bioluminescent flash curves with soft radial halos and motion trails
  - Procedural multi-ridge pine forest silhouette with atmospheric horizon mist
  - Gentle cursor attraction field and live interactive HUD controls
- **Accessibility**:
  - Decorative Canvas 2D layer marked pointer-events-none so overlay content remains accessible
  - High-contrast glassmorphic HUD controls with keyboard-focusable range inputs and buttons
- **Props**:
  - `count` (number, default: 55): Total number of glowing firefly orbs in the scene.
  - `glowColor` (string, default: "#D9F99D"): Hex color used for the firefly bioluminescent core and halo.
  - `speed` (number, default: 1.0): Multiplier for the organic flight velocity of the fireflies.
  - `pulseRate` (number, default: 1.0): Multiplier for individual firefly brightness pulse frequency.
  - `showForest` (boolean, default: true): Whether to render the multi-layered pine forest silhouette at the bottom.
  - `interactive` (boolean, default: true): Gently attracts nearby fireflies toward the pointer position.
  - `children` (React.ReactNode): Optional foreground content rendered above the firefly canvas.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { Fireflies } from "@/components/ui/Fireflies";

export default function FirefliesDemo() {
  return (
    <Fireflies
      count={65}
      glowColor="#D9F99D"
      speed={1.0}
      pulseRate={1.1}
      showForest
      interactive
    >
      <div className="flex min-h-[520px] flex-col items-center justify-center p-8 text-center">
        <h1 className="text-4xl font-bold tracking-tight text-white">
          Into the Quiet Woods
        </h1>
        <p className="mt-3 max-w-md text-slate-300">
          Bioluminescent particles drifting through a calm twilight sanctuary.
        </p>
      </div>
    </Fireflies>
  );
}
```

---

### Floating Compass Nav (`FloatingCompassNav`)
- **Slug**: `floating-compass-nav`
- **Category**: Navigation
- **Tagline**: Four-quadrant corner-snapping floating navigation pod.
- **Description**: Viewport-anchored floating navigation pod that snaps elastically across four corner quadrants (NW, NE, SW, SE) via spring layout projection.
- **Docs URL**: https://boseui.site/components/floating-compass-nav
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/floating-compass-nav.json`
- **Registry Manifest**: https://boseui.site/r/floating-compass-nav.json
- **Key Features**:
  - Four-corner magnetic quadrant snapping (NW, NE, SW, SE) powered by Framer Motion layout projection.
  - On-pod directional quadrant buttons plus dashed corner anchor targets.
  - Configurable Hooke's Law stiffness and damping for travel trajectory.
- **Accessibility**:
  - Every corner anchor target and directional button includes a descriptive aria-label.
  - Fully operable via Tab and Enter/Space keys without requiring drag gestures.
  - Snaps instantaneously across quadrants when prefers-reduced-motion is active.
- **Props**:
  - `defaultQuadrant` ("NW" | "NE" | "SW" | "SE", default: "SE"): Initial corner quadrant where the navigation pod is anchored.
  - `stiffness` (number, default: 300): Spring stiffness coefficient for cross-viewport corner snapping.
  - `damping` (number, default: 24): Spring damping coefficient controlling corner arrival bounce.
- **Usage Example**:
```tsx
import { FloatingCompassNav } from "@/components/ui/floating-compass-nav";

export function Example() {
  return (
    <FloatingCompassNav defaultQuadrant="SE" stiffness={300} damping={24} />
  );
}
```

---

### Text Field with Floating Label (`FloatingLabelInput`)
- **Slug**: `floating-label-input`
- **Category**: Inputs
- **Tagline**: Rounded text field with spring floating label and focus ring.
- **Description**: Soft rounded input field with a spring-animated floating label, accent focus ring, inline clear button, password visibility toggle, and validation caption.
- **Docs URL**: https://boseui.site/components/floating-label-input
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/floating-label-input.json`
- **Registry Manifest**: https://boseui.site/r/floating-label-input.json
- **Key Features**:
  - Smoothly floats and scales the label (`scale: 0.82, y: -10`) when focused or populated.
  - Soft 16px rounded container with a 3px halo focus ring (`ring-3`).
  - Built-in clear button, password show/hide toggle, and error/helper caption support.
- **Accessibility**:
  - Associates `<label>` and `<input>` via unique `useId()` `htmlFor`/`id` attributes.
  - Clear button uses `onMouseDown={(e) => e.preventDefault()}` so input focus is preserved when clearing.
  - Respects `prefers-reduced-motion` for label float transitions.
- **Props**:
  - `label` (string, default: "Apple ID or Email Address"): Floating label text inside the field.
  - `value` (string): Controlled input value.
  - `defaultValue` (string, default: "rishabh@boseui.com"): Initial value for uncontrolled mode.
  - `onChange` ((value: string) => void): Callback fired when the input text changes.
  - `type` ("text" | "email" | "password" | "url", default: "email"): HTML input type (adds visibility toggle when set to 'password').
  - `helperText` (string): Optional helper caption displayed below the field.
  - `error` (string): Optional error message that activates the red validation ring.
  - `clearable` (boolean, default: true): Shows a quick-clear button when the input is non-empty.
  - `disabled` (boolean, default: false): Disables the text field.
  - `className` (string): Additional Tailwind CSS classes for the wrapper.
- **Usage Example**:
```tsx
import { FloatingLabelInput } from "@/components/ui/floating-label-input";

export function Example() {
  return (
    <FloatingLabelInput
      label="Apple ID or Email Address"
      helperText="Your email is used for CLI registry authentication."
    />
  );
}
```

---

### Galaxy & Nebula (`GalaxyNebula`)
- **Slug**: `galaxy-nebula`
- **Category**: Backgrounds
- **Tagline**: WebGL FBM fractal noise nebula with spiral rotation.
- **Description**: Real-time WebGL fragment shader rendering a rotating spiral galaxy and cosmic dust nebula using 5-octave Fractional Brownian Motion (FBM) noise.
- **Docs URL**: https://boseui.site/components/galaxy-nebula
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/galaxy-nebula.json`
- **Registry Manifest**: https://boseui.site/r/galaxy-nebula.json
- **Key Features**:
  - GPU-accelerated WebGL GLSL fragment shader computing 5-octave Fractional Brownian Motion (`fbm`).
  - Polar coordinate spiral arm warping with a luminous galactic core.
  - Includes Andromeda, Orion, and Supernova color presets in the interactive preview.
- **Accessibility**:
  - Marks the `<canvas>` shader viewport with `aria-hidden='true'`.
  - Maintains high-contrast text legibility with subtle drop shadows.
  - Preset selector buttons support keyboard focus.
- **Props**:
  - `speed` (number, default: 1): Time multiplier for internal nebula turbulence.
  - `rotationSpeed` (number, default: 0.25): Angular velocity of the spiral galaxy arms.
  - `primaryColor` (string, default: "#8B5CF6"): Hex color for the inner nebula filaments.
  - `secondaryColor` (string, default: "#06B6D4"): Hex color for the outer cosmic dust cloud.
  - `children` (React.ReactNode): Optional foreground content rendered above the shader.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { GalaxyNebula } from "@/components/ui/galaxy-nebula";

export function Example() {
  return (
    <GalaxyNebula
      speed={1}
      rotationSpeed={0.25}
      primaryColor="#8B5CF6"
      secondaryColor="#06B6D4"
    />
  );
}
```

---

### Globe Arcs (`GlobeArcs`)
- **Slug**: `globe-arcs`
- **Category**: Backgrounds
- **Tagline**: Interactive 3D dotted globe with glowing transaction flight arcs and drag-to-rotate inertia.
- **Description**: Interactive 3D dotted Canvas globe featuring glowing multi-point transaction flight arcs, traveling light pulses, drag-to-rotate interaction with inertia dampening, and global city routing nodes.
- **Docs URL**: https://boseui.site/components/globe-arcs
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/globe-arcs.json`
- **Registry Manifest**: https://boseui.site/r/globe-arcs.json
- **Key Features**:
  - Lightweight Canvas 2D spherical projection with 800+ golden-angle dotted point cloud vertices.
  - Elevated great-circle 3D bezier arcs connecting major financial hubs (SF, NYC, London, Tokyo, Singapore, Sydney).
  - Traveling glowing light pulse heads and trail rendering on each active transaction route.
  - Intuitive touch & pointer drag-to-rotate with physics-based inertia dampening and auto-rotation.
  - Live interactive stage controls to adjust spin speed, emit pulses, reset angles, and select edge nodes.
- **Accessibility**:
  - Fully pauseable auto-rotation via visible interactive toggle button.
  - Handles reduced-motion preferences by maintaining static inspection without continuous spinning.
  - Does not block keyboard focus order or document scrolling.
- **Props**:
  - `autoRotateSpeed` (number, default: 0.004): Angular speed (radians per frame) for the continuous globe rotation.
  - `initialRadius` (number, default: 160): Base spherical radius benchmark used for coordinate scaling.
  - `className` (string): Optional CSS classes to apply to the root container.
  - `showHeader` (boolean): Whether to render the telemetry title and status indicator header
  - `showControls` (boolean): Whether to show rotation speed and arc interaction sliders
- **Usage Example**:
```tsx
import { GlobeArcs } from "@/components/ui/GlobeArcs";

export function Example() {
  return (
    <div className="w-full">
      <GlobeArcs autoRotateSpeed={0.004} />
    </div>
  );
}
```

---

### Glow Border Card (`GlowBorderCard`)
- **Slug**: `glow-border-card`
- **Category**: Cards
- **Tagline**: High-gloss cards with cursor-following radial gradient borders and reactive sheen overlays.
- **Description**: High-gloss feature cards with thin glowing gradient borders and interactive face overlays that dynamically illuminate and follow cursor coordinates using radial gradient masking.
- **Docs URL**: https://boseui.site/components/glow-border-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/glow-border-card.json`
- **Registry Manifest**: https://boseui.site/r/glow-border-card.json
- **Key Features**:
  - Real-time pointer tracking calculating coordinates directly to illuminate 1px border edges.
  - Integrated face sheen overlay providing a subtle tactile glass refraction beneath the cursor.
  - Customizable theme presets: Stripe Indigo/Cyan, Electric Violet, Emerald Glow, and Golden Amber.
  - Smooth CSS hover lift transformation with layout stability and zero reflow.
  - Interactive stage controls to tweak glow radii, intensity, palette themes, and elevation.
- **Accessibility**:
  - Retains visible 1px borders in high-contrast modes for users with vision accommodations.
  - Fully keyboard accessible with standard focus outlines and tab navigation.
  - Subtle animation that respects prefers-reduced-motion without disorienting flickers.
- **Props**:
  - `defaultRadius` (number, default: 280): Radius in pixels of the illuminated radial gradient circle around the pointer.
  - `defaultIntensity` (number, default: 0.5): Opacity coefficient for the illuminated face sheen overlay (0.2 to 1.0).
  - `className` (string): Optional CSS classes to apply to the root container.
- **Usage Example**:
```tsx
import { GlowBorderCard } from "@/components/ui/GlowBorderCard";

export function Example() {
  return (
    <div className="w-full">
      <GlowBorderCard defaultRadius={280} defaultIntensity={0.5} />
    </div>
  );
}
```

---

### Gradient Mesh Hero (`GradientMeshHero`)
- **Slug**: `gradient-mesh-hero`
- **Category**: Backgrounds
- **Tagline**: Stripe-inspired multi-color drifting gradient mesh hero with diagonal clip-path.
- **Description**: Stripe-style angled flowing gradient mesh hero section featuring multi-layered organic color blobs, diagonal polygon clip-path, and live palette switching.
- **Docs URL**: https://boseui.site/components/gradient-mesh-hero
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/gradient-mesh-hero.json`
- **Registry Manifest**: https://boseui.site/r/gradient-mesh-hero.json
- **Key Features**:
  - Angled flowing gradient mesh with signature Stripe diagonal bottom clip-path (`polygon(0 0, 100% 0, 100% 88%, 0 100%)`).
  - Layered organic animated color blobs (violet, indigo, cyan, vermilion, amber) drifting smoothly.
  - Integrated hero typography, feature pill badge, dual action CTAs, and live telemetry metric strip.
  - Live interactive stage controls for color presets, drift cycle duration, blur radii, and clip-path toggling.
- **Accessibility**:
  - Subtle CSS keyframe animations optimized for GPU compositing with low CPU overhead.
  - High contrast hero copy (WCAG AAA against the dark backdrop overlay).
  - All interactive preset buttons and sliders include descriptive labels and keyboard navigation.
- **Props**:
  - `defaultPreset` (string, default: 'stripe-classic'): Initial color preset id ('stripe-classic', 'neon-cyber', 'sunset-ray', 'deep-aurora').
  - `enableClipPath` (boolean, default: true): Whether to apply the diagonal polygon bottom clip-path.
  - `className` (string): Optional CSS classes to apply to the root container.
  - `preset` ("aurora" | "sunset" | "neon" | "ocean"): Active color gradient palette preset for background blobs
  - `headline` (string): Main headline text rendered in the hero section
  - `description` (string): Subtitle or supporting paragraph under the headline
  - `primaryCtaText` (string): Label for the primary call-to-action button
  - `secondaryCtaText` (string): Label for the secondary action button
- **Usage Example**:
```tsx
import { GradientMeshHero } from "@/components/ui/GradientMeshHero";

export function Example() {
  return (
    <div className="w-full">
      <GradientMeshHero defaultPreset="stripe-classic" enableClipPath={true} />
    </div>
  );
}
```

---

### Gravity Well Portal (`GravityWellPortal`)
- **Slug**: `gravity-well-portal`
- **Category**: Motion
- **Tagline**: Multi-node gravitational attraction and repulsion spring field.
- **Description**: Multi-node gravitational field stage where spring-tethered telemetry badges warp toward or repel from the pointer with polarity inversion.
- **Docs URL**: https://boseui.site/components/gravity-well-portal
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/gravity-well-portal.json`
- **Registry Manifest**: https://boseui.site/r/gravity-well-portal.json
- **Key Features**:
  - Simultaneous 2D vector field attraction and repulsion across 6 spring-tethered telemetry nodes.
  - Click or keyboard toggle to invert field polarity between gravitational pull and radial repulsion.
  - Zero React state re-renders during pointer movement via Framer Motion useTransform.
- **Accessibility**:
  - Provides a keyboard-focusable polarity toggle button announcing Attract and Repel states.
  - Marks decorative orbital rings and floating telemetry badges with aria-hidden='true'.
  - Locks all orbital nodes at their anchor coordinates when prefers-reduced-motion is enabled.
- **Props**:
  - `pullRadius` (number, default: 180): Gravitational influence radius in pixels around the cursor.
  - `pullStrength` (number, default: 0.55): Peak attraction or repulsion displacement factor (0.1 to 0.9).
  - `stiffness` (number, default: 240): Hooke's Law spring stiffness coefficient for node tethers.
  - `damping` (number, default: 20): Spring damping coefficient controlling node oscillation decay.
- **Usage Example**:
```tsx
import { GravityWellPortal } from "@/components/ui/gravity-well-portal";

export function Example() {
  return (
    <GravityWellPortal pullRadius={180} pullStrength={0.55} />
  );
}
```

---

### Grid Horizon (`GridHorizon`)
- **Slug**: `grid-horizon`
- **Category**: Backgrounds
- **Tagline**: 3D perspective synthwave grid with endless scroll and horizon sun.
- **Description**: Pure CSS 3D perspective synthwave horizon using `perspective(320px) rotateX(64deg)` and `background-position-y` animation for an endless wireframe road effect.
- **Docs URL**: https://boseui.site/components/grid-horizon
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/grid-horizon.json`
- **Registry Manifest**: https://boseui.site/r/grid-horizon.json
- **Key Features**:
  - Uses CSS `perspective(320px)` and `rotateX(64deg)` to project a 2D repeating grid into a 3D infinite plane.
  - Segmented scanline sun orb and glowing horizon divider line.
  - Includes Synthwave, Cyber, and Mono theme switcher pills in the default preview.
- **Accessibility**:
  - Marks decorative 3D grid and sun layers with `aria-hidden='true'`.
  - High-contrast foreground text with drop-shadow separation.
  - Theme switcher buttons are keyboard focusable.
- **Props**:
  - `speed` (number, default: 1): Scroll velocity multiplier for the grid road.
  - `gridColor` (string, default: "rgba(236, 72, 153, 0.55)"): CSS color string for the perspective grid lines.
  - `sunColor` (string, default: "#F97316"): Core color of the horizon sun.
  - `gridSize` (number, default: 44): Grid tile size in pixels.
  - `showSun` (boolean, default: true): Toggles the segmented synthwave sun on the horizon.
  - `children` (React.ReactNode): Optional foreground content rendered above the horizon.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { GridHorizon } from "@/components/ui/grid-horizon";

export function Example() {
  return (
    <GridHorizon
      speed={1}
      gridSize={44}
      showSun
    />
  );
}
```

---

### Heart Burst Button (`HeartBurstButton`)
- **Slug**: `heart-burst-button`
- **Category**: Buttons
- **Tagline**: Instagram-inspired elastic heart button with radial particle confetti sparks.
- **Description**: Instagram and Twitter-style like button featuring an elastic scale-pop spring, expanding shockwave ring, radial multi-colored particle confetti sparks, and double-tap card preview.
- **Docs URL**: https://boseui.site/components/heart-burst-button
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/heart-burst-button.json`
- **Registry Manifest**: https://boseui.site/r/heart-burst-button.json
- **Key Features**:
  - Elastic scale-pop spring animation on heart icon with subtle rotational tilt.
  - Expanding shockwave outline ring that dissipates smoothly on trigger.
  - Radial burst of 12 multi-color confetti particles with staggered trajectories and fades.
  - Animated live number roll for like count using AnimatePresence.
  - Interactive photo canvas supporting double-click/double-tap to burst a large floating heart.
  - Configurable color themes (Instagram sunset, Crimson, Violet, Gold) and button sizes.
- **Accessibility**:
  - Uses semantic HTML button with reactive aria-label ('Like post' / 'Unlike post').
  - Clear visual focus ring for keyboard navigation.
  - Gracefully handles prefers-reduced-motion without breaking functionality.
- **Props**:
  - `initialLiked` (boolean, default: false): Initial liked state of the button.
  - `initialCount` (number, default: 1420): Initial numerical like counter value.
  - `size` ("sm" | "md" | "lg" | "xl", default: "md"): Size scale of the heart button icon and padding.
  - `theme` ("instagram" | "crimson" | "violet" | "gold", default: "instagram"): Color palette used for the heart fill, shockwave, and confetti particles.
  - `onToggle` ((liked: boolean, count: number) => void): Callback triggered whenever the like status changes.
  - `className` (string): Optional custom CSS classes for the container wrapper.
- **Usage Example**:
```tsx
import { HeartBurstButton } from "@/components/ui/heart-burst-button";

export function Example() {
  return (
    <HeartBurstButton
      initialLiked={false}
      initialCount={1420}
      theme="instagram"
      onToggle={(liked, count) => console.log({ liked, count })}
    />
  );
}
```

---

### Hold To Confirm Button (`HoldToConfirmButton`)
- **Slug**: `hold-to-confirm-button`
- **Category**: Buttons
- **Tagline**: Press-and-hold safety button with elastic abort recoil.
- **Description**: Press-and-hold safety action button with a spring-pressured progress fill that recoils elastically when released early.
- **Docs URL**: https://boseui.site/components/hold-to-confirm-button
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/hold-to-confirm-button.json`
- **Registry Manifest**: https://boseui.site/r/hold-to-confirm-button.json
- **Key Features**:
  - 60fps requestAnimationFrame hold timer coupled to a Hooke's Law spring progress bar.
  - Elastic recoil that snaps the fill bar back to 0% if the pointer or key is released before completion.
  - Built-in reset cycle after confirmation so users can test repeated interactions.
- **Accessibility**:
  - Uses aria-live='polite' to announce state transitions between idle, holding, and confirmed.
  - Supports continuous Spacebar or Enter key hold for full keyboard parity.
  - Disables scale compression when prefers-reduced-motion is enabled.
- **Props**:
  - `label` (string, default: "Hold to Purge Cache"): Resting action label displayed inside the button.
  - `confirmedLabel` (string, default: "Cache Purged"): Success label displayed after the hold completes 100%.
  - `holdDuration` (number, default: 1400): Hold duration in milliseconds required to confirm the action.
  - `variant` ("default" | "danger", default: "default"): Visual style variant for standard or destructive actions.
  - `disabled` (boolean, default: false): Disables button interaction when true.
  - `stiffness` (number, default: 280): Spring stiffness coefficient for progress fill and recoil.
  - `damping` (number, default: 24): Spring damping coefficient for progress fill and recoil.
  - `onConfirm` (() => void): Callback fired when the hold completes 100%.
  - `className` (string): Additional Tailwind CSS classes for the button.
- **Usage Example**:
```tsx
import { HoldToConfirmButton } from "@/components/ui/hold-to-confirm-button";

export function Example() {
  return (
    <HoldToConfirmButton
      label="Hold to Purge Cache"
      confirmedLabel="Cache Purged"
      holdDuration={1400}
    />
  );
}
```

---

### Holographic Flip Card (`HolographicFlipCard`)
- **Slug**: `holographic-flip-card`
- **Category**: Cards
- **Tagline**: Coupled 3D perspective tilt, foil sheen, and 180° spring flip.
- **Description**: Dual-sided 3D interactive card combining spring-damped perspective tilt, specular foil glare tracking, and a 180-degree Y-axis kinetic flip.
- **Docs URL**: https://boseui.site/components/holographic-flip-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/holographic-flip-card.json`
- **Registry Manifest**: https://boseui.site/r/holographic-flip-card.json
- **Key Features**:
  - Couples continuous pointer tilt (±maxTilt degrees) with a 180° Y-axis flip in a single unified spring system.
  - GPU-composited radial specular foil glare tracked via Framer Motion useMotionTemplate.
  - True 3D preserve-3d backface culling for crisp front and back surfaces.
- **Accessibility**:
  - Implements role='button' with aria-pressed state and descriptive aria-label announcing current card face.
  - Supports Enter and Space keys to flip between front and back faces.
  - Disables continuous 3D tilt rotation when prefers-reduced-motion is active.
- **Props**:
  - `front` (React.ReactNode): Optional custom React node rendered on the front face.
  - `back` (React.ReactNode): Optional custom React node rendered on the back face.
  - `maxTilt` (number, default: 12): Maximum 3D tilt angle in degrees along X and Y axes.
  - `stiffness` (number, default: 220): Hooke's Law spring stiffness for 3D tilt and 180° flip.
  - `damping` (number, default: 22): Spring damping coefficient controlling rotational oscillation.
- **Usage Example**:
```tsx
import { HolographicFlipCard } from "@/components/ui/holographic-flip-card";

export function Example() {
  return (
    <HolographicFlipCard maxTilt={12} stiffness={220} damping={22} />
  );
}
```

---

### Horizon Light (`HorizonLight`)
- **Slug**: `horizon-light`
- **Category**: Backgrounds
- **Tagline**: Planetary eclipse horizon & volumetric solar corona
- **Description**: WebGL planetary horizon limb shader with a razor-sharp incandescent core, volumetric FBM atmospheric corona, interactive solar apex tracking, and 8-bit dithered bloom.
- **Docs URL**: https://boseui.site/components/horizon-light
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/horizon-light.json`
- **Registry Manifest**: https://boseui.site/r/horizon-light.json
- **Key Features**:
  - Signed-distance planetary sphere (SDF) creating a crisp curved horizon limb
  - 4-octave Fractional Brownian Motion (FBM) polar god-rays radiating from the solar apex
  - Damped pointer tracking that gently shifts the solar apex along the curved arc
  - Supports both Eclipse Dark (#0c0c0b) and Architectural Bone Light (#f4f1ea) shader surfaces
  - High-frequency optical filmic dither to eliminate 8-bit gradient banding
- **Accessibility**:
  - Respects prefers-reduced-motion by freezing temporal ray animation
  - Canvas is marked aria-hidden so screen readers focus strictly on foreground content
- **Props**:
  - `primaryColor` (string, default: "#FF4D1C"): Primary atmospheric scatter color (International Vermilion by default).
  - `secondaryColor` (string, default: "#FF8A3D"): Inner solar corona glow color.
  - `deepColor` (string, default: "#6E1404"): Outer deep atmospheric bloom color.
  - `coreColor` (string, default: "#FFF3E0"): Razor-sharp incandescent planetary limb core color.
  - `horizonHeight` (number, default: 0.43): Vertical position of the planetary horizon apex (0.2 to 0.75).
  - `intensity` (number, default: 1.0): Multiplier for atmospheric bloom and limb brightness.
  - `speed` (number, default: 1.0): Animation speed multiplier for volumetric god-rays.
  - `interactive` (boolean, default: true): Whether pointer movement shifts the solar apex along the horizon curve.
  - `themeMode` ("dark" | "light" | "auto", default: "dark"): Selects dark eclipse mode, warm bone light mode, or syncs with page theme.
- **Usage Example**:
```tsx
import { HorizonLight } from "@/components/ui/HorizonLight";

export default function HeroSection() {
  return (
    <HorizonLight
      primaryColor="#FF4D1C"
      secondaryColor="#FF8A3D"
      deepColor="#6E1404"
      horizonHeight={0.43}
      intensity={1.0}
      themeMode="dark"
      className="min-h-[640px]"
    >
      <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
        <h1 className="text-4xl sm:text-6xl font-semibold tracking-tight text-white">
          Planetary Horizon Light
        </h1>
        <p className="mt-4 max-w-lg text-zinc-300">
          Volumetric atmospheric scatter and razor-sharp incandescent limb illumination.
        </p>
      </div>
    </HorizonLight>
  );
}
```

---

### Hover Reveal Feature Grid (`HoverRevealFeatureGrid`)
- **Slug**: `hover-reveal-feature-grid`
- **Category**: Cards
- **Tagline**: Linear-style bento feature grid with radial spotlight mask and secondary hover reveal.
- **Description**: Linear-inspired bento feature grid where hovering any tile casts an interactive radial spotlight mask across card borders, smoothly reveals secondary deep feature specifications, and highlights contextual interactive badges.
- **Docs URL**: https://boseui.site/components/hover-reveal-feature-grid
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/hover-reveal-feature-grid.json`
- **Registry Manifest**: https://boseui.site/r/hover-reveal-feature-grid.json
- **Key Features**:
  - Continuous mouse-tracking radial spotlight mask illuminating adjacent borders across the grid mesh.
  - Spring-animated progressive reveal: hover expands secondary architecture metrics and interactive badges.
  - Responsive asymmetric Bento layout with hero feature anchor and companion cards.
  - Customizable spotlight colors: Linear Indigo, Emerald Matrix, Cyber Violet, and Sunset Amber.
  - Interactive radius slider and spotlight intensity controls in the live demo stage.
- **Accessibility**:
  - Hidden content is conditionally announced to screen readers or made accessible via keyboard focus.
  - Each bento tile is keyboard focusable with high contrast focus indicators.
  - Supports prefers-reduced-motion by disabling spotlight translation and instant-showing specs on focus.
- **Props**:
  - `spotlightColor` ("indigo" | "emerald" | "violet" | "amber", default: "indigo"): Color hue of the radial spotlight cursor mask.
  - `spotlightRadius` (number, default: 350): Radius in pixels of the illuminated spotlight cone.
  - `className` (string): Optional custom classes applied to the root container.
- **Usage Example**:
```tsx
import { HoverRevealFeatureGrid } from "@/components/ui/HoverRevealFeatureGrid";

export function Example() {
  return (
    <HoverRevealFeatureGrid
      spotlightColor="indigo"
      spotlightRadius={350}
    />
  );
}
```

---

### Interactive Grid Beam (`InteractiveGridBeam`)
- **Slug**: `interactive-grid-beam`
- **Category**: Backgrounds
- **Tagline**: Spring-masked matrix grid with orthogonal intersection light beams.
- **Description**: Architectural matrix background surface with spring-smoothed radial cursor illumination and click-triggered orthogonal grid light beams.
- **Docs URL**: https://boseui.site/components/interactive-grid-beam
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/interactive-grid-beam.json`
- **Registry Manifest**: https://boseui.site/r/interactive-grid-beam.json
- **Key Features**:
  - Dual-layer CSS grid matrix revealed dynamically via Framer Motion useMotionTemplate mask-image.
  - Snaps click coordinates to the nearest grid intersection and fires orthogonal horizontal and vertical light beams.
  - Zero React re-renders during pointer movement.
- **Accessibility**:
  - All background matrix layers and light beam traces are marked aria-hidden='true'.
  - Disables orthogonal pulse animations when prefers-reduced-motion is active.
  - Preserves high foreground readability with a translucent backdrop card.
- **Props**:
  - `gridSize` (number, default: 32): Width and height of each matrix cell in pixels.
  - `glowRadius` (number, default: 220): Radius of the cursor-tracked radial grid illumination mask in pixels.
  - `stiffness` (number, default: 280): Spring stiffness coefficient for cursor spotlight tracking.
  - `damping` (number, default: 26): Spring damping coefficient for cursor spotlight tracking.
- **Usage Example**:
```tsx
import { InteractiveGridBeam } from "@/components/ui/interactive-grid-beam";

export function Example() {
  return (
    <InteractiveGridBeam gridSize={32} glowRadius={220}>
      <div className="rounded-xl border border-neutral-200 bg-white/90 px-5 py-3 dark:border-[#262626] dark:bg-[#111]/90">
        <span className="text-sm font-semibold">Click any grid intersection</span>
      </div>
    </InteractiveGridBeam>
  );
}
```

---

### Isometric City (`IsometricCity`)
- **Slug**: `isometric-city`
- **Category**: Backgrounds
- **Tagline**: Procedural isometric night metropolis with live avenue light streaks.
- **Description**: Procedural 3D-projected isometric night cityscape rendered on HTML5 Canvas 2D with depth-sorted skyscrapers, flickering office windows, rooftop aviation beacons, and avenue light-streak traffic.
- **Docs URL**: https://boseui.site/components/isometric-city
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/isometric-city.json`
- **Registry Manifest**: https://boseui.site/r/isometric-city.json
- **Key Features**:
  - True painter's-algorithm depth sorting across procedurally generated 3D isometric city blocks.
  - Hundreds of individual perspective-aligned office windows that subtly toggle on and off alongside rooftop aviation beacons.
  - Bi-directional headlight and taillight light-streaks gliding smoothly along the isometric avenue grid.
- **Accessibility**:
  - Canvas city projection is marked aria-hidden='true' to prevent screen reader noise.
  - Interactive palette, window-flicker, and city regeneration buttons support keyboard focus and clear state labels.
- **Props**:
  - `gridSize` (number, default: 7): Number of city blocks generated along each isometric axis (4 to 10).
  - `buildingDensity` (number, default: 0.78): Probability (0.3 to 1.0) that a grid parcel spawns a tower.
  - `trafficSpeed` (number, default: 1.0): Velocity multiplier for avenue headlight and taillight streaks.
  - `colorPalette` ("cyberpunk" | "midnight" | "amber", default: "midnight"): Color theme controlling sky gradient, facade shading, and window hues.
  - `windowFlicker` (boolean, default: true): Enables stochastic real-time toggling of individual office windows.
  - `children` (React.ReactNode): Optional foreground UI rendered above the cityscape.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { IsometricCity } from "@/components/ui/IsometricCity";

export function Example() {
  return (
    <IsometricCity
      gridSize={7}
      buildingDensity={0.8}
      trafficSpeed={1.0}
      colorPalette="midnight"
      windowFlicker
    />
  );
}
```

---

### Keycap Chips (`KeycapChips`)
- **Slug**: `keycap-chips`
- **Category**: Buttons
- **Tagline**: Raycast-style 3D tactile keycaps with mechanical depression feedback.
- **Description**: Raycast-inspired 3D tactile physical keyboard keycaps with realistic chamfer bevels, inset mechanical shadows, physical depression animations, and interactive keyboard listener.
- **Docs URL**: https://boseui.site/components/keycap-chips
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/keycap-chips.json`
- **Registry Manifest**: https://boseui.site/r/keycap-chips.json
- **Key Features**:
  - Physical 3D bevels with layered drop-shadows and tactile bottom edge extrusion.
  - Realistic spring depression physics on active click or physical keyboard press.
  - Integrated live keyboard listener detecting key strokes in real time.
  - Preset command pallets (Command Menu ⌘K, Spotlight ⌥Space, Git Commit ⌘↵, Quick Search Ctrl/).
  - Multiple finishes: Matte Obsidian, Mechanical Classic, Cyber Amber, and Porcelain White.
- **Accessibility**:
  - Key combinations are semantically marked up with HTML <kbd> elements.
  - Each keycap is keyboard focusable and playable with Space or Enter.
  - Includes ARIA labels clearly communicating the keystroke sequence to screen readers.
- **Props**:
  - `shortcuts` (ShortcutItem[]): Array of shortcut items with label, category, and keys list.
  - `size` ("sm" | "md" | "lg", default: "md"): Physical dimensions and typography scale of keycaps.
  - `variant` ("obsidian" | "classic" | "cyber" | "porcelain", default: "obsidian"): Aesthetic colorway and shadow finish of the keycaps.
  - `enableGlobalListener` (boolean, default: true): Whether physical keystrokes on the user's keyboard trigger key depression.
  - `className` (string): Optional custom classes applied to the root container.
  - `keys` (string[]): Array of individual keycap symbols to render
  - `inline` (boolean): Whether keycaps render inline with prose text
  - `onShortcutPress` ((shortcut: ShortcutCombo) => void): Callback triggered when physical shortcut combination is activated
- **Usage Example**:
```tsx
import { KeycapChips } from "@/components/ui/KeycapChips";

export function Example() {
  return (
    <KeycapChips
      size="md"
      variant="obsidian"
      enableGlobalListener={true}
    />
  );
}
```

---

### Kinetic Drawer Sheet (`KineticDrawerSheet`)
- **Slug**: `kinetic-drawer-sheet`
- **Category**: Overlays
- **Tagline**: Multi-detent bottom gesture sheet with rubber-band over-drag.
- **Description**: Bottom gesture sheet featuring Peek and Full spring detents, velocity-projected flick transitions, and rubber-band over-drag.
- **Docs URL**: https://boseui.site/components/kinetic-drawer-sheet
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/kinetic-drawer-sheet.json`
- **Registry Manifest**: https://boseui.site/r/kinetic-drawer-sheet.json
- **Key Features**:
  - Two-stage detent snapping (Peek and Full) responsive to vertical pan velocity and displacement.
  - Rubber-band drag elasticity at the top boundary.
  - Explicit button detent switcher for non-gesture pointer and keyboard accessibility.
- **Accessibility**:
  - Implements role='dialog' and aria-modal='true' with Escape key dismissal.
  - Includes a dedicated Expand/Peek button so keyboard users can switch detents without dragging.
  - Disables vertical drag physics when prefers-reduced-motion is enabled.
- **Props**:
  - `triggerLabel` (string, default: "Open Gesture Drawer"): Text rendered inside the drawer trigger button.
  - `title` (string, default: "Multi-Detent Spring Sheet"): Heading title displayed inside the drawer sheet.
  - `stiffness` (number, default: 320): Hooke's Law spring stiffness for sheet entry and detent transitions.
  - `damping` (number, default: 28): Spring damping coefficient controlling sheet settle.
- **Usage Example**:
```tsx
import { KineticDrawerSheet } from "@/components/ui/kinetic-drawer-sheet";

export function Example() {
  return (
    <KineticDrawerSheet
      triggerLabel="Open Gesture Drawer"
      title="Multi-Detent Spring Sheet"
    />
  );
}
```

---

### Kinetic Rolling Counter (`KineticRollingCounter`)
- **Slug**: `kinetic-rolling-counter`
- **Category**: Text
- **Tagline**: Mechanical odometer ticker with vertical 0-9 spring reels.
- **Description**: Mechanical odometer numeric ticker where each digit column spins independently along a vertical 0-9 reel using Hooke's Law springs.
- **Docs URL**: https://boseui.site/components/kinetic-rolling-counter
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/kinetic-rolling-counter.json`
- **Registry Manifest**: https://boseui.site/r/kinetic-rolling-counter.json
- **Key Features**:
  - Independent 0–9 vertical digit reels that roll proportionally to the numeric delta in each place value.
  - Tabular monospace geometry preventing horizontal layout jitter during high-speed increments.
  - Screen-reader live status region paired with aria-hidden visual reels.
- **Accessibility**:
  - Provides an sr-only role='status' live region announcing the complete number cleanly.
  - Marks the 0–9 vertical reel strips with aria-hidden='true' to prevent screen readers from reading all 10 digits per column.
  - Snaps digit reels immediately without vertical travel when prefers-reduced-motion is active.
- **Props**:
  - `defaultValue` (number, default: 1248): Initial non-negative integer displayed on the odometer.
  - `step` (number, default: 17): Amount added or subtracted per stepper click.
  - `stiffness` (number, default: 340): Hooke's Law spring stiffness for vertical digit reel travel.
  - `damping` (number, default: 26): Spring damping coefficient controlling reel settle bounce.
- **Usage Example**:
```tsx
import { KineticRollingCounter } from "@/components/ui/kinetic-rolling-counter";

export function Example() {
  return (
    <KineticRollingCounter defaultValue={1248} step={17} stiffness={340} damping={26} />
  );
}
```

---

### Kinetic Slider (`KineticSlider`)
- **Slug**: `kinetic-slider`
- **Category**: Inputs
- **Tagline**: Velocity-tilted HUD badge and rubber-band boundary over-drag.
- **Description**: Elastic range slider featuring velocity-reactive tooltip inertia, logarithmic rubber-band boundary over-drag, and full keyboard accessibility.
- **Docs URL**: https://boseui.site/components/kinetic-slider
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/kinetic-slider.json`
- **Registry Manifest**: https://boseui.site/r/kinetic-slider.json
- **Key Features**:
  - Real-time drag velocity tracking via Framer Motion useVelocity to tilt the floating value badge.
  - Logarithmic rubber-band resistance when dragging past min or max boundaries.
  - Tactile thumb squash-and-stretch and dynamic rail thickening on pointer capture.
- **Accessibility**:
  - Implements full WAI-ARIA role='slider' with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext.
  - Supports ArrowLeft/Right/Up/Down, PageUp/PageDown (10x step), and Home/End keyboard increments.
  - Disables velocity rotation and rubber-band displacement when prefers-reduced-motion is enabled.
- **Props**:
  - `label` (string, default: "Spring Tension"): Accessible label rendered above the slider rail.
  - `defaultValue` (number, default: 64): Initial numeric value for uncontrolled usage.
  - `min` (number, default: 0): Minimum allowed slider value.
  - `max` (number, default: 100): Maximum allowed slider value.
  - `step` (number, default: 1): Numeric increment step size.
  - `unit` (string, default: "%"): Unit suffix displayed next to the numeric value.
  - `value` (number): Controlled numeric value for the slider
  - `stiffness` (number): Spring tension for kinetic dragging physics
  - `damping` (number): Spring damping coefficient
  - `onChange` ((val: number) => void): Callback fired when slider value changes
- **Usage Example**:
```tsx
import { KineticSlider } from "@/components/ui/kinetic-slider";

export function Example() {
  return (
    <KineticSlider
      label="Spring Stiffness"
      defaultValue={72}
      min={0}
      max={100}
      unit="%"
    />
  );
}
```

---

### Kinetic Step Indicator (`KineticStepIndicator`)
- **Slug**: `kinetic-step-indicator`
- **Category**: Navigation
- **Tagline**: Multi-step workflow stepper with liquid spring connector tubes.
- **Description**: Multi-step workflow progress bar with spring-filled liquid connector tubes, elastic checkmark badges, and direct step jumping.
- **Docs URL**: https://boseui.site/components/kinetic-step-indicator
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/kinetic-step-indicator.json`
- **Registry Manifest**: https://boseui.site/r/kinetic-step-indicator.json
- **Key Features**:
  - Origin-left scaleX spring connector tubes that fill and drain smoothly between step nodes.
  - Direct click-to-jump step buttons paired with sequential Prev and Next controls.
  - Elastic scale pulse on the currently active step node.
- **Accessibility**:
  - Marks the active step button with aria-current='step' and descriptive step aria-labels.
  - Supports both direct Tab selection on step nodes and sequential Prev/Next buttons.
  - Disables connector tube spring oscillation when prefers-reduced-motion is active.
- **Props**:
  - `steps` (StepSpec[]): Array of workflow steps containing id, label, and caption.
  - `defaultStep` (number, default: 1): Initial 0-based active step index.
  - `stiffness` (number, default: 320): Spring stiffness coefficient for connector tube fill and node scale.
  - `damping` (number, default: 25): Spring damping coefficient controlling connector fill settle.
- **Usage Example**:
```tsx
import { KineticStepIndicator } from "@/components/ui/kinetic-step-indicator";

export function Example() {
  return (
    <KineticStepIndicator defaultStep={1} stiffness={320} damping={25} />
  );
}
```

---

### Kinetic Swipe Button (`KineticSwipeButton`)
- **Slug**: `kinetic-swipe-button`
- **Category**: Buttons
- **Tagline**: Slide-to-execute actuator track with elastic spring recoil.
- **Description**: Slide-to-execute actuator switch with a spring-tethered thumb that locks upon crossing the completion threshold or recoils elastically.
- **Docs URL**: https://boseui.site/components/kinetic-swipe-button
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/kinetic-swipe-button.json`
- **Registry Manifest**: https://boseui.site/r/kinetic-swipe-button.json
- **Key Features**:
  - Pointer-captured horizontal actuator thumb coupled to a Hooke's Law spring.
  - Snaps into locked confirmation when dragged past the threshold ratio or recoils smoothly to origin if released early.
  - Includes a one-click reset state after confirmation.
- **Accessibility**:
  - Thumb actuator is a semantic button supporting Enter and Space keys for single-keystroke completion.
  - Respects prefers-reduced-motion by disabling continuous spring interpolation.
  - Maintains high-contrast focus-visible ring indicators.
- **Props**:
  - `label` (string, default: "Slide to Deploy Production"): Prompt label displayed along the actuator track.
  - `completedLabel` (string, default: "Deployment Triggered"): Confirmation label displayed once the swipe completes.
  - `threshold` (number, default: 0.78): Track fraction (0.5 to 0.95) required to lock confirmation.
  - `stiffness` (number, default: 360): Spring stiffness coefficient for thumb travel and recoil.
  - `damping` (number, default: 26): Spring damping coefficient controlling thumb snap-back.
  - `onComplete` (() => void): Callback executed when the swipe handle passes completion threshold
- **Usage Example**:
```tsx
import { KineticSwipeButton } from "@/components/ui/kinetic-swipe-button";

export function Example() {
  return (
    <KineticSwipeButton
      label="Slide to Deploy Production"
      completedLabel="Deployment Triggered"
      threshold={0.78}
    />
  );
}
```

---

### Lava Lamp (`LavaLamp`)
- **Slug**: `lava-lamp`
- **Category**: Backgrounds
- **Tagline**: WebGL SDF metaballs with smooth-minimum liquid tension and 3D rim glow.
- **Description**: True WebGL signed distance field (SDF) metaball lava lamp shader using polynomial smooth-minimum (smin) surface tension blending, 3D specular/Fresnel subsurface rim lighting, and pointer thermal attraction.
- **Docs URL**: https://boseui.site/components/lava-lamp
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/lava-lamp.json`
- **Registry Manifest**: https://boseui.site/r/lava-lamp.json
- **Key Features**:
  - True polynomial smooth-minimum (`smin`) SDF blending with adjustable liquid surface tension.
  - Finite-difference 3D hemisphere normal reconstruction for glassy specular highlights and Fresnel rim glow.
  - Buoyant thermal wax cycle coupled with a gentle pointer heat attractor.
- **Accessibility**:
  - Marks the WebGL metaball canvas with `aria-hidden='true'`.
  - Interactive Magma, Cyber Acid, and Ultraviolet color presets are keyboard accessible.
  - Dark translucent HUD container preserves legible contrast over bright molten blobs.
- **Props**:
  - `blobCount` (number, default: 7): Number of buoyant wax metaballs inside the vessel (3 to 12).
  - `primaryColor` (string, default: "#FF3B00"): Core molten wax hex color.
  - `secondaryColor` (string, default: "#FFB800"): Subsurface Fresnel rim and thermal highlight hex color.
  - `backgroundColor` (string, default: "#0F071E"): Ambient vessel background hex color.
  - `speed` (number, default: 1.0): Thermal buoyancy convection speed multiplier.
  - `viscosity` (number, default: 0.45): Smooth-minimum (`smin`) surface tension blending factor (0.15 to 0.85).
  - `children` (React.ReactNode): Optional foreground UI rendered above the lava lamp shader.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { LavaLamp } from "@/components/ui/lava-lamp";

export function Example() {
  return (
    <LavaLamp
      blobCount={7}
      primaryColor="#FF3B00"
      secondaryColor="#FFB800"
      backgroundColor="#0F071E"
      speed={1.0}
      viscosity={0.45}
    />
  );
}
```

---

### Liquid Glass Card (`LiquidGlassCard`)
- **Slug**: `liquid-glass-card`
- **Category**: Cards
- **Tagline**: Apple-inspired frosted glass card with 3D cursor tilt and chromatic refraction.
- **Description**: Ultra-premium translucent frosted glass card featuring dynamic specular highlight cursor tracking, 3D perspective tilt, chromatic edge refraction, double-layer backdrop blur, and tactile click feedback.
- **Docs URL**: https://boseui.site/components/liquid-glass-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/liquid-glass-card.json`
- **Registry Manifest**: https://boseui.site/r/liquid-glass-card.json
- **Key Features**:
  - Continuous 3D perspective tilt reacting to cursor coordinates with spring smoothing.
  - Dynamic radial specular glare tracking cursor light source across card surface.
  - Chromatic prismatic refraction along card perimeter borders.
  - Double-layer backdrop blur creating rich depth over ambient saturated backdrops.
  - Tactile spring click compression and customizable frost density and tilt sensitivity.
- **Accessibility**:
  - Retains high contrast content legibility across bright and dark backgrounds.
  - Suppresses aggressive 3D perspective tilts when `prefers-reduced-motion` is active.
  - Accessible focus outlines when keyboard navigated.
- **Props**:
  - `title` (string, default: "Apple Card Titanium"): Default headline or card title.
  - `subtitle` (string, default: "Mastercard • 7492 • World Elite"): Secondary descriptive text or card subtext.
  - `blurStrength` (number, default: 24): Backdrop blur radius in pixels.
  - `tiltFactor` (number, default: 1.0): Multiplier determining sensitivity of 3D tilt response.
  - `chromaticEdge` (boolean, default: true): Whether to render chromatic rainbow refraction along card borders.
  - `children` (React.ReactNode): Custom content rendered inside the frosted glass card container.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { LiquidGlassCard } from "@/components/ui/LiquidGlassCard";

export function Example() {
  return (
    <LiquidGlassCard
      title="Titanium Card"
      tiltFactor={1.2}
      chromaticEdge={true}
    >
      <div className="p-4">
        <h3 className="text-lg font-bold text-white">Apple Card</h3>
        <p className="text-xs text-white/80">3% Daily Cash Back</p>
      </div>
    </LiquidGlassCard>
  );
}
```

---

### Liquid Gradient Blob (`LiquidGradientBlob`)
- **Slug**: `liquid-gradient-blob`
- **Category**: Backgrounds
- **Tagline**: SVG gooey filter metaballs that merge like liquid lava.
- **Description**: Organic metaball background powered by an SVG `feGaussianBlur` + `feColorMatrix` alpha-threshold gooey filter where orbiting and cursor-tracked blobs fuse seamlessly.
- **Docs URL**: https://boseui.site/components/liquid-gradient-blob
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/liquid-gradient-blob.json`
- **Registry Manifest**: https://boseui.site/r/liquid-gradient-blob.json
- **Key Features**:
  - Uses an inline SVG `<feGaussianBlur>` + `<feColorMatrix>` filter (`0 0 0 24 -10`) for sharp surface-tension merging.
  - Combines autonomous orbiting blobs with a spring-loaded cursor-following metaball.
  - Customizable blob `colors`, `speed`, and `gooeyIntensity` radius.
- **Accessibility**:
  - Marks the hidden SVG filter definition and decorative blob layer with `aria-hidden='true'`.
  - Uses `useId()` to guarantee unique SVG filter IDs when multiple instances are mounted.
  - Maintains high foreground text contrast.
- **Props**:
  - `colors` (string[], default: ["#8B5CF6", "#EC4899", "#06B6D4", "#3B82F6"]): Array of colors applied to the metaball blobs.
  - `speed` (number, default: 1): Orbit animation speed multiplier.
  - `gooeyIntensity` (number, default: 22): Standard deviation for the `feGaussianBlur` filter.
  - `children` (React.ReactNode): Optional foreground content rendered above the blobs.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { LiquidGradientBlob } from "@/components/ui/liquid-gradient-blob";

export function Example() {
  return (
    <LiquidGradientBlob
      colors={["#8B5CF6", "#EC4899", "#06B6D4", "#3B82F6"]}
      speed={1}
      gooeyIntensity={22}
    />
  );
}
```

---

### Liquid Pill Tabs (`LiquidPillTabs`)
- **Slug**: `liquid-pill-tabs`
- **Category**: Navigation
- **Tagline**: Dual-layer spring-projected active and hover pill indicators.
- **Description**: Segmented navigation tab bar with dual-layer spring layout projection for active and hover indicator pills and roving WAI-ARIA keyboard control.
- **Docs URL**: https://boseui.site/components/liquid-pill-tabs
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/liquid-pill-tabs.json`
- **Registry Manifest**: https://boseui.site/r/liquid-pill-tabs.json
- **Key Features**:
  - Coupled dual-layer layoutId projection separating the magnetic hover ghost pill from the active selection pill.
  - Unique instance-scoped layout IDs via React useId so multiple tab bars on the same page never collide.
  - Roving tabIndex and arrow-key selection following WAI-ARIA Tabs Authoring Practices.
- **Accessibility**:
  - Implements role='tablist' and role='tab' with aria-selected and roving tabIndex.
  - Supports ArrowLeft, ArrowRight, Home, and End keys to cycle and activate tabs.
  - Instantly snaps pill indicators without motion when prefers-reduced-motion is enabled.
- **Props**:
  - `tabs` (LiquidTabItem[]): Array of tab items containing id, label, and optional badge count.
  - `defaultActiveTab` (string, default: "preview"): Initial active tab ID for uncontrolled usage.
  - `stiffness` (number, default: 380): Hooke's Law spring stiffness for active pill projection.
  - `damping` (number, default: 26): Spring damping coefficient for active pill projection.
  - `activeTab` (string): Controlled identifier for the active tab
  - `onChange` ((tabId: string) => void): Callback fired when active tab selection changes
- **Usage Example**:
```tsx
import { LiquidPillTabs } from "@/components/ui/liquid-pill-tabs";

export function Example() {
  return (
    <LiquidPillTabs
      tabs={[
        { id: "preview", label: "Preview" },
        { id: "physics", label: "Spring Config", badge: "3" },
        { id: "code", label: "Source" },
      ]}
    />
  );
}
```

---

### Live Card Form (`LiveCardForm`)
- **Slug**: `live-card-form`
- **Category**: Inputs
- **Tagline**: Photorealistic 3D credit card with auto-flip CVC focus and Luhn validation.
- **Description**: Interactive payment checkout form paired with a photorealistic 3D credit card that automatically flips 180° when CVC is focused, with brand detection and Luhn algorithm validation.
- **Docs URL**: https://boseui.site/components/live-card-form
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/live-card-form.json`
- **Registry Manifest**: https://boseui.site/r/live-card-form.json
- **Key Features**:
  - Photorealistic 3D credit card with EMV gold chip, wireless antenna, and realistic holographic sheen.
  - Automatic 180° 3D flip (`rotateY(180deg)`) revealing magnetic stripe and signature strip when focusing CVC.
  - Real-time card brand detection for Visa, Mastercard, American Express, and Discover with dynamic styling.
  - Real-time card number masking and client-side Luhn checksum algorithm validation indicator.
  - Interactive stage preset fillers for instant demo testing and flipping inspection.
- **Accessibility**:
  - Fully accessible HTML5 form inputs with descriptive labels, autocomplete, and ARIA statuses.
  - Keyboard-focusable inputs and interactive 3D card preview with Space/Enter toggle.
  - Reduced motion support maintains input responsiveness without disorienting 3D animations.
- **Props**:
  - `defaultAmount` (string, default: '$89.00'): Default transaction amount displayed on the payment CTA button.
  - `onSuccess` (() => void): Callback invoked after successful simulated card payment authorization.
  - `className` (string): Optional CSS classes to apply to the root container.
- **Usage Example**:
```tsx
import { LiveCardForm } from "@/components/ui/LiveCardForm";

export function Example() {
  return (
    <div className="w-full">
      <LiveCardForm defaultAmount="$89.00" />
    </div>
  );
}
```

---

### Magnetic Breadcrumb (`MagneticBreadcrumb`)
- **Slug**: `magnetic-breadcrumb`
- **Category**: Navigation
- **Tagline**: Breadcrumb navigation trail with spring-projected hover capsule.
- **Description**: Hierarchical breadcrumb navigation trail with a spring-projected hover capsule and subtle vertical lift across path segments.
- **Docs URL**: https://boseui.site/components/magnetic-breadcrumb
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/magnetic-breadcrumb.json`
- **Registry Manifest**: https://boseui.site/r/magnetic-breadcrumb.json
- **Key Features**:
  - Shared layoutId hover pill that glides smoothly between path segments using Hooke's Law springs.
  - Instance-scoped layout IDs via React useId for multi-instance page safety.
  - Semantic ordered list structure with active segment switching.
- **Accessibility**:
  - Wraps an ordered list (<ol>) inside a <nav aria-label='Breadcrumb'> landmark.
  - Marks the active path segment with aria-current='page' and separators with aria-hidden='true'.
  - Disables vertical lift and pill glide animations when prefers-reduced-motion is enabled.
- **Props**:
  - `items` (BreadcrumbSegment[]): Ordered array of breadcrumb path segments with id and label.
  - `stiffness` (number, default: 380): Hooke's Law spring stiffness for the sliding hover capsule.
  - `damping` (number, default: 26): Spring damping coefficient controlling capsule oscillation.
  - `onSelect` ((item: BreadcrumbItem) => void): Callback fired when a breadcrumb node is clicked
- **Usage Example**:
```tsx
import { MagneticBreadcrumb } from "@/components/ui/magnetic-breadcrumb";

export function Example() {
  return (
    <MagneticBreadcrumb stiffness={380} damping={26} />
  );
}
```

---

### Magnetic Button (`MagneticButton`)
- **Slug**: `magnetic-button`
- **Category**: Buttons
- **Tagline**: Dual-layer Hooke's Law spring attraction for high-impact CTAs.
- **Description**: Tactile button with dual-layer spring attraction that gravitates toward the pointer with configurable mass, stiffness, and damping.
- **Docs URL**: https://boseui.site/components/magnetic-button
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/magnetic-button.json`
- **Registry Manifest**: https://boseui.site/r/magnetic-button.json
- **Key Features**:
  - Dual-layer spring solver displacing both button frame and inner label for realistic parallax depth.
  - Zero React re-renders during pointer movement via Framer Motion MotionValues.
  - Minimal monochrome surface variants supporting both light and dark modes.
- **Accessibility**:
  - Renders a semantic native <button> element with full Enter and Space keyboard activation.
  - High-contrast 2px focus-visible ring for keyboard navigation.
  - Respects prefers-reduced-motion automatically via Framer Motion's useReducedMotion() hook.
- **Props**:
  - `strength` (number, default: 0.35): Multiplier controlling how strongly the button gravitates toward the pointer (0.1 to 1.0).
  - `stiffness` (number, default: 180): Spring stiffness coefficient controlling snap responsiveness.
  - `damping` (number, default: 15): Oscillation damping coefficient preventing excessive bounce on pointer exit.
  - `mass` (number, default: 0.2): Simulated physical mass of the button element.
  - `variant` ("primary" | "secondary" | "outline" | "glow", default: "primary"): Visual surface treatment preset.
  - `size` ("sm" | "md" | "lg", default: "md"): Padding, typography, and border-radius scale.
- **Usage Example**:
```tsx
import { MagneticButton } from "@/components/ui/magnetic-button";
import { Sparkles } from "lucide-react";

export function Example() {
  return (
    <MagneticButton variant="primary" size="lg" strength={0.4}>
      <Sparkles className="h-4 w-4" />
      <span>Deploy Kinetic UI</span>
    </MagneticButton>
  );
}
```

---

### Magnetic Popover Menu (`MagneticPopoverMenu`)
- **Slug**: `magnetic-popover-menu`
- **Category**: Overlays
- **Tagline**: Floating command popover with shared-layout magnetic row highlight.
- **Description**: Floating command popover menu with origin-scaled spring entry, a shared-layout magnetic row highlight, and keyboard arrow navigation.
- **Docs URL**: https://boseui.site/components/magnetic-popover-menu
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/magnetic-popover-menu.json`
- **Registry Manifest**: https://boseui.site/r/magnetic-popover-menu.json
- **Key Features**:
  - Origin-top-left Hooke's Law spring scale and elevation entry animation.
  - Shared layoutId highlight pill that glides smoothly between menu items on pointer hover or keyboard focus.
  - Automatic outside-click and Escape key dismissal.
- **Accessibility**:
  - Implements role='menu' and role='menuitem' with aria-haspopup='menu' and aria-expanded on the trigger.
  - Supports ArrowUp and ArrowDown keyboard navigation across menu items.
  - Disables scale and highlight glide animations when prefers-reduced-motion is active.
- **Props**:
  - `triggerLabel` (string, default: "Quick Actions"): Text label displayed inside the popover trigger button.
  - `items` (PopoverCommandItem[]): Array of command items with id, label, shortcut, and icon.
  - `stiffness` (number, default: 380): Spring stiffness coefficient for popover entry and highlight glide.
  - `damping` (number, default: 26): Spring damping coefficient controlling popover settle.
  - `onSelect` ((item: MenuItem) => void): Callback fired when an action item is selected
- **Usage Example**:
```tsx
import { MagneticPopoverMenu } from "@/components/ui/magnetic-popover-menu";

export function Example() {
  return (
    <MagneticPopoverMenu triggerLabel="Quick Actions" stiffness={380} damping={26} />
  );
}
```

---

### Matrix Rain (`MatrixRain`)
- **Slug**: `matrix-rain`
- **Category**: Backgrounds
- **Tagline**: Incandescent phosphor glyph cascades with live character mutation.
- **Description**: Canvas 2D digital rain cascade with incandescent white leading glyphs, phosphor trail decay, and real-time character mutation across Katakana, Binary, and Hexadecimal character sets.
- **Docs URL**: https://boseui.site/components/matrix-rain
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/matrix-rain.json`
- **Registry Manifest**: https://boseui.site/r/matrix-rain.json
- **Key Features**:
  - Incandescent white lead glyph with bloom shadow and multi-step phosphor trail attenuation.
  - Switchable Katakana, Binary, and Hexadecimal character pools with stochastic mid-air glyph mutation.
  - DevicePixelRatio-aware ResizeObserver loop for razor-sharp monospace typography at any viewport size.
- **Accessibility**:
  - Decorative <canvas> is marked aria-hidden='true' so screen readers bypass background glyph streams.
  - Interactive HUD buttons provide explicit aria-label attributes and high-contrast focus rings.
- **Props**:
  - `color` (string, default: "#10B981"): Primary phosphor trail color in hex format.
  - `speed` (number, default: 1.0): Vertical stream velocity multiplier.
  - `density` (number, default: 1.0): Multiplier controlling active column count across the viewport.
  - `charset` ("katakana" | "binary" | "hex", default: "katakana"): Glyph character pool rendered inside falling columns.
  - `fontSize` (number, default: 15): Monospace glyph size in pixels.
  - `children` (React.ReactNode): Optional foreground overlay content rendered above the rain canvas.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { MatrixRain } from "@/components/ui/MatrixRain";

export function Example() {
  return (
    <MatrixRain color="#10B981" charset="katakana" speed={1.0} density={1.1}>
      <div className="flex min-h-[520px] items-center justify-center p-8">
        <div className="rounded-2xl border border-emerald-500/30 bg-black/75 p-8 text-center backdrop-blur-md">
          <h2 className="font-mono text-3xl font-bold text-white">
            NEURAL UPLINK ACTIVE
          </h2>
          <p className="mt-2 font-mono text-sm text-emerald-400">
            Encrypted telemetry stream synchronized at 60Hz
          </p>
        </div>
      </div>
    </MatrixRain>
  );
}
```

---

### Mesh Gradient (`MeshGradient`)
- **Slug**: `mesh-gradient`
- **Category**: Backgrounds
- **Tagline**: Apple Music style fluid multi-point mesh gradient.
- **Description**: Apple Music and macOS-inspired fluid multi-point mesh gradient where 5 color nodes orbit on independent trajectories and blend seamlessly.
- **Docs URL**: https://boseui.site/components/mesh-gradient
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/mesh-gradient.json`
- **Registry Manifest**: https://boseui.site/r/mesh-gradient.json
- **Key Features**:
  - Blends 5 orbiting color control points using high-radius Gaussian blur and saturation boost.
  - Includes Apple Music, Sequoia, and Obsidian palette presets in the interactive preview.
  - Optional micro-grain overlay to prevent color banding on 8-bit displays.
- **Accessibility**:
  - Marks decorative mesh control points and grain layers with `aria-hidden='true'`.
  - Maintains readable foreground typography with subtle backdrop blur badges.
  - Palette switcher buttons support keyboard navigation.
- **Props**:
  - `colors` (string[], default: ["#FF2D55", "#5856D6", "#FF9500", "#AF52DE", "#00C7BE"]): Array of 4 to 5 hex colors for the mesh nodes.
  - `speed` (number, default: 1): Orbit animation speed multiplier.
  - `blur` (number, default: 70): Gaussian blur radius in pixels used to fuse the color points.
  - `grain` (boolean, default: true): Overlays a subtle film grain texture.
  - `children` (React.ReactNode): Optional foreground content rendered above the mesh.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { MeshGradient } from "@/components/ui/mesh-gradient";

export function Example() {
  return (
    <MeshGradient
      colors={["#FF2D55", "#5856D6", "#FF9500", "#AF52DE", "#00C7BE"]}
      speed={1}
      blur={70}
    />
  );
}
```

---

### Modal Popup (`ModalPopup`)
- **Slug**: `modal-popup`
- **Category**: Overlays
- **Tagline**: Spring-animated dialog popup with backdrop blur and keyboard support.
- **Description**: Animated popup modal dialog with spring scale transitions, top-level portal rendering, danger/confirm variants, and Escape dismissal.
- **Docs URL**: https://boseui.site/components/modal-popup
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/modal-popup.json`
- **Registry Manifest**: https://boseui.site/r/modal-popup.json
- **Key Features**:
  - Renders into document.body via React portal at z-[9999] with background scroll locking.
  - Supports sm, md, and lg width presets plus default and danger confirmation variants.
  - Works both controlled and uncontrolled with custom trigger and optional hideFooter.
- **Accessibility**:
  - Uses semantic role='dialog' and aria-modal='true'.
  - Dismisses immediately when pressing Escape or clicking outside the dialog.
  - Disables scale/translate motion when prefers-reduced-motion is enabled.
- **Props**:
  - `open` (boolean): Controlled open state.
  - `defaultOpen` (boolean, default: false): Initial open state when used uncontrolled.
  - `onOpenChange` ((open: boolean) => void): Callback fired when the modal open state changes.
  - `title` (string, default: "Confirm Deployment"): Primary heading text inside the modal dialog.
  - `description` (string): Supporting description text below the title.
  - `size` ("sm" | "md" | "lg", default: "md"): Maximum width preset of the modal card.
  - `variant` ("default" | "danger", default: "default"): Visual style for the primary confirmation button.
  - `triggerLabel` (string, default: "Open Popup"): Label for the default trigger button.
  - `confirmLabel` (string, default: "Confirm"): Text label for the primary action button.
  - `cancelLabel` (string, default: "Cancel"): Text label for the cancel button.
  - `hideFooter` (boolean, default: false): Hides default Cancel/Confirm footer buttons when rendering a custom form.
  - `onConfirm` (() => void): Callback executed when the user clicks the confirm button.
  - `trigger` (React.ReactNode): Custom trigger element used to toggle modal open state
- **Usage Example**:
```tsx
import { ModalPopup } from "@/components/ui/modal-popup";

export function Example() {
  return (
    <ModalPopup
      title="Publish Release v1.2"
      description="Are you sure you want to publish this release to the public registry?"
      triggerLabel="Publish Release"
      confirmLabel="Publish Now"
    />
  );
}
```

---

### Morphing Action Button (`MorphingActionButton`)
- **Slug**: `morphing-action-button`
- **Category**: Buttons
- **Tagline**: Stateful width-morphing pill button with spring layout projection.
- **Description**: Multi-phase stateful pill button that morphs its bounding width across Idle, Compiling, and Published states using spring layout projection.
- **Docs URL**: https://boseui.site/components/morphing-action-button
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/morphing-action-button.json`
- **Registry Manifest**: https://boseui.site/r/morphing-action-button.json
- **Key Features**:
  - Seamless bounding-width interpolation between Idle, Loading, Success, and Error states via Framer Motion layout.
  - Directional vertical label swap powered by AnimatePresence mode='popLayout'.
  - Optional harmonic error shake state.
- **Accessibility**:
  - Uses aria-live='polite' so screen readers announce state transitions as they occur.
  - Preserves keyboard focus across all state transitions.
  - Disables width spring oscillation and horizontal shake when prefers-reduced-motion is enabled.
- **Props**:
  - `idleLabel` (string, default: "Publish Registry"): Button text rendered in the resting idle state.
  - `loadingLabel` (string, default: "Compiling..."): Button text rendered during the async loading phase.
  - `successLabel` (string, default: "Published v2.4"): Button text rendered when the action succeeds.
  - `stiffness` (number, default: 380): Spring stiffness coefficient for pill width projection.
  - `damping` (number, default: 26): Spring damping coefficient for pill width projection.
  - `simulateError` (boolean): Whether clicking triggers simulated error state for UI verification
- **Usage Example**:
```tsx
import { MorphingActionButton } from "@/components/ui/morphing-action-button";

export function Example() {
  return (
    <MorphingActionButton
      idleLabel="Publish Registry"
      loadingLabel="Compiling..."
      successLabel="Published v2.4"
    />
  );
}
```

---

### Morphing Dialog (`MorphingDialog`)
- **Slug**: `morphing-dialog`
- **Category**: Overlays
- **Tagline**: Shared-element origin morphing modal with elastic drag-to-dismiss.
- **Description**: Origin-morphing modal overlay that expands seamlessly from its trigger button bounding box with spring layout projection and vertical drag-to-dismiss.
- **Docs URL**: https://boseui.site/components/morphing-dialog
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/morphing-dialog.json`
- **Registry Manifest**: https://boseui.site/r/morphing-dialog.json
- **Key Features**:
  - Seamless bounding-box morphing between compact trigger and modal dialog via Framer Motion layoutId.
  - Elastic vertical drag-to-dismiss gesture with velocity and displacement thresholds.
  - Automatic keyboard focus transfer into the dialog and restoration to the origin trigger on close.
- **Accessibility**:
  - Implements role='dialog', aria-modal='true', aria-labelledby, and aria-describedby.
  - Supports Escape key dismissal and restores focus to the trigger button upon closing.
  - Disables layout morphing and drag gestures when prefers-reduced-motion is enabled.
- **Props**:
  - `triggerTitle` (string, default: "Inspect Spring Telemetry"): Primary heading displayed inside the origin trigger button.
  - `triggerSubtitle` (string, default: "Click to expand shared-layout surface"): Supporting subtitle displayed inside the origin trigger button.
  - `dialogTitle` (string, default: "Hooke's Law Telemetry Architecture"): Heading text displayed inside the expanded modal dialog.
  - `stiffness` (number, default: 290): Hooke's Law spring stiffness for shared layout projection.
  - `damping` (number, default: 26): Spring damping coefficient for shared layout projection.
  - `dialogDescription` (string): Expanded description text within the dialog modal
  - `open` (boolean): Controlled open/closed state of the dialog
  - `onOpenChange` ((open: boolean) => void): Callback fired when dialog open state toggles
- **Usage Example**:
```tsx
import { MorphingDialog } from "@/components/ui/morphing-dialog";

export function Example() {
  return (
    <MorphingDialog
      triggerTitle="Inspect Spring Telemetry"
      triggerSubtitle="Click to morph into modal"
      dialogTitle="Hooke's Law Telemetry Architecture"
    />
  );
}
```

---

### Morphing Mega Menu (`MorphingMegaMenu`)
- **Slug**: `morphing-mega-menu`
- **Category**: Navigation
- **Tagline**: Stripe-inspired morphing popover navbar with synchronized spring caret.
- **Description**: Stripe-style floating mega menu popover that fluidly glides across navigation links with spring physics, morphing width, height, and caret position synchronously.
- **Docs URL**: https://boseui.site/components/morphing-mega-menu
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/morphing-mega-menu.json`
- **Registry Manifest**: https://boseui.site/r/morphing-mega-menu.json
- **Key Features**:
  - Single floating popover container that glides smoothly across nav items on hover or focus.
  - Dynamic width, height, and horizontal offset calculation with Hooke's Law spring physics.
  - Synchronized sliding top caret pointing directly to the active navigation item.
  - Crossfading multi-column panels for Products, Solutions, and Developer tooling.
  - Interactive stage controls to inspect stiffness, damping, and force-pinned previews.
- **Accessibility**:
  - Uses accessible ARIA menubar and role attributes with aria-expanded status.
  - Supports keyboard navigation and focus triggers across all nav links and panels.
  - Graceful fallback without layout jumping when JavaScript or motion is reduced.
- **Props**:
  - `stiffness` (number, default: 380): Spring stiffness coefficient for the morphing container and caret translation.
  - `damping` (number, default: 30): Spring damping coefficient governing oscillation decay.
  - `className` (string): Optional CSS classes to append to the stage container.
  - `embedded` (boolean): Whether menu renders embedded within container rather than fixed top
- **Usage Example**:
```tsx
import { MorphingMegaMenu } from "@/components/ui/MorphingMegaMenu";

export function Example() {
  return (
    <div className="w-full">
      <MorphingMegaMenu stiffness={380} damping={30} />
    </div>
  );
}
```

---

### Multi-Select Tag Input (`MultiSelectTagInput`)
- **Slug**: `multi-select-tag-input`
- **Category**: Inputs
- **Tagline**: Tag & chip input with suggestions and keyboard shortcuts.
- **Description**: Interactive tag and chip input with live autocomplete suggestions, custom tag creation via Enter or comma, Backspace removal, and max-tag limits.
- **Docs URL**: https://boseui.site/components/multi-select-tag-input
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/multi-select-tag-input.json`
- **Registry Manifest**: https://boseui.site/r/multi-select-tag-input.json
- **Key Features**:
  - Spring-animated tag pills with popLayout transitions when adding or removing items.
  - Supports Enter and comma (,) to create custom tags and Backspace to remove the last tag.
  - Duplicate prevention, max-tag counter, and filterable suggestion dropdown.
- **Accessibility**:
  - Uses WAI-ARIA combobox and listbox roles with aria-expanded and aria-controls.
  - Each tag includes an accessible remove button with an explicit aria-label.
  - Respects prefers-reduced-motion for tag entry and exit animations.
- **Props**:
  - `suggestions` (TagSuggestion[]): Array of suggested tags ({ value, label, category }) shown in the dropdown.
  - `value` (string[]): Controlled array of selected tag values.
  - `defaultValue` (string[], default: ["react", "typescript", "framer-motion"]): Initial selected tag values for uncontrolled mode.
  - `onChange` ((tags: string[]) => void): Callback fired whenever selected tags are added or removed.
  - `placeholder` (string, default: "Add tag or select..."): Placeholder text shown when no tags are selected.
  - `label` (string, default: "Tech Stack Tags"): Optional label displayed above the tag container.
  - `maxTags` (number, default: 8): Maximum number of tags allowed before the input locks.
  - `allowCustomTags` (boolean, default: true): Allows users to create custom tags not present in suggestions.
  - `disabled` (boolean, default: false): Disables adding or removing tags.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { MultiSelectTagInput } from "@/components/ui/multi-select-tag-input";

export function Example() {
  return (
    <MultiSelectTagInput
      label="Project Topics"
      maxTags={6}
      allowCustomTags
      onChange={(tags) => console.log("Selected tags:", tags)}
    />
  );
}
```

---

### Multiplayer Cursors (`MultiplayerCursors`)
- **Slug**: `multiplayer-cursors`
- **Category**: Motion
- **Tagline**: Figma-style real-time multiplayer canvas with animated cursors and live speech bubbles.
- **Description**: Figma-style real-time collaboration canvas with animated multiplayer cursor pointers, user name tags, color badges, interactive live cursor chat bubbles, and click ripple wave broadcasts.
- **Docs URL**: https://boseui.site/components/multiplayer-cursors
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/multiplayer-cursors.json`
- **Registry Manifest**: https://boseui.site/r/multiplayer-cursors.json
- **Key Features**:
  - Authentic Figma-geometry SVG cursor arrows paired with colored user name badges.
  - Integrated live cursor chat bubble broadcasts with spring scale and fade animations.
  - Click wave propagation displaying expanding ripple rings from pointer interactions.
  - Simulated autonomous collaborator wander motion with pause and resume toggles.
  - Instant collaborator addition and customizable presence status indicators.
- **Accessibility**:
  - Announces presence joined and chat message broadcasts for screen reader users via aria-live.
  - Supports keyboard shortcut triggers and accessible input forms for sending chat messages.
  - Respects reduced-motion preferences by turning off wandering trajectories.
- **Props**:
  - `initialCollaborators` (Collaborator[]): Array of collaborator objects containing id, name, color, coordinates, and messages.
  - `showGrid` (boolean, default: true): Whether to render a Figma-style radial dot grid background.
  - `className` (string): Additional CSS classes to apply to the root container.
  - `overlayOnly` (boolean): Render cursors as an transparent overlay without outer card container
- **Usage Example**:
```tsx
import { MultiplayerCursors } from "@/components/ui/MultiplayerCursors";

export function Example() {
  return (
    <MultiplayerCursors
      showGrid={true}
      initialCollaborators={[
        {
          id: "user-1",
          name: "Amara Okafor",
          color: "#8b5cf6",
          x: 35,
          y: 40,
          message: "Reviewing the payment flows",
          state: "active",
        },
      ]}
    />
  );
}
```

---

### Now Playing Waveform (`NowPlayingWaveform`)
- **Slug**: `now-playing-waveform`
- **Category**: Motion
- **Tagline**: Spotify-inspired media player with real-time reactive dancing waveform bars.
- **Description**: Spotify-style music player featuring dancing multi-octave equalizer frequency bars, spinning vinyl cover artwork, scrubbable progress bar with hover time tooltip, and playback controls.
- **Docs URL**: https://boseui.site/components/now-playing-waveform
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/now-playing-waveform.json`
- **Registry Manifest**: https://boseui.site/r/now-playing-waveform.json
- **Key Features**:
  - 32 reactive audio equalizer bars oscillating dynamically to simulate real-time audio playback.
  - Rotating vinyl sleeve simulation with dynamic track-specific background glow halos.
  - Scrubbable timeline with precision cursor hover tooltip and simulated playback progression.
  - Comprehensive media controls: Play/Pause, Next/Prev, Shuffle, and 3-state Repeat.
  - Quick track switcher allowing seamless preview of different music genres and color themes.
- **Accessibility**:
  - Full semantic button labeling with dynamic play/pause state communication.
  - Scrubber input accessible via click, drag, and standard volume sliders.
  - Equalizer animation gracefully responds to paused states without layout shifts.
- **Props**:
  - `tracks` (TrackItem[]): Array of music track objects with metadata, colors, and duration.
  - `initialPlaying` (boolean, default: true): Whether the audio playback visualizer starts in active playing state.
  - `className` (string): Optional custom CSS classes for the container wrapper.
- **Usage Example**:
```tsx
import { NowPlayingWaveform } from "@/components/ui/now-playing-waveform";

export function Example() {
  return (
    <NowPlayingWaveform
      initialPlaying={true}
    />
  );
}
```

---

### Ocean Waves (`OceanWaves`)
- **Slug**: `ocean-waves`
- **Category**: Backgrounds
- **Tagline**: Multi-harmonic parallax ocean swells with subsurface glow.
- **Description**: Multi-layered rolling ocean waves rendered on Canvas 2D using multi-harmonic trochoidal wave equations, translucent subsurface ridge scattering, and shimmering crest foam highlights.
- **Docs URL**: https://boseui.site/components/ocean-waves
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/ocean-waves.json`
- **Registry Manifest**: https://boseui.site/r/ocean-waves.json
- **Key Features**:
  - 5+ stacked parallax wave layers computed via 3-harmonic sine and cosine superposition.
  - Translucent subsurface turquoise ridge glow with depth-graded ocean color attenuation.
  - Shimmering white crest foam lines and dynamic peak sparkles along breaking wave ridges.
- **Accessibility**:
  - Marks decorative wave canvas with `aria-hidden='true'`.
  - Maintains accessible contrast over dark abyssal gradients for hero typography and controls.
  - Interactive swell and foam controls are keyboard accessible.
- **Props**:
  - `waveCount` (number, default: 5): Number of stacked parallax ocean wave layers (3 to 9).
  - `amplitude` (number, default: 28): Peak vertical wave height in pixels.
  - `frequency` (number, default: 0.008): Horizontal wave frequency in radians per pixel.
  - `speed` (number, default: 1.0): Animation speed multiplier for wave propagation.
  - `oceanColor` (string, default: "#0284C7"): Base hex color used to compute subsurface crest and deep water gradients.
  - `foam` (boolean, default: true): Toggles shimmering white foam lines and peak sparkles along wave crests.
  - `children` (React.ReactNode): Optional foreground UI rendered above the ocean waves.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { OceanWaves } from "@/components/ui/ocean-waves";

export function Example() {
  return (
    <OceanWaves
      waveCount={5}
      amplitude={28}
      frequency={0.008}
      speed={1.0}
      oceanColor="#0284C7"
      foam
    />
  );
}
```

---

### Parallax Tilt Card (`ParallaxTiltCard`)
- **Slug**: `parallax-tilt-card`
- **Category**: Cards
- **Tagline**: Three-plane spatial parallax card with coupled 3D tilt.
- **Description**: Multi-depth 3D spatial card featuring three independent Z-planes that shift at graduated parallax ratios under pointer movement.
- **Docs URL**: https://boseui.site/components/parallax-tilt-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/parallax-tilt-card.json`
- **Registry Manifest**: https://boseui.site/r/parallax-tilt-card.json
- **Key Features**:
  - Three graduated parallax translation planes (±6px, ±16px, ±26px) coupled with ±14° 3D perspective rotation.
  - Driven entirely by Framer Motion useTransform and useSpring with zero React state re-renders.
  - Automatic spring return to neutral equilibrium on pointer leave.
- **Accessibility**:
  - Marks decorative background dot matrix planes with aria-hidden='true'.
  - Disables all 3D rotation and parallax plane displacement when prefers-reduced-motion is active.
  - Preserves semantic heading and paragraph hierarchy for screen readers.
- **Props**:
  - `title` (string, default: "Spatial Depth Plane"): Primary heading rendered on the foreground elevation plane.
  - `subtitle` (string, default: "Three independent Z-planes translate at graduated ratios..."): Supporting description text rendered below the title.
  - `maxTilt` (number, default: 14): Peak 3D tilt angle in degrees along X and Y axes.
  - `stiffness` (number, default: 240): Hooke's Law spring stiffness for tilt and plane parallax.
  - `damping` (number, default: 22): Spring damping coefficient controlling settle oscillation.
- **Usage Example**:
```tsx
import { ParallaxTiltCard } from "@/components/ui/parallax-tilt-card";

export function Example() {
  return (
    <ParallaxTiltCard
      title="Spatial Depth Plane"
      maxTilt={14}
      stiffness={240}
      damping={22}
    />
  );
}
```

---

### Particle Network (`ParticleNetwork`)
- **Slug**: `particle-network`
- **Category**: Backgrounds
- **Tagline**: Drifting nodes connected by distance-attenuated proximity lines.
- **Description**: Interactive Canvas 2D proximity graph where drifting nodes dynamically connect with distance-attenuated lines whenever they pass within a threshold radius.
- **Docs URL**: https://boseui.site/components/particle-network
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/particle-network.json`
- **Registry Manifest**: https://boseui.site/r/particle-network.json
- **Key Features**:
  - Computes pairwise Euclidean distance (`Math.hypot`) and renders edges with opacity proportional to `1 - dist / connectDistance`.
  - Interactive cursor node that links to nearby particles as the user moves their pointer.
  - Elastic boundary reflection keeps all nodes inside the responsive canvas.
- **Accessibility**:
  - Marks the `<canvas>` graph layer with `aria-hidden='true'`.
  - High-contrast foreground text over the `#05070B` canvas.
  - Zero pointer-event obstruction for foreground buttons and links.
- **Props**:
  - `particleCount` (number, default: 55): Number of autonomous drifting nodes.
  - `connectDistance` (number, default: 125): Maximum pixel distance at which two nodes form a connecting line.
  - `speed` (number, default: 1): Node drift speed multiplier.
  - `particleColor` (string, default: "255, 255, 255"): RGB triplet string ('R, G, B') used for node and line alpha rendering.
  - `interactive` (boolean, default: true): Connects nearby nodes to the user's cursor on hover.
  - `children` (React.ReactNode): Optional foreground content rendered above the network.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { ParticleNetwork } from "@/components/ui/particle-network";

export function Example() {
  return (
    <ParticleNetwork
      particleCount={55}
      connectDistance={125}
      interactive
    />
  );
}
```

---

### Peel Reveal Card (`PeelRevealCard`)
- **Slug**: `peel-reveal-card`
- **Category**: Cards
- **Tagline**: Spring-hinged top cover that peels back to reveal vault data.
- **Description**: Dual-layer vault card with a spring-hinged top cover that peels upward on hover or keyboard activation to reveal sensitive credentials.
- **Docs URL**: https://boseui.site/components/peel-reveal-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/peel-reveal-card.json`
- **Registry Manifest**: https://boseui.site/r/peel-reveal-card.json
- **Key Features**:
  - Spring-hinged cover sheet that lifts upward with 3D rotateX perspective on hover or click.
  - Built-in one-click clipboard copy button inside the underlying vault layer.
  - Full keyboard toggle support via Enter and Space keys.
- **Accessibility**:
  - Cover layer implements role='button' with aria-expanded and descriptive aria-label.
  - Underlying Copy Key button is directly focusable via Tab.
  - Disables 3D tilt and spring oscillation when prefers-reduced-motion is enabled.
- **Props**:
  - `title` (string, default: "Production Secret Key"): Heading text displayed on the protective cover layer.
  - `secretValue` (string, default: "bose_live_98f72a41c09e3b1d"): Hidden string revealed inside the vault layer when peeled.
  - `stiffness` (number, default: 300): Spring stiffness coefficient for the curtain peel motion.
  - `damping` (number, default: 24): Spring damping coefficient controlling curtain settle.
- **Usage Example**:
```tsx
import { PeelRevealCard } from "@/components/ui/peel-reveal-card";

export function Example() {
  return (
    <PeelRevealCard
      title="Production Secret Key"
      secretValue="bose_live_98f72a41c09e3b1d"
    />
  );
}
```

---

### Picker Wheel (`PickerWheel`)
- **Slug**: `picker-wheel`
- **Category**: Inputs
- **Tagline**: iOS-style 3D scrolling wheel for date, time, and options.
- **Description**: iOS-inspired 3D cylindrical scrolling drum picker for dates, times, and custom option columns with wheel, drag, and click-to-snap physics.
- **Docs URL**: https://boseui.site/components/picker-wheel
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/picker-wheel.json`
- **Registry Manifest**: https://boseui.site/r/picker-wheel.json
- **Key Features**:
  - 3D cylindrical `rotateX` perspective transforms with top and bottom fade masks.
  - Supports mouse wheel scrolling, vertical touch/pointer drag, and direct click-to-snap.
  - Configurable multi-column architecture for date, time, or custom option lists.
- **Accessibility**:
  - Each column exposes `role='listbox'` with `ArrowUp` and `ArrowDown` keyboard support.
  - Individual items use `role='option'` and `aria-selected`.
  - Disables 3D `rotateX` tilt when `prefers-reduced-motion` is enabled.
- **Props**:
  - `columns` (PickerColumn[]): Array of wheel columns ({ id, label, options, defaultIndex }).
  - `onChange` ((selectedValues: Record<string, string>) => void): Callback fired with a map of column IDs to selected option strings.
  - `title` (string, default: "Schedule Deployment"): Header label displayed above the wheel.
  - `className` (string): Additional Tailwind CSS classes for the outer card.
- **Usage Example**:
```tsx
import { PickerWheel } from "@/components/ui/picker-wheel";

export function Example() {
  return (
    <PickerWheel
      title="Schedule Deployment"
      onChange={(values) => console.log("Selected:", values)}
    />
  );
}
```

---

### Planet Horizon (`PlanetHorizon`)
- **Slug**: `planet-horizon`
- **Category**: Backgrounds
- **Tagline**: Cinematic orbital sunrise with atmospheric Rayleigh scattering.
- **Description**: Orbital sunrise-from-space hero background featuring a twinkling starfield, a giant curved planetary sphere with a multi-layered glowing atmospheric limb, and an animated anamorphic solar flare cresting along the terminator.
- **Docs URL**: https://boseui.site/components/planet-horizon
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/planet-horizon.json`
- **Registry Manifest**: https://boseui.site/r/planet-horizon.json
- **Key Features**:
  - Curved planetary sphere with multi-layered radial exosphere and razor-thin bright limb edge
  - Animated solar crest with horizontal anamorphic lens flare streaks and chromatic iris ghosts
  - Twinkling deep-space starfield automatically occluded by the planetary body
  - Supports both continuous orbital autoplay and manual solar flare scrubbing from 0 to 1
  - Built-in atmospheric theme presets (Terra Dawn, Exoplanet Violet, Martian Amber)
- **Accessibility**:
  - Canvas is marked aria-hidden so foreground hero copy and CTAs remain cleanly navigable
  - Includes play/pause orbital motion toggle for users who prefer stationary lighting
- **Props**:
  - `atmosphereColor` (string, default: "#38BDF8"): Hex color of the glowing planetary atmospheric limb.
  - `flareColor` (string, default: "#FDE047"): Hex color of the cresting solar flare core and diffraction rays.
  - `flarePosition` (number, default: 0.5): Normalized position (0 to 1) of the sun along the horizon when autoplay is disabled.
  - `autoplay` (boolean, default: true): Whether the solar flare smoothly orbits along the planetary horizon.
  - `starDensity` (number, default: 140): Number of twinkling background stars rendered above the planet.
  - `children` (React.ReactNode): Optional foreground hero content rendered over the horizon.
  - `className` (string): Additional CSS classes for the root container.
- **Usage Example**:
```tsx
import { PlanetHorizon } from "@/components/ui/PlanetHorizon";

export function PlanetHorizonDemo() {
  return (
    <PlanetHorizon
      atmosphereColor="#38BDF8"
      flareColor="#FDE047"
      flarePosition={0.5}
      autoplay
      starDensity={140}
    />
  );
}
```

---

### Plus Grid Border (`PlusGridBorder`)
- **Slug**: `plus-grid-border`
- **Category**: Cards
- **Tagline**: Architectural blueprint grid with illuminated corner crosshairs.
- **Description**: Vercel-inspired blueprint grid architecture with precision hairline section borders and interactive corner plus markers that illuminate on pointer proximity.
- **Docs URL**: https://boseui.site/components/plus-grid-border
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/plus-grid-border.json`
- **Registry Manifest**: https://boseui.site/r/plus-grid-border.json
- **Key Features**:
  - Precision architectural hairline borders with corner '+' crosshairs at all junction nodes.
  - Dynamic pointer proximity lighting that illuminates nearby crosses and borders based on mouse coordinates.
  - Multiple layout presets including 2x2 quadrant and 3-column feature bento showcase.
  - Interactive configuration toolbar for adjusting cross scale, border glow tone, and hover intensity.
- **Accessibility**:
  - Decorative '+' markers are hidden from assistive technology via aria-hidden.
  - Cards remain fully keyboard navigable with standard focus-visible rings.
  - Respects prefers-reduced-motion by keeping illumination static without jitter.
- **Props**:
  - `items` (GridCardItem[]): Array of content cards to frame inside the plus grid system.
  - `glowColor` (string, default: "cyan"): Accent illumination color for the crosshairs and proximity borders.
  - `interactiveProximity` (boolean, default: true): Whether mouse pointer distance dynamically illuminates junction crosses.
  - `className` (string): Optional custom classes applied to the root grid container.
- **Usage Example**:
```tsx
import { PlusGridBorder } from "@/components/ui/PlusGridBorder";

export function Example() {
  return (
    <PlusGridBorder
      glowColor="cyan"
      interactiveProximity={true}
    />
  );
}
```

---

### Popover Card (`PopoverCard`)
- **Slug**: `popover-card`
- **Category**: Overlays
- **Tagline**: Anchored floating popover for quick settings and contextual menus.
- **Description**: Floating anchored popover card with configurable side and alignment, spring scale-in physics, outside-click dismissal, and interactive toggle controls.
- **Docs URL**: https://boseui.site/components/popover-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/popover-card.json`
- **Registry Manifest**: https://boseui.site/r/popover-card.json
- **Key Features**:
  - Configurable `side` (top, bottom, left, right) and `align` (start, center, end) positioning.
  - Outside click and Escape key listeners for immediate dismissal.
  - Includes interactive spring switch toggles out of the box when no custom children are passed.
- **Accessibility**:
  - Links trigger button to popover dialog via aria-expanded, aria-haspopup, and aria-controls.
  - Uses role='switch' and aria-checked on interactive preference toggles.
  - Respects prefers-reduced-motion for entry and exit animations.
- **Props**:
  - `triggerLabel` (string, default: "Display Settings"): Label displayed inside the popover trigger button.
  - `title` (string, default: "Workspace Preferences"): Header title displayed inside the floating card.
  - `description` (string, default: "Adjust real-time notification and layout behavior."): Subtitle text displayed under the popover title.
  - `side` ("top" | "bottom" | "left" | "right", default: "bottom"): Side of the trigger where the popover appears.
  - `align` ("start" | "center" | "end", default: "center"): Alignment along the chosen side.
  - `open` (boolean): Controlled open state for the popover.
  - `onOpenChange` ((open: boolean) => void): Callback fired when the popover opens or closes.
  - `children` (React.ReactNode): Custom content rendered inside the popover body.
  - `className` (string): Additional Tailwind CSS classes for the wrapper.
- **Usage Example**:
```tsx
import { PopoverCard } from "@/components/ui/popover-card";

export function Example() {
  return (
    <PopoverCard
      triggerLabel="Display Settings"
      side="bottom"
      align="center"
    />
  );
}
```

---

### Pricing Calculator (`PricingCalculator`)
- **Slug**: `pricing-calculator`
- **Category**: Cards
- **Tagline**: Interactive tiered pricing calculator with volume slider, currency converter, and plan tier match.
- **Description**: Interactive Stripe-style pricing calculator featuring an API usage volume slider, automatic plan tier recommendation highlights, multi-currency conversion, and an annual billing toggle with 20% discount.
- **Docs URL**: https://boseui.site/components/pricing-calculator
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/pricing-calculator.json`
- **Registry Manifest**: https://boseui.site/r/pricing-calculator.json
- **Key Features**:
  - Interactive transaction / API usage slider scaling continuously from 10k to 5M+ requests.
  - Real-time cost ticker recalculating tier-based volume discounts and monthly vs. annual billing.
  - Automatic active plan highlighting (Starter, Growth, Scale, Enterprise) matched to current traffic volume.
  - Multi-currency conversion support (USD, EUR, GBP) with localized currency symbols.
  - Preset volume jump shortcuts for rapid instant plan exploration.
- **Accessibility**:
  - Native accessible range input with full ARIA value min, max, and now attributes.
  - High-contrast plan selection indicators and visible focus styles.
  - Screen reader readable price announcements and currency indicators.
- **Props**:
  - `defaultVolume` (number, default: 150000): Initial monthly requests/operations volume for the slider.
  - `defaultAnnual` (boolean, default: true): Whether annual billing mode (with 20% discount) is enabled initially.
  - `className` (string): Optional CSS classes to apply to the root container.
- **Usage Example**:
```tsx
import { PricingCalculator } from "@/components/ui/PricingCalculator";

export function Example() {
  return (
    <div className="w-full">
      <PricingCalculator defaultVolume={150000} defaultAnnual={true} />
    </div>
  );
}
```

---

### Product Compare Table (`ProductCompareTable`)
- **Slug**: `product-compare-table`
- **Category**: Cards
- **Tagline**: Sticky-header comparison matrix with check/dash indicators.
- **Description**: Aligned multi-tier product comparison matrix with sticky frosted headers, check and dash indicators, highlighted tier column, and a live 'Show differences only' switch.
- **Docs URL**: https://boseui.site/components/product-compare-table
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/product-compare-table.json`
- **Registry Manifest**: https://boseui.site/r/product-compare-table.json
- **Key Features**:
  - Sticky frosted-glass column headers (`backdrop-blur-md`) that remain pinned while scrolling specs.
  - Interactive 'Show differences only' toggle switch to filter out identical rows.
  - Supports boolean check/dash badges as well as custom text values per tier.
- **Accessibility**:
  - Uses semantic `<table>`, `<thead>`, and `<tbody>` markup for screen-reader table navigation.
  - Check and dash icons include explicit `aria-label` ('Included' / 'Not included').
  - Differences toggle uses `role='switch'` and `aria-checked`.
- **Props**:
  - `tiers` (CompareTier[]): Array of product tiers ({ id, name, price, badge, highlighted }).
  - `rows` (CompareSpecRow[]): Array of specification rows mapping each tier id to a boolean or string.
  - `allowDiffFilter` (boolean, default: true): Displays the 'Show differences only' toggle bar at the top.
  - `className` (string): Additional Tailwind CSS classes for the outer table card.
- **Usage Example**:
```tsx
import { ProductCompareTable } from "@/components/ui/product-compare-table";

export function Example() {
  return <ProductCompareTable allowDiffFilter />;
}
```

---

### Product Sequence Scrubber (`ProductSequenceScrubber`)
- **Slug**: `product-sequence-scrubber`
- **Category**: Motion
- **Tagline**: Apple-style 360° device inspection with timeline scrubbing and layer explosion.
- **Description**: Apple-inspired interactive 360° hardware sequence scrubber with vector frame rotation, multi-layer explosion disassembly view, and angle-synchronized feature callouts.
- **Docs URL**: https://boseui.site/components/product-sequence-scrubber
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/product-sequence-scrubber.json`
- **Registry Manifest**: https://boseui.site/r/product-sequence-scrubber.json
- **Key Features**:
  - Smooth 36-frame continuous vector rotation with realistic lighting and reflections.
  - Interactive timeline scrubber bar with preset key angles (0°, 90°, 180°, 270°).
  - Exploded multi-layer hardware disassembly view separating screen, chassis, A18 Pro logic board, and battery.
  - Angle-synchronized feature callouts highlighting titanium frame, action button, and silicon.
  - Play/pause auto-spin mode with responsive framer-motion micro-interactions.
- **Accessibility**:
  - Full keyboard navigation support with accessible range slider controls.
  - Includes ARIA labels for play/pause, explosion toggles, and preset rotation angles.
  - Reduced motion respected for transitions and rotation intervals.
- **Props**:
  - `totalFrames` (number, default: 36): Total number of rotational steps around the 360° circle.
  - `defaultFrame` (number, default: 6): Initial frame index to display on render.
  - `defaultAutoPlay` (boolean, default: false): Whether the product sequence auto-spins on mount.
  - `defaultExploded` (boolean, default: false): Whether the hardware layers are initially exploded.
  - `callouts` (FeatureCallout[]): List of angle-synchronized feature annotations.
  - `className` (string): Additional Tailwind CSS classes for the root container.
  - `showHeader` (boolean): Whether to render header title, hardware specs badge, and action CTA
- **Usage Example**:
```tsx
import { ProductSequenceScrubber } from "@/components/ui/ProductSequenceScrubber";

export function Example() {
  return (
    <ProductSequenceScrubber
      totalFrames={36}
      defaultFrame={0}
      defaultAutoPlay={false}
    />
  );
}
```

---

### Radial Menu Orb (`RadialMenuOrb`)
- **Slug**: `radial-menu-orb`
- **Category**: Navigation
- **Tagline**: 360° polar-coordinate radial command menu with staggered springs.
- **Description**: Floating command orb that blossoms into a 360-degree polar-coordinate action ring with staggered Hooke's Law spring trajectories.
- **Docs URL**: https://boseui.site/components/radial-menu-orb
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/radial-menu-orb.json`
- **Registry Manifest**: https://boseui.site/r/radial-menu-orb.json
- **Key Features**:
  - Trigonometric polar coordinate distribution (cos/sin) that adapts automatically to any number of satellite actions.
  - Staggered Hooke's Law spring blossom and collapse trajectories with rotational core icon feedback.
  - Accessible keyboard navigation and Escape key dismissal.
- **Accessibility**:
  - Core orb button announces open/closed state via aria-expanded and descriptive aria-label.
  - Each satellite action button includes an explicit aria-label and focus-visible tooltip.
  - Supports Escape key dismissal and disables spring travel when prefers-reduced-motion is active.
- **Props**:
  - `actions` (RadialOrbAction[]): Array of satellite action items containing id, label, icon node, and optional click callback.
  - `radius` (number, default: 78): Polar orbit radius in pixels from center orb to satellite buttons.
  - `stiffness` (number, default: 340): Spring stiffness coefficient for radial expansion and collapse.
  - `damping` (number, default: 22): Spring damping coefficient controlling orbital settling.
  - `onSelect` ((actionId: string) => void): Callback fired when an action radial slice is selected
- **Usage Example**:
```tsx
import { RadialMenuOrb } from "@/components/ui/radial-menu-orb";

export function Example() {
  return (
    <RadialMenuOrb radius={78} stiffness={340} damping={22} />
  );
}
```

---

### Rain on Glass (`RainOnGlass`)
- **Slug**: `rain-on-glass`
- **Category**: Backgrounds
- **Tagline**: Refractive water droplets sliding down a blurred glass pane.
- **Description**: Atmospheric window-pane rain simulation over a blurred bokeh backdrop where droplets slide down with surface-tension stutter, leave bead trails, and refract light.
- **Docs URL**: https://boseui.site/components/rain-on-glass
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/rain-on-glass.json`
- **Registry Manifest**: https://boseui.site/r/rain-on-glass.json
- **Key Features**:
  - Simulates surface-tension stutter-sliding droplets that spawn smaller trail beads behind them.
  - Each droplet renders an inverted internal radial gradient and specular rim to mimic glass refraction.
  - Includes a live Steady Rain / Downpour intensity toggle in the default preview.
- **Accessibility**:
  - Marks decorative bokeh layers and `<canvas>` with `aria-hidden='true'`.
  - High-contrast typography over the darkened glass surface.
  - Intensity toggle button is keyboard accessible.
- **Props**:
  - `dropCount` (number, default: 45): Number of primary sliding droplets on the pane.
  - `speed` (number, default: 1): Gravity slide velocity multiplier.
  - `wind` (number, default: 0.05): Horizontal wind drift factor (-1 to 1).
  - `refraction` (number, default: 0.85): Brightness of the internal refractive lens highlight (0 to 1).
  - `children` (React.ReactNode): Optional foreground content rendered above the glass.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { RainOnGlass } from "@/components/ui/rain-on-glass";

export function Example() {
  return (
    <RainOnGlass
      dropCount={45}
      speed={1}
      refraction={0.85}
    />
  );
}
```

---

### Reaction Picker (`ReactionPicker`)
- **Slug**: `reaction-picker`
- **Category**: Overlays
- **Tagline**: Slack-style floating emoji reaction bar with spring counts and full picker popover.
- **Description**: Slack-style floating emoji reaction bar with quick reactions, spring count bump badges, toggleable personal reaction state, hover tooltip user attributions, and an expandable full emoji picker with search.
- **Docs URL**: https://boseui.site/components/reaction-picker
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/reaction-picker.json`
- **Registry Manifest**: https://boseui.site/r/reaction-picker.json
- **Key Features**:
  - Floating quick reaction bar hovering seamlessly over message containers.
  - Spring bounce animation on numeric reaction badges when voted or unvoted.
  - Active user state highlighting reacted badges with tinted borders and glow fills.
  - Expandable full emoji search picker popover with category filtering.
  - Hover tooltip attribution displaying names of reacting teammates.
- **Accessibility**:
  - Each reaction button includes descriptive aria-label with emoji name and current vote count.
  - Full keyboard navigation through the quick bar and search picker popover.
  - Color contrast adheres strictly to WCAG AA requirements in dark and light modes.
- **Props**:
  - `initialReactions` (ReactionItem[]): Array of reaction items with emoji, count, reactedByMe state, and user list.
  - `messageText` (string, default: "Just shipped the brand-new financial charts..."): Text content of the message being reacted to.
  - `authorName` (string, default: "Alexander Vance"): Name of the message author.
  - `authorRole` (string, default: "Staff Design Technologist"): Role or title of the message author.
  - `className` (string): Additional CSS classes to apply to the root container.
  - `inline` (boolean): Whether reaction bar is rendered inline with content or in popover
- **Usage Example**:
```tsx
import { ReactionPicker } from "@/components/ui/ReactionPicker";

export function Example() {
  return (
    <ReactionPicker
      authorName="Sophia Nakamoto"
      authorRole="Core Protocol Engineer"
      messageText="Smart contract audit passed with 0 critical findings! 🚀"
    />
  );
}
```

---

### Ripple Burst Button (`RippleBurstButton`)
- **Slug**: `ripple-burst-button`
- **Category**: Buttons
- **Tagline**: Coordinate-origin dual concentric shockwaves with spring recoil.
- **Description**: Tactile impulse button that spawns dual concentric shockwave rings from the exact pointer click coordinate with spring recoil.
- **Docs URL**: https://boseui.site/components/ripple-burst-button
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/ripple-burst-button.json`
- **Registry Manifest**: https://boseui.site/r/ripple-burst-button.json
- **Key Features**:
  - Computes exact local pointer coordinates (x, y) on click to spawn dual staggered shockwave rings.
  - Coupled Hooke's Law hover lift and tap compression.
  - Built-in live pulse counter badge.
- **Accessibility**:
  - Marks all expanding shockwave ring elements with aria-hidden='true'.
  - Supports standard Enter and Space keyboard activation (spawning ripples from button center).
  - Suppresses shockwave rings and scale transforms when prefers-reduced-motion is active.
- **Props**:
  - `label` (string, default: "Emit Shockwave Pulse"): Primary text label rendered inside the button.
  - `stiffness` (number, default: 400): Hooke's Law spring stiffness for hover and tap recoil.
  - `damping` (number, default: 22): Spring damping coefficient controlling recoil settling.
  - `onClick` ((e: React.MouseEvent<HTMLButtonElement>) => void): Standard button click handler callback
- **Usage Example**:
```tsx
import { RippleBurstButton } from "@/components/ui/ripple-burst-button";

export function Example() {
  return (
    <RippleBurstButton label="Emit Shockwave Pulse" stiffness={400} damping={22} />
  );
}
```

---

### Rolling Number Ticker (`RollingNumberTicker`)
- **Slug**: `rolling-number-ticker`
- **Category**: Text
- **Tagline**: Odometric rolling number ticker with spring physics and currency formatting.
- **Description**: Wise and Robinhood-style vertical rolling cylinder odometer number ticker with independent digit strips, smooth Hooke's Law spring physics, customizable currency prefix, and decimal formatting.
- **Docs URL**: https://boseui.site/components/rolling-number-ticker
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/rolling-number-ticker.json`
- **Registry Manifest**: https://boseui.site/r/rolling-number-ticker.json
- **Key Features**:
  - Independent vertical digit drums rolling with customizable Framer Motion spring physics.
  - Integrated currency prefix and decimal comma grouping formatting.
  - Directional delta awareness flashing ambient emerald or rose glows on balance changes.
  - Top and bottom cylindrical gradient mask styling for authentic mechanical odometer depth.
  - Responsive typography with interactive step controls and randomized amount tests.
- **Accessibility**:
  - Screen readers read the complete formatted numerical value via live aria announcement.
  - Static delimiters (commas, periods, symbols) are excluded from rolling motion.
  - Gracefully adheres to prefers-reduced-motion with instant position updates.
- **Props**:
  - `value` (number, default: 48932.18): Numeric balance or metric value to display in the ticker.
  - `currency` (string, default: "$"): Currency symbol prefix prepended to the number ticker.
  - `decimalPlaces` (number, default: 2): Number of decimal fraction digits to preserve and render.
  - `stiffness` (number, default: 260): Spring stiffness for digit drum translation.
  - `damping` (number, default: 26): Spring damping coefficient controlling digit settling oscillation.
  - `className` (string): Additional CSS classes to apply to the root container.
  - `fontSize` (number): Numeric font size in pixels for the rolling odometer digits
- **Usage Example**:
```tsx
import { RollingNumberTicker } from "@/components/ui/RollingNumberTicker";

export function Example() {
  return (
    <RollingNumberTicker
      value={128450.75}
      currency="$"
      decimalPlaces={2}
    />
  );
}
```

---

### Rotary Spring Dial (`RotarySpringDial`)
- **Slug**: `rotary-spring-dial`
- **Category**: Inputs
- **Tagline**: 270° studio rotary knob with spring-damped rotor physics.
- **Description**: Synthesizer-inspired tactile rotary knob with a 270-degree spring-damped rotor, vertical drag scrubbing, and keyboard arrow control.
- **Docs URL**: https://boseui.site/components/rotary-spring-dial
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/rotary-spring-dial.json`
- **Registry Manifest**: https://boseui.site/r/rotary-spring-dial.json
- **Key Features**:
  - Maps numeric values across a -135° to +135° (270° total) rotary arc driven by Hooke's Law angular springs.
  - Precision vertical pointer-capture drag scrubbing standard in pro audio and 3D software.
  - Full keyboard arrow-key and Home/End accessibility.
- **Accessibility**:
  - Implements role='slider' with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext.
  - Supports ArrowUp/ArrowRight to increment, ArrowDown/ArrowLeft to decrement, and Home/End keys.
  - Rotates instantaneously without spring overshoot when prefers-reduced-motion is enabled.
- **Props**:
  - `label` (string, default: "Damping Ratio"): Parameter name displayed above the rotary dial.
  - `defaultValue` (number, default: 65): Initial numeric value between min and max.
  - `min` (number, default: 0): Minimum dial value corresponding to -135 degrees.
  - `max` (number, default: 100): Maximum dial value corresponding to +135 degrees.
  - `step` (number, default: 5): Step increment per detent tick.
  - `unit` (string, default: "%"): Unit suffix appended to the digital readout.
  - `stiffness` (number): Spring stiffness for dial rotation snapping
  - `damping` (number): Spring damping coefficient
  - `onChange` ((val: number) => void): Callback fired when dial angle value changes
- **Usage Example**:
```tsx
import { RotarySpringDial } from "@/components/ui/rotary-spring-dial";

export function Example() {
  return (
    <RotarySpringDial
      label="Damping Ratio"
      defaultValue={65}
      min={0}
      max={100}
      step={5}
      unit="%"
    />
  );
}
```

---

### Scrubbable Number Input (`ScrubbableNumberInput`)
- **Slug**: `scrubbable-number-input`
- **Category**: Inputs
- **Tagline**: Horizontal pointer scrubbing with elastic housing tug and digit roll.
- **Description**: Figma and Blender-inspired tactile numeric input with horizontal pointer drag scrubbing, elastic housing displacement, and kinetic digit roll.
- **Docs URL**: https://boseui.site/components/scrubbable-number-input
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/scrubbable-number-input.json`
- **Registry Manifest**: https://boseui.site/r/scrubbable-number-input.json
- **Key Features**:
  - Horizontal pointer-capture scrubbing anywhere on the pill with Shift (5x) and Alt (0.2x) precision modifiers.
  - Hooke's Law horizontal housing tug that visualizes scrub tension and snaps back on release.
  - Directional vertical slot-machine digit transitions powered by AnimatePresence.
- **Accessibility**:
  - Implements WAI-ARIA role='spinbutton' with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext.
  - Supports ArrowUp/ArrowDown/ArrowLeft/ArrowRight (plus Shift 10x multiplier) and Home/End keys.
  - Includes explicit + and - stepper buttons for single-tap touch and assistive control.
- **Props**:
  - `label` (string, default: "Stiffness"): Field label displayed inside the left scrub handle.
  - `defaultValue` (number, default: 240): Initial numeric value for uncontrolled usage.
  - `min` (number, default: 0): Minimum allowed numeric value.
  - `max` (number, default: 1000): Maximum allowed numeric value.
  - `step` (number, default: 5): Numeric increment per scrub step or button press.
  - `unit` (string, default: "N/m"): Unit label rendered alongside the numeric value.
  - `value` (number): Controlled numeric value
  - `pixelsPerStep` (number): Mouse scrub sensitivity in pixels moved per step increment
  - `onChange` ((val: number) => void): Callback fired when numeric value updates
- **Usage Example**:
```tsx
import { ScrubbableNumberInput } from "@/components/ui/scrubbable-number-input";

export function Example() {
  return (
    <ScrubbableNumberInput
      label="Stiffness"
      defaultValue={240}
      min={20}
      max={600}
      step={5}
      unit="N/m"
    />
  );
}
```

---

### Scrubbable Sparkline (`ScrubbableSparkline`)
- **Slug**: `scrubbable-sparkline`
- **Category**: Motion
- **Tagline**: Robinhood-style financial sparkline chart with cursor scrubbing and live ticker readouts.
- **Description**: Robinhood-style financial stock and cryptocurrency sparkline chart with interactive touch/mouse scrubbing, dynamic cursor crosshair, live price readout, and animated delta gains or losses.
- **Docs URL**: https://boseui.site/components/scrubbable-sparkline
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/scrubbable-sparkline.json`
- **Registry Manifest**: https://boseui.site/r/scrubbable-sparkline.json
- **Key Features**:
  - Interactive pointer and touch scrubbing with smooth cubic bezier SVG curve calculation.
  - Dynamic delta percentage computation with conditional emerald (gain) or rose (loss) theme.
  - Live vertical crosshair indicator with glowing cursor dot tracking the curve value.
  - Smooth animated SVG area gradient fill with configurable glow and gridlines.
  - Responsive SVG coordinate scaling across desktop and mobile screens.
- **Accessibility**:
  - Provides tabular data fallback and aria-label readouts for screen readers.
  - Maintains high contrast color ratios for gains (emerald) and losses (rose).
  - Supports keyboard reset and touch dragging without trapping scroll.
- **Props**:
  - `data` (SparklinePoint[]): Array of sparkline points with time string and numeric value.
  - `title` (string, default: "Bitcoin"): Title of the asset or financial instrument.
  - `ticker` (string, default: "BTC/USD"): Ticker symbol displayed in the header badge.
  - `currency` (string, default: "$"): Currency symbol prefix for price formatting.
  - `height` (number, default: 240): SVG viewport coordinate height in pixels.
  - `showGradient` (boolean, default: true): Whether to render the animated area fill gradient underneath the line.
  - `showGrid` (boolean, default: true): Whether to render horizontal reference grid lines.
  - `className` (string): Additional CSS classes to apply to the root container.
  - `minimal` (boolean): Compact sparkline display mode hiding telemetry header and stats
- **Usage Example**:
```tsx
import { ScrubbableSparkline } from "@/components/ui/ScrubbableSparkline";

const btcData = [
  { time: "09:30", value: 64250 },
  { time: "11:30", value: 65120 },
  { time: "13:30", value: 64980 },
  { time: "15:30", value: 66420 },
  { time: "18:30", value: 67890 },
  { time: "20:30", value: 68340 },
];

export function Example() {
  return (
    <ScrubbableSparkline
      title="Bitcoin"
      ticker="BTC/USD"
      currency="$"
      data={btcData}
      showGradient={true}
    />
  );
}
```

---

### Segmented Range Picker (`SegmentedRangePicker`)
- **Slug**: `segmented-range-picker`
- **Category**: Navigation
- **Tagline**: Financial timeframe selector with spring sliding pill and synchronized chart morphing.
- **Description**: Financial timeframe range selector (1D, 1W, 1M, 1Y, ALL) with a sliding pill highlight, synchronized animated chart transitions, interval resolution badge, and high/low metric cards.
- **Docs URL**: https://boseui.site/components/segmented-range-picker
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/segmented-range-picker.json`
- **Registry Manifest**: https://boseui.site/r/segmented-range-picker.json
- **Key Features**:
  - Shared layoutId sliding pill highlight with Hooke's Law spring dynamics.
  - Synchronized chart morphing and data transition between daily, weekly, monthly, and yearly windows.
  - Integrated range metrics displaying interval resolution, range high, range low, and volume.
  - Seamless switching between smooth spline curve and volume histogram view.
  - Contextual emerald/rose colorway reflecting positive or negative net return across the selected range.
- **Accessibility**:
  - Operates as a standard WAI-ARIA segmented tablist with arrow key navigation.
  - Clear visual focus rings and contrast ratios exceeding WCAG AAA standards.
  - Respects reduced-motion preferences with crossfade fallbacks for graph transitions.
- **Props**:
  - `ranges` (("1D" | "1W" | "1M" | "1Y" | "ALL")[], default: ["1D", "1W", "1M", "1Y", "ALL"]): Array of timeframe options displayed in the segmented control.
  - `defaultRange` ("1D" | "1W" | "1M" | "1Y" | "ALL", default: "1D"): Initially active timeframe option.
  - `onRangeChange` ((range: TimeRange) => void): Callback function fired whenever the selected timeframe changes.
  - `className` (string): Additional CSS classes to apply to the root container.
- **Usage Example**:
```tsx
import { SegmentedRangePicker } from "@/components/ui/SegmentedRangePicker";

export function Example() {
  return (
    <SegmentedRangePicker
      defaultRange="1M"
      onRangeChange={(range) => console.log("Selected range:", range)}
    />
  );
}
```

---

### Shimmer Text (`ShimmerText`)
- **Slug**: `shimmer-text`
- **Category**: Text
- **Tagline**: Linear-style metallic gradient headline with an animated high-gloss beam.
- **Description**: Linear-inspired metallic gradient typography with a high-gloss light beam that sweeps across headlines continuously or upon hover interaction.
- **Docs URL**: https://boseui.site/components/shimmer-text
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/shimmer-text.json`
- **Registry Manifest**: https://boseui.site/r/shimmer-text.json
- **Key Features**:
  - High-gloss specular light beam swept across typography via background-clip or mask reflection.
  - Multiple metallic palettes: Platinum Silver, Liquid Gold, Cyber Neon Violet, and Emerald Matrix.
  - Customizable shimmer duration, sweep angle, text size, and interactive hover-trigger mode.
  - Live text editing in the demo stage to test any custom title or marketing headline.
- **Accessibility**:
  - Text remains fully selectable and readable by standard screen readers via genuine DOM heading elements.
  - Provides a pause/play toggle and disables animations automatically when prefers-reduced-motion is active.
  - Ensures high contrast ratio against dark backgrounds even at the peak of the reflection sweep.
- **Props**:
  - `text` (string, default: "Issue tracking engineered for high-velocity software teams."): Headline copy to render with metallic shimmer finish.
  - `palette` ("silver" | "gold" | "violet" | "emerald", default: "silver"): Metallic color tone preset for the gradient foundation and reflection beam.
  - `duration` (number, default: 3): Sweep cycle duration in seconds.
  - `angle` (number, default: 115): Angle of the light beam incidence in degrees.
  - `shimmerOnHoverOnly` (boolean, default: false): When true, shimmer beam sweeps only when hovered or focused.
  - `className` (string): Optional custom classes applied to the root container.
- **Usage Example**:
```tsx
import { ShimmerText } from "@/components/ui/ShimmerText";

export function Example() {
  return (
    <ShimmerText
      text="Issue tracking engineered for high-velocity software teams."
      palette="silver"
      duration={3}
      angle={115}
    />
  );
}
```

---

### Shooting Stars (`ShootingStars`)
- **Slug**: `shooting-stars`
- **Category**: Backgrounds
- **Tagline**: Diagonal shooting stars with gradient tails and lifecycle fade.
- **Description**: Atmospheric meteor shower background that spawns diagonal shooting stars with glowing heads and transparent gradient tails at configurable intervals.
- **Docs URL**: https://boseui.site/components/shooting-stars
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/shooting-stars.json`
- **Registry Manifest**: https://boseui.site/r/shooting-stars.json
- **Key Features**:
  - Spawns meteors at randomized coordinates and intervals with a glowing head and fading linear-gradient tail.
  - Configurable trajectory `angle`, `frequency`, `color`, and `maxConcurrent` limit.
  - Automatically cleans up each meteor after its ~1-second lifecycle.
- **Accessibility**:
  - Marks decorative `<canvas>` and starfield layers with `aria-hidden='true'`.
  - Maintains crisp white text legibility over the `#05070F` space backdrop.
  - Interactive 'Spawn Meteor' trigger is keyboard accessible.
- **Props**:
  - `frequency` (number, default: 2.5): Average number of shooting stars spawned per second.
  - `angle` (number, default: 35): Diagonal travel angle in degrees.
  - `color` (string, default: "#FFFFFF"): Hex or RGB color of the meteor head and tail.
  - `maxConcurrent` (number, default: 6): Maximum number of shooting stars visible at the same time.
  - `children` (React.ReactNode): Optional foreground content rendered above the meteor shower.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { ShootingStars } from "@/components/ui/shooting-stars";

export function Example() {
  return (
    <ShootingStars
      frequency={2.5}
      angle={35}
      color="#FFFFFF"
      maxConcurrent={6}
    />
  );
}
```

---

### Siri Glow Edge (`SiriGlowEdge`)
- **Slug**: `siri-glow-edge`
- **Category**: Motion
- **Tagline**: Apple Intelligence chromatic perimeter glow with voice waveform reactions.
- **Description**: Apple Intelligence-inspired fluid perimeter rainbow chromatic aura with multi-layer conic gradient blur, breathing light cycles, live voice waveform reaction, and adjustable glow thickness.
- **Docs URL**: https://boseui.site/components/siri-glow-edge
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/siri-glow-edge.json`
- **Registry Manifest**: https://boseui.site/r/siri-glow-edge.json
- **Key Features**:
  - Multi-layer rotating conic rainbow gradient wrapping any container or card.
  - Dual-blur architecture combining sharp perimeter border sheen with atmospheric ambient bloom.
  - Realistic breathing light cycle with state-dependent pulse speeds (idle, listening, thinking, responding).
  - Dynamic live audio waveform bars synchronized with assistant voice modes.
  - Adjustable aura intensity and spread radius slider controls.
- **Accessibility**:
  - Uses accessible ARIA status updates when assistant state transitions between listening and idle.
  - Respects reduced motion preferences by dampening rotational speed and breathing pulsation.
  - High-contrast card core ensures text remains comfortably legible over luminous borders.
- **Props**:
  - `initialState` ("idle" | "listening" | "thinking" | "responding", default: "idle"): Initial state of the Apple Intelligence assistant aura.
  - `intensity` (number, default: 1.0): Brightness and opacity multiplier for the chromatic aura.
  - `glowWidth` (number, default: 14): Perimeter blur spread radius in pixels.
  - `enableBreathing` (boolean, default: true): Whether the aura subtly expands and breathes over time.
  - `children` (React.ReactNode): Content wrapped inside the illuminated glassmorphic card.
  - `className` (string): Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { SiriGlowEdge } from "@/components/ui/SiriGlowEdge";

export function Example() {
  return (
    <SiriGlowEdge initialState="listening" intensity={1.2}>
      <div className="p-6">
        <h3 className="font-semibold text-white">Apple Intelligence Active</h3>
        <p className="text-sm text-neutral-300">Listening to user instructions...</p>
      </div>
    </SiriGlowEdge>
  );
}
```

---

### Slash Command Menu (`SlashCommandMenu`)
- **Slug**: `slash-command-menu`
- **Category**: Inputs
- **Tagline**: Notion-style rich-text editor with '/' command popover and keyboard navigation.
- **Description**: Notion-style rich-text editor command menu triggered via '/', featuring fuzzy search filtering, keyboard arrow navigation, enter-to-insert blocks (Headings, To-Dos, Code Blocks, Callouts, Quotes), and delete controls.
- **Docs URL**: https://boseui.site/components/slash-command-menu
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/slash-command-menu.json`
- **Registry Manifest**: https://boseui.site/r/slash-command-menu.json
- **Key Features**:
  - Instant '/' command activation with real-time fuzzy query filtering.
  - Full keyboard ergonomics: ArrowUp / ArrowDown navigation, Enter insertion, and Escape dismissal.
  - Support for eight core block types: Headings 1/2/3, To-Do checklists, Code blocks, Callouts, and Quotes.
  - Interactive document canvas with toggleable todo checkboxes and delete actions.
  - Floating popover menu with glassmorphism backdrop blur and category organization.
- **Accessibility**:
  - Follows WAI-ARIA Combobox pattern with aria-expanded, aria-activedescendant, and role='listbox'.
  - Announces filtered search results and active block selections to assistive technology.
  - High-contrast focus rings and keyboard-friendly dismissal mechanics.
- **Props**:
  - `initialBlocks` (DocumentBlock[]): Initial list of rich document blocks to render in the editor canvas.
  - `placeholder` (string, default: "Type '/' for commands or start writing..."): Placeholder text rendered in the active writing input field.
  - `className` (string): Additional CSS classes to apply to the root container.
- **Usage Example**:
```tsx
import { SlashCommandMenu } from "@/components/ui/SlashCommandMenu";

export function Example() {
  return (
    <SlashCommandMenu
      placeholder="Type '/' to insert headings, code snippets, or checklists..."
    />
  );
}
```

---

### Snowfall (`Snowfall`)
- **Slug**: `snowfall`
- **Category**: Backgrounds
- **Tagline**: Depth-sorted snowfall with horizontal sine drift.
- **Description**: Depth-sorted Canvas 2D snowfall simulation where larger foreground particles fall faster with higher opacity while drifting horizontally on sine waves.
- **Docs URL**: https://boseui.site/components/snowfall
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/snowfall.json`
- **Registry Manifest**: https://boseui.site/r/snowfall.json
- **Key Features**:
  - Couples particle radius, opacity, and fall velocity to a depth factor (`0.2..1.0`) for natural 3D depth perception.
  - Horizontal sine-wave oscillation (`Math.sin`) combined with configurable wind slant.
  - Includes a Gentle Flurry / Winter Gale toggle in the default preview.
- **Accessibility**:
  - Marks the `<canvas>` layer with `aria-hidden='true'`.
  - High-contrast typography over the winter night backdrop.
  - Interactive mode toggle button supports keyboard focus.
- **Props**:
  - `flakeCount` (number, default: 140): Number of snowflakes rendered on the canvas.
  - `speed` (number, default: 1): Vertical fall speed multiplier.
  - `wind` (number, default: 0.3): Horizontal wind velocity factor (-2 to 2).
  - `maxSize` (number, default: 4.2): Maximum snowflake radius in pixels.
  - `children` (React.ReactNode): Optional foreground content rendered above the snowfall.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { Snowfall } from "@/components/ui/snowfall";

export function Example() {
  return (
    <Snowfall
      flakeCount={140}
      speed={1}
      wind={0.3}
    />
  );
}
```

---

### Solar Flare (`SolarFlare`)
- **Slug**: `solar-flare`
- **Category**: Backgrounds
- **Tagline**: Real-time WebGL photosphere granulation and coronal mass ejections.
- **Description**: Churning solar photosphere and coronal flare background powered by a custom WebGL fragment shader with domain-warped FBM plasma convection cells, magnetic sunspots, and glowing coronal prominences.
- **Docs URL**: https://boseui.site/components/solar-flare
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/solar-flare.json`
- **Registry Manifest**: https://boseui.site/r/solar-flare.json
- **Key Features**:
  - Custom WebGL GLSL fragment shader computing spherical normal projection and limb darkening
  - Multi-octave domain-warped Fractal Brownian Motion (FBM) for boiling plasma convection granules and sunspot umbrae
  - Dynamic coronal magnetic loops and radial streamers erupting off the solar limb
  - Livestellar presets (G-Type Photosphere, Blue Hypergiant, Red Magnetar) and interactive MHD controls
- **Accessibility**:
  - WebGL canvas is marked aria-hidden so screen readers focus on foreground hero content
  - Includes real-time speed and eruption intensity controls for adjusting visual motion
- **Props**:
  - `coreColor` (string, default: "#FFF7CC"): Hex color of the hottest incandescent plasma filaments and inner limb.
  - `flareColor` (string, default: "#FF5500"): Hex color of the chromosphere and erupting coronal prominences.
  - `turbulence` (number, default: 1.0): Domain-warping FBM turbulence multiplier for plasma granulation.
  - `speed` (number, default: 1.0): Animation speed multiplier for plasma convection and flare loops.
  - `eruptionIntensity` (number, default: 1.0): Intensity multiplier for coronal arches and solar wind streamers.
  - `children` (React.ReactNode): Optional foreground UI rendered above the solar shader.
  - `className` (string): Additional CSS classes for the root container.
- **Usage Example**:
```tsx
import { SolarFlare } from "@/components/ui/SolarFlare";

export function SolarFlareDemo() {
  return (
    <SolarFlare
      coreColor="#FFF7CC"
      flareColor="#FF5500"
      turbulence={1.0}
      speed={1.0}
      eruptionIntensity={1.0}
    />
  );
}
```

---

### Split Button (`SplitButton`)
- **Slug**: `split-button`
- **Category**: Buttons
- **Tagline**: A primary action with a chevron trigger for related actions.
- **Description**: A primary action fused with a chevron trigger that reveals related actions in a spring-timed dropdown, sharing a single pill silhouette.
- **Docs URL**: https://boseui.site/components/split-button
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/split-button.json`
- **Registry Manifest**: https://boseui.site/r/split-button.json
- **Key Features**:
  - Primary action and chevron trigger share a single rounded pill silhouette.
  - Chevron rotates with a snappy spring on open/close.
  - Menu flips above the trigger when there is not enough room below.
  - Supports primary, secondary, danger, and info visual variants.
  - Closes automatically on outside click and Escape.
- **Accessibility**:
  - Chevron trigger uses aria-haspopup="menu" and aria-expanded to announce state.
  - Dropdown uses role="menu" with role="menuitem" items.
  - Arrow Up/Down, Home, and End move roving focus between enabled items.
  - Enter/Space selects the active item; Escape closes and returns focus to the trigger.
  - Tab closes the menu without trapping focus.
  - Respects prefers-reduced-motion by collapsing spring transitions to instant.
- **Props**:
  - `label` (string): Label for the primary (left) action button.
  - `options` (SplitButtonOption[]): Dropdown options revealed by the chevron trigger.
  - `onClick` (() => void): Callback invoked when the primary action button is pressed.
  - `size` ("sm" | "md" | "lg", default: "md"): Padding and typography scale of the split button.
  - `variant` ("primary" | "secondary" | "danger" | "info", default: "primary"): Visual style of both halves of the control.
  - `disabled` (boolean, default: false): Disables both the primary button and dropdown trigger.
  - `className` (string): Additional CSS classes applied to the root wrapper.
- **Usage Example**:
```tsx
import { SplitButton } from "@/components/ui/split-button";

export function Example() {
  return (
    <SplitButton
      label="Deploy Release"
      options={[
        { value: "preview", label: "Deploy Preview" },
        { value: "staging", label: "Promote to Staging" },
        { value: "rollback", label: "Rollback Production" },
      ]}
    />
  );
}
```

---

### Split Flap Text (`SplitFlapText`)
- **Slug**: `split-flap-text`
- **Category**: Text
- **Tagline**: Mechanical departure-board tiles with 3D rotateX spring hinges.
- **Description**: Mechanical departure-board split-flap display that cycles character tiles with staggered 3D rotateX spring hinges.
- **Docs URL**: https://boseui.site/components/split-flap-text
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/split-flap-text.json`
- **Registry Manifest**: https://boseui.site/r/split-flap-text.json
- **Key Features**:
  - Individual character housing cells with a center mechanical split seam and 3D rotateX perspective flips.
  - Staggered per-tile wave delay creating an authentic Solari departure board cascade.
  - Click or press Enter/Space to cycle through an array of preset words.
- **Accessibility**:
  - Announces the active word via an sr-only role='status' live region while marking individual character cells aria-hidden='true'.
  - Board wrapper is a semantic button operable via Enter and Space keys.
  - Disables 3D rotateX flips when prefers-reduced-motion is active.
- **Props**:
  - `words` (string[], default: ["KINETIC", "PHYSICS", "SPRINGS", "MINIMAL"]): Array of words cycled on each split-flap board trigger.
  - `stiffness` (number, default: 380): Hooke's Law spring stiffness for 3D tile hinge rotation.
  - `damping` (number, default: 24): Spring damping coefficient controlling tile settle bounce.
- **Usage Example**:
```tsx
import { SplitFlapText } from "@/components/ui/split-flap-text";

export function Example() {
  return (
    <SplitFlapText
      words={["KINETIC", "PHYSICS", "SPRINGS", "MINIMAL"]}
      stiffness={380}
      damping={24}
    />
  );
}
```

---

### Spotlight Card (`SpotlightCard`)
- **Slug**: `spotlight-card`
- **Category**: Cards
- **Tagline**: Cursor-tracked radial spotlight and 1px border illumination.
- **Description**: Minimal surface card with GPU-composited radial cursor illumination, 1px CSS mask border reveal, and optional 3D perspective tilt.
- **Docs URL**: https://boseui.site/components/spotlight-card
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/spotlight-card.json`
- **Registry Manifest**: https://boseui.site/r/spotlight-card.json
- **Key Features**:
  - Simultaneous radial surface illumination and 1px CSS mask-composite border reveal.
  - Zero React re-renders during pointer movement using Framer Motion useMotionTemplate.
  - Optional damped 3D perspective tilt along X and Y axes.
- **Accessibility**:
  - Decorative radial spotlight and border mask layers are marked aria-hidden='true'.
  - Automatically disables 3D perspective rotation when prefers-reduced-motion is active.
  - Preserves full keyboard focus order and semantic child structure.
- **Props**:
  - `spotlightColor` (string, default: "rgba(128, 128, 128, 0.14)"): CSS color value for the internal radial surface illumination.
  - `borderColor` (string, default: "rgba(128, 128, 128, 0.55)"): CSS color value for the 1px mask-composite border highlight.
  - `spotlightRadius` (number, default: 320): Radius of the radial spotlight gradient in pixels.
  - `enableTilt` (boolean, default: false): Enables subtle 3D perspective tilt along X and Y axes on pointer movement.
- **Usage Example**:
```tsx
import { SpotlightCard } from "@/components/ui/spotlight-card";

export function Example() {
  return (
    <SpotlightCard enableTilt>
      <h3 className="text-lg font-semibold">Minimal Surface</h3>
      <p className="mt-2 text-sm text-neutral-500">
        Move your cursor across this surface to reveal the 1px border mask.
      </p>
    </SpotlightCard>
  );
}
```

---

### Spring Pin Input (`SpringPinInput`)
- **Slug**: `spring-pin-input`
- **Category**: Inputs
- **Tagline**: Tactile OTP slots with spring bounce and staggered completion wave.
- **Description**: Tactile OTP verification code input with per-digit spring impulse bounce, staggered completion wave, and harmonic error shake.
- **Docs URL**: https://boseui.site/components/spring-pin-input
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/spring-pin-input.json`
- **Registry Manifest**: https://boseui.site/r/spring-pin-input.json
- **Key Features**:
  - Auto-advancing numeric slots with Hooke's Law vertical bounce on each keystroke.
  - Staggered completion wave across all slots when the final digit is entered, plus full clipboard paste support.
  - Damped horizontal harmonic shake when a non-numeric key is pressed.
- **Accessibility**:
  - Wraps slots in role='group' with individual aria-label='Digit X of N' attributes and inputMode='numeric'.
  - Supports Backspace auto-retreat, ArrowLeft/ArrowRight navigation, and multi-digit clipboard paste.
  - Disables vertical bounce and horizontal error shake when prefers-reduced-motion is enabled.
- **Props**:
  - `length` (number, default: 6): Number of verification code character slots.
  - `defaultValue` (string, default: "482"): Initial digits pre-populated in the verification slots.
  - `stiffness` (number, default: 420): Spring stiffness coefficient for keystroke slot bounce.
  - `damping` (number, default: 22): Spring damping coefficient controlling slot oscillation decay.
  - `onComplete` ((pin: string) => void): Callback executed once all PIN code digits are filled
- **Usage Example**:
```tsx
import { SpringPinInput } from "@/components/ui/spring-pin-input";

export function Example() {
  return (
    <SpringPinInput
      length={6}
      defaultValue="482"
      onComplete={(code) => console.log("Verified:", code)}
    />
  );
}
```

---

### Starry Night (`StarryNight`)
- **Slug**: `starry-night`
- **Category**: Backgrounds
- **Tagline**: Twinkling Canvas 2D starfield with multi-layer mouse parallax.
- **Description**: Canvas 2D night sky rendering 100 to 350 depth-layered stars that twinkle via independent sine-wave phases and shift smoothly on pointer move.
- **Docs URL**: https://boseui.site/components/starry-night
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/starry-night.json`
- **Registry Manifest**: https://boseui.site/r/starry-night.json
- **Key Features**:
  - Draws 100 to 350 stars with randomized depth, radius, and sine-wave twinkle frequency.
  - Smoothly interpolates pointer coordinates for multi-layer depth parallax.
  - Includes a live Twinkle toggle button in the default preview.
- **Accessibility**:
  - Marks the `<canvas>` element with `aria-hidden='true'`.
  - High-contrast white text over the deep navy night sky gradient.
  - Interactive Twinkle toggle button is keyboard accessible.
- **Props**:
  - `density` (number, default: 200): Number of stars drawn on the canvas (40 to 400).
  - `twinkle` (boolean, default: true): Modulates star alpha over time with a sine wave per star.
  - `parallax` (number, default: 24): Maximum pixel shift on pointer movement.
  - `children` (React.ReactNode): Optional foreground content rendered above the starfield.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { StarryNight } from "@/components/ui/starry-night";

export function Example() {
  return (
    <StarryNight
      density={220}
      twinkle
      parallax={24}
    />
  );
}
```

---

### Stepper Wizard (`Stepper`)
- **Slug**: `stepper`
- **Category**: Navigation
- **Tagline**: Multi-step progress wizard with spring connector and step transitions.
- **Description**: Multi-step onboarding and checkout progress wizard with spring-animated connector bars, clickable step indicators, and directional panel transitions.
- **Docs URL**: https://boseui.site/components/stepper
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/stepper.json`
- **Registry Manifest**: https://boseui.site/r/stepper.json
- **Key Features**:
  - Spring-animated progress bar connecting step nodes with checkmark completion states.
  - Directional slide transitions when moving forward or backward between steps.
  - Supports both controlled (`activeStep`, `onStepChange`) and uncontrolled (`defaultStep`) usage.
- **Accessibility**:
  - Marks the active step button with aria-current='step'.
  - Keyboard-focusable step indicators and navigation buttons.
  - Respects prefers-reduced-motion for step transitions and progress fills.
- **Props**:
  - `steps` (StepItem[]): Array of step objects ({ id, title, description, detail }).
  - `activeStep` (number): Controlled active step index (0-based).
  - `defaultStep` (number, default: 0): Initial active step index for uncontrolled mode.
  - `onStepChange` ((stepIndex: number) => void): Callback fired whenever the active step changes.
  - `onComplete` (() => void): Callback fired when the user completes the final step.
  - `allowStepClick` (boolean, default: true): Allows users to jump directly to a step by clicking its node.
  - `className` (string): Additional Tailwind CSS classes for the outer wizard container.
- **Usage Example**:
```tsx
import { Stepper } from "@/components/ui/stepper";

export function Example() {
  return (
    <Stepper
      onStepChange={(step) => console.log("Active step:", step)}
      onComplete={() => console.log("Wizard completed!")}
    />
  );
}
```

---

### Stepper & Slider (`StepperSliderControl`)
- **Slug**: `stepper-slider-control`
- **Category**: Inputs
- **Tagline**: Minimal (− / +) stepper synced with a thin-track slider.
- **Description**: Synchronized precision control pairing a thin-track slider and large round thumb with a tactile (− / +) segmented stepper pill.
- **Docs URL**: https://boseui.site/components/stepper-slider-control
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/stepper-slider-control.json`
- **Registry Manifest**: https://boseui.site/r/stepper-slider-control.json
- **Key Features**:
  - Thin 6px slider track paired with a prominent 24px circular thumb that scales on pointer drag.
  - Segmented (− | +) pill stepper for exact incremental adjustments.
  - Supports both controlled (`value`, `onChange`) and uncontrolled (`defaultValue`) modes.
- **Accessibility**:
  - Exposes WAI-ARIA `role='slider'` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`.
  - Supports `ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`, `Home`, and `End` keys.
  - Stepper buttons include descriptive `aria-label` attributes and disabled boundary states.
- **Props**:
  - `label` (string, default: "Display Brightness"): Label displayed above the slider track.
  - `value` (number): Controlled numeric value.
  - `defaultValue` (number, default: 65): Initial value for uncontrolled mode.
  - `min` (number, default: 0): Minimum allowed value.
  - `max` (number, default: 100): Maximum allowed value.
  - `step` (number, default: 5): Step increment for both slider snapping and (− / +) buttons.
  - `unit` (string, default: "%"): Unit suffix displayed next to the numeric value.
  - `onChange` ((value: number) => void): Callback fired when the value changes.
  - `disabled` (boolean, default: false): Disables both slider and stepper buttons.
  - `className` (string): Additional Tailwind CSS classes for the outer card.
- **Usage Example**:
```tsx
import { StepperSliderControl } from "@/components/ui/stepper-slider-control";

export function Example() {
  return (
    <StepperSliderControl
      label="Display Brightness"
      defaultValue={65}
      min={0}
      max={100}
      step={5}
      unit="%"
    />
  );
}
```

---

### Sticky Scroll Storytelling (`StickyScrollStory`)
- **Slug**: `sticky-scroll-story`
- **Category**: Cards
- **Tagline**: Pinned storytelling layout with synced media transitions.
- **Description**: Pinned split-screen storytelling layout where scrolling through text chapters on the left animates the sticky media stage on the right in real time.
- **Docs URL**: https://boseui.site/components/sticky-scroll-story
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/sticky-scroll-story.json`
- **Registry Manifest**: https://boseui.site/r/sticky-scroll-story.json
- **Key Features**:
  - Split layout with scrollable narrative chapters on the left and a sticky media card on the right.
  - Automatically tracks scroll position and syncs the active chapter with spring transitions.
  - Clickable chapter blocks and top progress dots for instant keyboard/pointer navigation.
- **Accessibility**:
  - Includes clickable chapter indicators with descriptive aria-labels for non-scroll navigation.
  - Maintains high-contrast focus and active states on the current narrative step.
  - Respects prefers-reduced-motion for media card transitions.
- **Props**:
  - `sections` (StorySection[]): Array of chapters ({ id, badge, title, description, metricLabel, metricValue }).
  - `heading` (string, default: "Scroll inside the container or click any chapter"): Helper text displayed in the top bar of the storytelling container.
  - `className` (string): Additional Tailwind CSS classes for the outer wrapper.
- **Usage Example**:
```tsx
import { StickyScrollStory } from "@/components/ui/sticky-scroll-story";

export function Example() {
  return <StickyScrollStory />;
}
```

---

### Sticky Sub-Nav (`StickySubNav`)
- **Slug**: `sticky-sub-nav`
- **Category**: Navigation
- **Tagline**: Product sub-navigation bar that appears on scroll with Buy CTA.
- **Description**: Product-level frosted sticky sub-navigation bar that smoothly slides into view once the hero section scrolls out, pairing the product title on the left with a 'Buy' CTA pill on the right.
- **Docs URL**: https://boseui.site/components/sticky-sub-nav
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/sticky-sub-nav.json`
- **Registry Manifest**: https://boseui.site/r/sticky-sub-nav.json
- **Key Features**:
  - Automatically reveals with a spring slide-down animation (`backdrop-blur-xl`) once the hero section scrolls past.
  - Displays product title on the left, section links in the center, and price + 'Buy' CTA pill on the right.
  - Includes a self-contained scrollable demo viewport so you can test the scroll trigger immediately.
- **Accessibility**:
  - Uses semantic `<header>` and `<nav>` landmarks.
  - Interactive Buy button announces confirmation state visually and via text.
  - Respects `prefers-reduced-motion` for header entry and exit transitions.
- **Props**:
  - `productTitle` (string, default: "Studio Display Pro"): Product name displayed on the left side of the sticky bar.
  - `priceLabel` (string, default: "$1,599"): Price string displayed next to the Buy button.
  - `ctaLabel` (string, default: "Buy"): Label inside the primary right-hand CTA pill.
  - `links` (SubNavLink[]): Array of navigation links ({ id, label }) shown in the bar.
  - `onBuy` (() => void): Callback fired when the Buy button is clicked.
  - `className` (string): Additional Tailwind CSS classes for the outer container.
- **Usage Example**:
```tsx
import { StickySubNav } from "@/components/ui/sticky-sub-nav";

export function Example() {
  return (
    <StickySubNav
      productTitle="Studio Display Pro"
      priceLabel="$1,599"
      ctaLabel="Buy"
    />
  );
}
```

---

### Streak Counter (`StreakCounter`)
- **Slug**: `streak-counter`
- **Category**: Motion
- **Tagline**: Duolingo-inspired gamified streak counter with pulsing flame and confetti explosion.
- **Description**: Duolingo-style gamified streak counter featuring a pulsing animated flame avatar with floating sparks, 7-day calendar circle row with completion checks, freeze shield, and celebratory confetti explosion.
- **Docs URL**: https://boseui.site/components/streak-counter
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/streak-counter.json`
- **Registry Manifest**: https://boseui.site/r/streak-counter.json
- **Key Features**:
  - Pulsing heat wave and floating ember sparks surrounding a rich gradient flame badge.
  - Dynamic 7-day calendar circle row reflecting past completion, today's active state, and locked days.
  - Radial multi-color confetti explosion upon claiming the day's streak.
  - Milestone progress indicator tracking user progression to subsequent tier badges (e.g. 21-Day Club).
  - Interactive streak freeze shield badge communicating protection against broken streaks.
  - Live controls to inspect different streak counts and reset demonstration states.
- **Accessibility**:
  - Semantic buttons with full state descriptions (claimed vs pending).
  - High contrast status badges communicating completed and locked days.
  - Animations respect prefers-reduced-motion for reduced motion users.
- **Props**:
  - `initialStreak` (number, default: 14): Initial number of consecutive active days.
  - `initialClaimed` (boolean, default: false): Whether the streak has already been locked in for today.
  - `hasStreakFreeze` (boolean, default: true): Whether the user has a streak freeze equipped to protect missed days.
  - `onClaim` ((newStreak: number) => void): Callback invoked when today's streak is claimed.
  - `className` (string): Optional custom CSS classes for the container wrapper.
- **Usage Example**:
```tsx
import { StreakCounter } from "@/components/ui/streak-counter";

export function Example() {
  return (
    <StreakCounter
      initialStreak={14}
      initialClaimed={false}
      hasStreakFreeze={true}
      onClaim={(newStreak) => console.log("Claimed streak:", newStreak)}
    />
  );
}
```

---

### Sunrise Horizon (`SunriseHorizon`)
- **Slug**: `sunrise-horizon`
- **Category**: Backgrounds
- **Tagline**: Dynamic sky gradient with solar arc and horizon silhouettes.
- **Description**: Layered atmospheric sky background that interpolates zenith, horizon, and solar glow gradients along a continuous solar arc from dawn to noon to dusk.
- **Docs URL**: https://boseui.site/components/sunrise-horizon
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/sunrise-horizon.json`
- **Registry Manifest**: https://boseui.site/r/sunrise-horizon.json
- **Key Features**:
  - Interpolates deep navy, violet, amber, and sky-blue stops via a normalized `time` value (0 to 1) or named presets ('dawn', 'noon', 'dusk').
  - Translates the sun orb and radial horizon bloom along a sinusoidal arc behind SVG mountain silhouettes.
  - Includes interactive Dawn/Noon/Dusk preset buttons and a live solar-arc scrubber out of the box.
- **Accessibility**:
  - Decorative sky layers and SVG silhouettes are marked with `aria-hidden='true'`.
  - Interactive time scrubber and play/pause controls include explicit `aria-label` attributes.
  - Supports pausing continuous sky animation at any time.
- **Props**:
  - `time` (number | "dawn" | "noon" | "dusk", default: "dawn"): Time of day from 0 to 1, or a named preset ('dawn', 'noon', 'dusk').
  - `autoplay` (boolean, default: true): Continuously animates the solar arc through the day cycle.
  - `sunSize` (number, default: 92): Diameter of the sun orb in pixels.
  - `grain` (boolean, default: true): Overlays a subtle atmospheric grain texture.
  - `children` (React.ReactNode): Optional foreground content rendered above the horizon.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { SunriseHorizon } from "@/components/ui/sunrise-horizon";

export function Example() {
  return (
    <SunriseHorizon
      time="dawn"
      autoplay
      sunSize={96}
      grain
    />
  );
}
```

---

### Swipe Cards (`SwipeCards`)
- **Slug**: `swipe-cards`
- **Category**: Cards
- **Tagline**: Tinder-inspired swipeable card deck with drag physics and stamp overlays.
- **Description**: Tinder-style swipeable card deck with drag physics, rotational tilt proportional to delta X, floating LIKE and NOPE stamp overlays, stack scale-up, and rewind capabilities.
- **Docs URL**: https://boseui.site/components/swipe-cards
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/swipe-cards.json`
- **Registry Manifest**: https://boseui.site/r/swipe-cards.json
- **Key Features**:
  - Intuitive horizontal drag gestures with Hooke's Law spring returns and velocity discard threshold.
  - Dynamic rotational tilt and opacity stamps ('LIKE' / 'NOPE') mapped to drag offset.
  - Background cards dynamically scale up and lift forward as top cards are swiped away.
  - Tactile bottom action buttons (Rewind, Nope, Super Like, Like, Boost) with spring tap feedback.
  - Undo / Rewind stack tracking allowing users to bring back recently swiped cards.
- **Accessibility**:
  - Fully operable via standalone action buttons for keyboard and assistive tech users.
  - All action triggers include accessible ARIA labels with state feedback.
  - Gracefully operates with reduced motion settings enabled.
- **Props**:
  - `profiles` (ProfileCard[]): Array of profile items containing bio, metadata, tags, and visuals.
  - `onSwipe` ((card: ProfileCard, direction: "like" | "nope" | "superlike") => void): Callback invoked when a card is swiped or action button is pressed.
  - `className` (string): Optional custom CSS classes for the container wrapper.
- **Usage Example**:
```tsx
import { SwipeCards } from "@/components/ui/swipe-cards";

export function Example() {
  return (
    <SwipeCards
      onSwipe={(card, dir) => console.log(`Swiped ${dir} on ${card.name}`)}
    />
  );
}
```

---

### Tabbed Code Block (`TabbedCodeBlock`)
- **Slug**: `tabbed-code-block`
- **Category**: Cards
- **Tagline**: Multi-language developer code block with sliding tab underlines and terminal console runner.
- **Description**: Multi-language developer code block featuring smooth sliding active tab underlines, syntax-token highlighting, line numbering, one-click copy, and an interactive simulated terminal runner.
- **Docs URL**: https://boseui.site/components/tabbed-code-block
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/tabbed-code-block.json`
- **Registry Manifest**: https://boseui.site/r/tabbed-code-block.json
- **Key Features**:
  - Multi-language tabs (cURL, Node.js, Python, Go) with spring layout sliding indicator.
  - Granular token-based syntax coloring without hefty runtime parsing dependencies.
  - Configurable line numbering and emphasized line highlight callouts.
  - One-click copy to clipboard with responsive checkmark confirmation.
  - Integrated collapsible live terminal console simulating real HTTP 200 JSON API responses.
- **Accessibility**:
  - Built with ARIA tablist, tab, and tabpanel semantic roles.
  - Accessible clipboard feedback with screen-reader friendly status transitions.
  - High-contrast color scheme adhering to WCAG AAA developer terminal guidelines.
- **Props**:
  - `defaultLang` (string, default: 'node'): Default active programming language tab ('curl', 'node', 'python', 'go').
  - `showLineNumbers` (boolean, default: true): Whether to display line numbers alongside the code tokens.
  - `className` (string): Optional CSS classes to apply to the root container.
- **Usage Example**:
```tsx
import { TabbedCodeBlock } from "@/components/ui/TabbedCodeBlock";

export function Example() {
  return (
    <div className="w-full">
      <TabbedCodeBlock defaultLang="node" showLineNumbers={true} />
    </div>
  );
}
```

---

### Thunderstorm (`Thunderstorm`)
- **Slug**: `thunderstorm`
- **Category**: Backgrounds
- **Tagline**: Branching fractal lightning bolts with storm cloud illumination.
- **Description**: Dramatic thunderstorm background featuring recursive midpoint-displacement branching lightning bolts, dark rolling cloud banks, and wind-driven rain streaks on Canvas 2D.
- **Docs URL**: https://boseui.site/components/thunderstorm
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/thunderstorm.json`
- **Registry Manifest**: https://boseui.site/r/thunderstorm.json
- **Key Features**:
  - Recursive midpoint-displacement lightning generator with secondary forks and multi-pass plasma bloom
  - Dynamic cloud deck and atmospheric screen exposure flash on every strike
  - Depth-sorted wind-driven rain streaks with adjustable angle and density
  - Click-to-strike sky interaction plus manual Trigger Strike HUD button
- **Accessibility**:
  - Adjustable flashIntensity prop allows toning down screen exposure flashes for photosensitive users
  - Interactive Trigger Strike button and range controls are keyboard accessible
- **Props**:
  - `rainIntensity` (number, default: 180): Number of wind-driven rain streaks rendered across the scene.
  - `lightningFrequency` (number, default: 0.35): Rate of automatic procedural lightning strikes (0 = manual only, 1 = frequent).
  - `windAngle` (number, default: 14): Wind tilt angle in degrees (-30 to 30) affecting rain streaks and cloud drift.
  - `boltColor` (string, default: "#E0F2FE"): Hex color for the lightning plasma bloom and cloud deck illumination.
  - `flashIntensity` (number, default: 0.6): Intensity of the screen and cloud illumination flash during a strike (0 to 1).
  - `children` (React.ReactNode): Optional foreground UI rendered above the storm canvas.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { Thunderstorm } from "@/components/ui/Thunderstorm";

export default function ThunderstormDemo() {
  return (
    <Thunderstorm
      rainIntensity={180}
      lightningFrequency={0.35}
      windAngle={14}
      boltColor="#E0F2FE"
      flashIntensity={0.6}
    >
      <div className="flex min-h-[520px] flex-col items-center justify-center p-8 text-center">
        <h1 className="text-4xl font-bold tracking-tight text-white">
          Electric Horizon
        </h1>
        <p className="mt-3 max-w-md text-slate-300">
          Procedural fractal lightning and wind-driven rain powered by Canvas 2D.
        </p>
      </div>
    </Thunderstorm>
  );
}
```

---

### Tilt Credit Card 3D (`TiltCreditCard3D`)
- **Slug**: `tilt-credit-card3-d`
- **Category**: Cards
- **Tagline**: Ultra-premium 3D metal credit card with dynamic cursor tilt and holographic foil reflection.
- **Description**: Revolut and Apple Card-inspired premium 3D metal card with cursor-tilt gyroscope physics, rainbow holographic foil reflection, gold EMV chip, contactless RFID waves, and dual-side flip mechanics.
- **Docs URL**: https://boseui.site/components/tilt-credit-card3-d
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/tilt-credit-card3-d.json`
- **Registry Manifest**: https://boseui.site/r/tilt-credit-card3-d.json
- **Key Features**:
  - Hooke's Law spring physics for cursor tilt tracking with realistic angular dampening.
  - Dynamic rainbow prism holographic glare layer responding to pointer coordinates.
  - Dual-sided card view with flip mechanics showing magnetic stripe, signature strip, and CVV.
  - Debossed typography with customizable cardholder name and sensitive number masking.
  - Four distinct material finishes: Titanium Metal, Obsidian Black, Rose Gold, and Holo Prism.
- **Accessibility**:
  - Keyboard accessible flip action for accessing back-of-card security details.
  - Masked digits by default for privacy, with toggleable screen-reader announcements.
  - Respects reduced-motion preferences by dampening rotational angles.
- **Props**:
  - `cardHolder` (string, default: "ALEXANDER VANCE"): Name embossed on the front of the credit card.
  - `cardNumber` (string, default: "4532 8901 2345 7892"): 16-digit card number displayed on the card surface.
  - `expiry` (string, default: "09/29"): Expiration date in MM/YY format.
  - `cvv` (string, default: "842"): 3-digit card verification value on the reverse signature strip.
  - `theme` ("titanium" | "obsidian" | "rosegold" | "holographic", default: "titanium"): Visual texture and metallic gradient preset.
  - `className` (string): Additional CSS classes to apply to the root container.
- **Usage Example**:
```tsx
import { TiltCreditCard3D } from "@/components/ui/TiltCreditCard3D";

export function Example() {
  return (
    <TiltCreditCard3D
      cardHolder="SOPHIA NAKAMOTO"
      cardNumber="4820 1934 8291 0422"
      expiry="12/30"
      cvv="719"
      theme="holographic"
    />
  );
}
```

---

### Toast Stack (`ToastStack`)
- **Slug**: `toast-stack`
- **Category**: Overlays
- **Tagline**: Viewport-positioned stacked notifications with hover fan-out.
- **Description**: Stacked viewport notification toasts supporting 6 viewport positions (top/bottom + left/center/right), hover fan-out, and auto-dismiss.
- **Docs URL**: https://boseui.site/components/toast-stack
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/toast-stack.json`
- **Registry Manifest**: https://boseui.site/r/toast-stack.json
- **Key Features**:
  - Supports 6 viewport positions: top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
  - Renders in a top-level React portal (z-9999) with auto-dismiss that pauses on hover.
  - Expands smoothly into a full list when hovering over the stacked notifications.
- **Accessibility**:
  - Uses role='region' and aria-live='polite' so screen readers announce incoming toasts.
  - Each toast includes a keyboard-accessible dismiss button with aria-label.
  - Respects prefers-reduced-motion for entry and exit transitions.
- **Props**:
  - `position` ("top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right", default: "bottom-right"): Viewport placement where the toast stack is anchored.
  - `initialToasts` (ToastItem[], default: []): Initial array of toast notifications rendered in the stack.
  - `maxVisible` (number, default: 4): Maximum number of toasts visible in the stack at once.
  - `autoDismiss` (boolean, default: true): Automatically dismisses toasts after duration (pauses while hovering).
  - `duration` (number, default: 4500): Time in milliseconds before a toast auto-dismisses.
  - `viewportPortal` (boolean, default: true): Renders the toast stack into document.body at z-[9999].
  - `className` (string): Additional CSS classes applied to the control panel wrapper.
- **Usage Example**:
```tsx
import { ToastStack } from "@/components/ui/toast-stack";

export function Example() {
  return (
    <ToastStack
      position="bottom-right"
      maxVisible={4}
      autoDismiss
      duration={4500}
    />
  );
}
```

---

### Topographic Ripple Surface (`TopographicRippleSurface`)
- **Slug**: `topographic-ripple-surface`
- **Category**: Backgrounds
- **Tagline**: Multi-mass concentric contour rings with radial ripple propagation.
- **Description**: Concentric contour ring background where pointer movement warps isolines with graduated spring mass and clicks emit a radial ripple.
- **Docs URL**: https://boseui.site/components/topographic-ripple-surface
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/topographic-ripple-surface.json`
- **Registry Manifest**: https://boseui.site/r/topographic-ripple-surface.json
- **Key Features**:
  - Graduated spring stiffness and mass per contour ring so inner isolines track tightly while outer rings trail organically.
  - Click-triggered radial shockwave that ripples outward across all concentric rings.
  - Zero React state re-renders during continuous pointer movement.
- **Accessibility**:
  - All decorative contour rings are marked aria-hidden='true'.
  - Locks contour rings in concentric alignment and disables shockwave scaling when prefers-reduced-motion is active.
  - Maintains high foreground contrast with a frosted backdrop container.
- **Props**:
  - `ringCount` (number, default: 6): Number of concentric topographic contour rings.
  - `stiffness` (number, default: 220): Base spring stiffness coefficient for the innermost contour ring.
  - `damping` (number, default: 20): Base spring damping coefficient for contour displacement.
- **Usage Example**:
```tsx
import { TopographicRippleSurface } from "@/components/ui/topographic-ripple-surface";

export function Example() {
  return (
    <TopographicRippleSurface ringCount={6} stiffness={220} damping={20} />
  );
}
```

---

### Underwater Caustics (`UnderwaterCaustics`)
- **Slug**: `underwater-caustics`
- **Category**: Backgrounds
- **Tagline**: Refracted GLSL cellular caustics, sunbeams, and rising bubbles.
- **Description**: Shimmering underwater caustic light network powered by a real-time WebGL fragment shader with subtle chromatic dispersion, diagonal volumetric God-ray sunbeams, and buoyant rising bubbles.
- **Docs URL**: https://boseui.site/components/underwater-caustics
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/underwater-caustics.json`
- **Registry Manifest**: https://boseui.site/r/underwater-caustics.json
- **Key Features**:
  - 5-iteration domain-warped trigonometric GLSL caustic solver with RGB chromatic dispersion.
  - Volumetric diagonal sunbeams attenuating smoothly with water depth.
  - Buoyant rising bubbles on an overlay 2D canvas with horizontal sine oscillation and specular glints.
- **Accessibility**:
  - Both WebGL and 2D bubble canvases are marked `aria-hidden='true'`.
  - Interactive Lagoon, Cenote, and Abyssal presets are fully keyboard operable.
  - Maintains strong contrast for foreground white text via abyssal depth vignettes.
- **Props**:
  - `waterColor` (string, default: "#0369A1"): Primary underwater hex color used for surface-to-floor light attenuation.
  - `causticIntensity` (number, default: 1.0): Brightness multiplier for the refracted caustic network and sunbeams.
  - `speed` (number, default: 1.0): Animation speed multiplier for caustic undulation and bubble ascent.
  - `bubbleCount` (number, default: 35): Number of buoyant rising bubbles with horizontal sine wobble.
  - `sunbeams` (boolean, default: true): Toggles diagonal volumetric sunbeams radiating from the water surface.
  - `children` (React.ReactNode): Optional foreground content rendered above the underwater scene.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { UnderwaterCaustics } from "@/components/ui/underwater-caustics";

export function Example() {
  return (
    <UnderwaterCaustics
      waterColor="#0369A1"
      causticIntensity={1.1}
      speed={1.0}
      bubbleCount={35}
      sunbeams
    />
  );
}
```

---

### Variable Proximity Text (`VariableProximityText`)
- **Slug**: `variable-proximity-text`
- **Category**: Text
- **Tagline**: Real-time 2D Euclidean glyph lift and scale interpolation.
- **Description**: Interactive kinetic typography where each glyph interpolates vertical lift, scale, and contrast based on real-time 2D cursor proximity.
- **Docs URL**: https://boseui.site/components/variable-proximity-text
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/variable-proximity-text.json`
- **Registry Manifest**: https://boseui.site/r/variable-proximity-text.json
- **Key Features**:
  - Per-glyph 2D Euclidean distance field driven by Framer Motion MotionValues without React state re-renders.
  - Word-aware wrapping that prevents mid-word line breaks on responsive viewports.
  - Screen-reader safe architecture pairing a single sr-only text node with aria-hidden visual spans.
- **Accessibility**:
  - Provides a single uninterrupted sr-only text string so screen readers never stutter over split characters.
  - Marks individual animated glyph spans with aria-hidden='true'.
  - Respects prefers-reduced-motion by locking glyphs at resting baseline and full contrast.
- **Props**:
  - `text` (string, default: "Kinetic typography engineered with spring physics."): The text string rendered as proximity-reactive glyphs.
  - `radius` (number, default: 120): Pointer influence radius in pixels around the cursor.
  - `maxLift` (number, default: -10): Peak vertical displacement in pixels at zero pointer distance.
  - `maxScale` (number, default: 1.22): Peak glyph scale factor at zero pointer distance.
  - `stiffness` (number, default: 300): Spring stiffness coefficient for glyph lift and scale.
  - `damping` (number, default: 22): Spring damping coefficient controlling glyph oscillation decay.
- **Usage Example**:
```tsx
import { VariableProximityText } from "@/components/ui/variable-proximity-text";

export function Example() {
  return (
    <VariableProximityText
      text="Engineered with Hooke's Law spring physics."
      radius={120}
      maxLift={-10}
      maxScale={1.22}
    />
  );
}
```

---

### Volcano Embers (`VolcanoEmbers`)
- **Slug**: `volcano-embers`
- **Category**: Backgrounds
- **Tagline**: Incandescent sparks and thermal ash rising from a molten horizon.
- **Description**: Rising volcanic embers and charred thermal ash on Canvas 2D with molten caldera horizon glow, velocity-aligned incandescent spark trails, and turbulent updraft vortices.
- **Docs URL**: https://boseui.site/components/volcano-embers
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/volcano-embers.json`
- **Registry Manifest**: https://boseui.site/r/volcano-embers.json
- **Key Features**:
  - Velocity-aligned incandescent ember streaks with radial bloom halos and cooling curves
  - Mixed particle simulation combining glowing sparks and charred floating thermal ash
  - Pulsing molten caldera horizon glow behind a dark basalt rim silhouette
  - Interactive pointer updraft repulsion and live HUD controls for ember color, updraft, and swirl
- **Accessibility**:
  - Canvas layer uses pointer-events-none so foreground interactive elements remain unobstructed
  - Interactive HUD presets and sliders support full keyboard focus and manipulation
- **Props**:
  - `emberCount` (number, default: 110): Total number of rising embers and thermal ash particles.
  - `updraftSpeed` (number, default: 1.2): Vertical thermal updraft velocity multiplier.
  - `turbulence` (number, default: 1.0): Intensity of horizontal curl turbulence and vortex swirl.
  - `emberColor` (string, default: "#FF6B1A"): Primary hex color for the glowing embers and caldera horizon.
  - `coreGlow` (number, default: 0.8): Intensity of the molten magma glow along the bottom horizon (0 to 1.5).
  - `children` (React.ReactNode): Optional foreground UI rendered above the embers canvas.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { VolcanoEmbers } from "@/components/ui/VolcanoEmbers";

export default function VolcanoEmbersDemo() {
  return (
    <VolcanoEmbers
      emberCount={110}
      updraftSpeed={1.2}
      turbulence={1.0}
      emberColor="#FF6B1A"
      coreGlow={0.8}
    >
      <div className="flex min-h-[520px] flex-col items-center justify-center p-8 text-center">
        <h1 className="text-4xl font-bold tracking-tight text-white">
          Forged in Magma
        </h1>
        <p className="mt-3 max-w-md text-orange-100/80">
          Incandescent embers and ash rising on turbulent volcanic updrafts.
        </p>
      </div>
    </VolcanoEmbers>
  );
}
```

---

### Warp Speed (`WarpSpeed`)
- **Slug**: `warp-speed`
- **Category**: Backgrounds
- **Tagline**: 3D hyperspace tunnel with warp jump and cursor vanishing point.
- **Description**: 3D hyperspace starfield using perspective projection (`screenX = x / z`, `screenY = y / z`), delta-time streak rendering, a cursor-following vanishing point, and a warp jump accelerator.
- **Docs URL**: https://boseui.site/components/warp-speed
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/warp-speed.json`
- **Registry Manifest**: https://boseui.site/r/warp-speed.json
- **Key Features**:
  - Projects `(x, y, z)` coordinates each frame using `x / z` perspective division and draws velocity streaks from the previous frame.
  - Smoothly ramps velocity 5x when `warp` mode is engaged.
  - Vanishing point smoothly tracks the user's pointer or locks to a custom `center` coordinate.
- **Accessibility**:
  - Marks the `<canvas>` layer with `aria-hidden='true'`.
  - Interactive 'Engage Warp Jump' toggle button is keyboard accessible.
  - Maintains high-contrast text legibility over the `#03050C` space canvas.
- **Props**:
  - `speed` (number, default: 180): Base forward Z-axis travel speed.
  - `starCount` (number, default: 320): Number of 3D stars inside the projection volume.
  - `streakLength` (number, default: 1.4): Length multiplier for each star's motion-blur streak.
  - `warp` (boolean, default: false): Ramps velocity up 5x for the hyperspace jump effect.
  - `center` ({ x: number; y: number }, default: { x: 0.5, y: 0.5 }): Normalized vanishing point coordinates (0 to 1).
  - `followCursor` (boolean, default: true): Steers the vanishing point toward the cursor on hover.
  - `children` (React.ReactNode): Optional foreground content rendered above the warp tunnel.
  - `className` (string): Additional Tailwind CSS classes for the container.
- **Usage Example**:
```tsx
import { WarpSpeed } from "@/components/ui/warp-speed";

export function Example() {
  return (
    <WarpSpeed
      speed={180}
      starCount={320}
      streakLength={1.4}
      followCursor
    />
  );
}
```

---

### Water Ripples (`WaterRipples`)
- **Slug**: `water-ripples`
- **Category**: Backgrounds
- **Tagline**: Interactive 2D wave-equation height-map and specular ripple rings.
- **Description**: Interactive water surface ripple simulation combining a real-time 2D finite-difference wave-equation height-map buffer with expanding specular caustic refraction rings triggered by cursor wakes, clicks, and ambient droplets.
- **Docs URL**: https://boseui.site/components/water-ripples
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/water-ripples.json`
- **Registry Manifest**: https://boseui.site/r/water-ripples.json
- **Key Features**:
  - Real-time 2D finite-difference height-map solver computing surface normal refraction per pixel.
  - High-DPI concentric specular harmonic rings that expand and constructively interfere.
  - Responds to pointer wakes, click impacts, and toggleable periodic rain droplets.
- **Accessibility**:
  - Marks the simulation canvas with `aria-hidden='true'`.
  - Stop-propagates pointer events on HUD controls so slider adjustments do not trigger unwanted splashes.
  - Supports non-interactive ambient mode via `interactive={false}`.
- **Props**:
  - `damping` (number, default: 0.97): Wave energy retention multiplier per simulation step (0.90 to 0.995).
  - `rippleRadius` (number, default: 140): Maximum expansion radius in pixels for spawned concentric specular rings.
  - `ambientDrops` (boolean, default: true): Automatically drops periodic rain ripples onto the water surface.
  - `color` (string, default: "#38BDF8"): Hex color tint for refracted surface normals and specular caustic rings.
  - `interactive` (boolean, default: true): Enables pointer movement wakes and click splash disturbances.
  - `children` (React.ReactNode): Optional foreground UI rendered above the water surface.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { WaterRipples } from "@/components/ui/water-ripples";

export function Example() {
  return (
    <WaterRipples
      damping={0.97}
      rippleRadius={140}
      ambientDrops
      color="#38BDF8"
      interactive
    />
  );
}
```

---

### Waterfall (`Waterfall`)
- **Slug**: `waterfall`
- **Category**: Backgrounds
- **Tagline**: Gravity-accelerated hydro streaks and volumetric plunge mist.
- **Description**: Physics-driven cascading waterfall background rendered on HTML5 Canvas 2D with 240+ layered vertical hydro streaks, gravity-accelerated splash droplets, and a pulsing volumetric mist cloud at the plunge basin.
- **Docs URL**: https://boseui.site/components/waterfall
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/waterfall.json`
- **Registry Manifest**: https://boseui.site/r/waterfall.json
- **Key Features**:
  - Three depth-sorted hydro streak layers with independent speed, thickness, and additive screen luminance.
  - Ballistic splash droplets launched upward from the plunge line with real-time gravity decay.
  - Pulsing volumetric mist puffs and shimmering water surface ripples along the basin floor.
- **Accessibility**:
  - Marks the decorative Canvas 2D element and vignette overlays with `aria-hidden='true'`.
  - High-contrast glassmorphic HUD controls remain keyboard accessible when no custom children are passed.
  - Automatically scales to devicePixelRatio (capped at 2x) via ResizeObserver without layout thrashing.
- **Props**:
  - `flow` (number, default: 1.0): Velocity multiplier for falling water streaks and splash kinetics.
  - `mistAmount` (number, default: 0.75): Opacity and density of the pulsing volumetric mist cloud at the plunge pool line (0 to 1).
  - `color` (string, default: "#38BDF8"): Primary hex color tint for the water streaks, subsurface glow, and mist.
  - `curtainWidth` (number, default: 0.75): Horizontal span of the waterfall curtain relative to the container width (0.3 to 1.0).
  - `splashIntensity` (number, default: 1.0): Spawn rate multiplier for upward-bouncing splash droplets at the plunge line.
  - `children` (React.ReactNode): Optional foreground UI rendered above the waterfall canvas.
  - `className` (string): Additional Tailwind CSS classes for the root container.
- **Usage Example**:
```tsx
import { Waterfall } from "@/components/ui/waterfall";

export function Example() {
  return (
    <Waterfall
      flow={1.15}
      mistAmount={0.8}
      color="#38BDF8"
      curtainWidth={0.75}
      splashIntensity={1.0}
    />
  );
}
```

---

### Wormhole Tunnel (`WormholeTunnel`)
- **Slug**: `wormhole-tunnel`
- **Category**: Backgrounds
- **Tagline**: Interactive Einstein-Rosen conduit with helical twist and spectrum shift.
- **Description**: Structured hyperspace wormhole tunnel on Canvas 2D featuring concentric polygonal energy rings and longitudinal warp ribs scaling from an interactive Lissajous vanishing point.
- **Docs URL**: https://boseui.site/components/wormhole-tunnel
- **shadcn CLI Install**: `npx shadcn@latest add https://boseui.site/r/wormhole-tunnel.json`
- **Registry Manifest**: https://boseui.site/r/wormhole-tunnel.json
- **Key Features**:
  - Exponential 3D perspective projection of concentric geodesic rings and longitudinal ribs
  - Pointer-reactive vanishing throat that smoothly falls back to an organic Lissajous oscillation
  - Continuous helical twist and spectral HSL hue shifting from throat to outer aperture
  - Interactive HUD with Cherenkov Cyan, Hyperdrive Magenta, and Chrono Gold presets
- **Accessibility**:
  - Canvas is marked aria-hidden so screen readers bypass decorative tunnel geometry
  - Interactive speed and twist sliders allow reducing motion velocity on demand
- **Props**:
  - `ringCount` (number, default: 28): Number of concentric depth rings rendered along the wormhole.
  - `speed` (number, default: 1.0): Forward traversal velocity multiplier.
  - `baseHue` (number, default: 195): Starting HSL hue angle in degrees (0-360).
  - `hueShift` (number, default: 90): Total hue shift across the depth of the tunnel.
  - `twist` (number, default: 1.2): Helical rotational twist factor along the tunnel axis.
  - `interactive` (boolean, default: true): Whether pointer movement bends the wormhole vanishing point.
  - `children` (React.ReactNode): Optional foreground UI rendered inside the wormhole container.
  - `className` (string): Additional CSS classes for the root container.
- **Usage Example**:
```tsx
import { WormholeTunnel } from "@/components/ui/WormholeTunnel";

export function WormholeTunnelDemo() {
  return (
    <WormholeTunnel
      ringCount={28}
      speed={1.0}
      baseHue={195}
      hueShift={90}
      twist={1.2}
      interactive
    />
  );
}
```