Component catalog

♥ The user explicitly asked to keep Beam Card in the homepage examples while replacing the underwhelming loader. Retain its subtle beam emphasis.

♥ The user explicitly asked to keep Kinetic Field in the homepage examples. Retain its pointer-responsive particle forms and controls.

Writes DESIGN.md to the project root + theme tokens + fonts. Read design-systems/soft-glass/DESIGN.md first.

Feature-announcement/onboarding modal with media steps, 'don't show again' and responsive dialog↔drawer. Tokens throughout (black only on the media frame). Pulls 6 shadcn primitives.

Compound multi-step onboarding (StepIndicator, ChoiceGroup, FeatureCarousel, TipsList; controllable state). Fully token-based — the safest Cult UI pick for app UI.

Small rolling-digit number (motion). Inherits colour.

Notifications/events appearing one by one — great 'activity feed' hero visual. Unstyled; you style the items with bg-card etc. Imports motion/react.

Light/dark toggle with a View Transitions clip-path reveal. Colourless (icons use currentColor). Uncontrolled it toggles <html class=dark> + localStorage itself; with next-themes pass theme/onThemeChange instead.

Blur + fade-in on mount or in view; the go-to entrance wrapper for sections and image grids (stagger with `delay`). Colourless. Respect prefers-reduced-motion yourself.

Pill button whose label slides out for an arrow + primary fill on hover. Uses bg-primary/text-primary-foreground — one of the few fully token-based Magic UI pieces.

The cleanest infinite marquee for logo clouds / testimonial rows: pure CSS animation, no colours of its own, pauseOnHover + vertical + reverse props. Duplicates children (`repeat`), so keep items light.

Animated terminal with typing + sequenced lines for CLI/dev-tool heroes. bg-background/border-border (only the traffic-light dots are literal colours). Imports motion/react even though the registry lists no deps.

Per-word/char/line text entrance with ~10 presets (blurIn, slideUp, scaleUp…). Inherits colour — good default for hero headlines over Aceternity's text effects.

Animated stats counter with separators/decimals (motion). Inherits colour.

Scramble → reveal text on hover or in view (motion). Dev-tool/brutalist brands.

Rotating keyword in a headline with staggered letter transitions (motion). Unstyled — put bg-primary/text-primary-foreground on the pill yourself.

Paragraph that un-blurs and fades in word by word as you scroll — manifesto/about sections. GSAP ScrollTrigger.

Char/word staggered entrance on scroll (GSAP SplitText + ScrollTrigger). Inherits colour. The React Bits headline effect; needs gsap + @gsap/react.

Typewriter with cursor, multiple strings, delete/retype (GSAP). Inherits colour.

Tinder-style swipe deck: drag past a threshold or press ←/→ to commit; Like/Nope stamps and tinted washes fade in with the drag; imperative swipeLeft/swipeRight/reset handle; aria-live announcements; reduced-motion aware. Like uses text-green from SmoothUI's tokens.json, Nope uses text-destructive; the heavy inline card shadow is tuned for light backgrounds. Labels are props. Hosted demo supplies original artwork, explicit pass/keep/reset controls and a visible result.

Import BoxModel from "anatomy-figures/box-model" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Debounce from "anatomy-figures/debounce" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import HashMap from "anatomy-figures/hash-map" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import LruCache from "anatomy-figures/lru-cache" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import MessageQueue from "anatomy-figures/message-queue" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import RateLimiter from "anatomy-figures/rate-limiter" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Watch from "anatomy-figures/watch" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Tabs whose content slides in the direction of travel. Hard-codes neutral-600/700 + white text — swap to bg-muted/text-foreground.

Apple Dynamic Island that morphs between sizes/states — fun status/notification widget. Hard-coded black pill; fine on any theme as a 'device' element.

Compound card that expands to reveal details (motion + react-use-measure). Mostly bg-muted/ring-border, but one bg-white surface — check dark mode.

Input with animated focus halo + validation states. Tokens for border/text, Vercel-style rainbow hex for the glow — retint for your brand. @base-ui/react + motion.

Base UI tabs with an animated glowing 'halo' indicator. Surfaces use tokens, but the halo glow is a hard-coded cyan/purple/pink palette. Needs @base-ui/react.

Browser-window frame for screenshots/demos; mostly tokens with literal traffic-light colours.

Button that morphs into a small inline form (feedback, waitlist). Text uses tokens but surfaces are bg-white / dark:bg-[#121212] plus blue accents — swap to bg-popover.

AI prompt composer with attachments/actions and a shader glow. Mostly tokens, but teal/blue hex accents and @paper-design/shaders-react + @base-ui/react are heavy deps.

Skeuomorphic textured button variants. Heavy hard-coded neutral/indigo gradients — fits soft-glass/editorial looks, clashes with flat themes.

Use on ONE live element per screen. Wrapped by @oc/beam-card. theme prop defaults to dark — set theme='light' on light surfaces.

Give multi-agent products a face per agent.

Placeholder while an image model is generating.

Premium hero CTA or badge. Shader cost — one or two per page.

Voice-mode UIs: pair with a mic level stream.

SVG beams flowing between refs — the 'integrations' diagram (your app in the middle, tools around it). Default gradient is orange→purple: set gradientStartColor/StopColor to var(--primary).

Feature bento with icon + hover CTA. Hard-codes neutral-*/black alpha colours and needs @radix-ui/react-icons — prefer @oc/feature-bento, or swap to bg-card/text-muted-foreground.

Light travelling around a card's border; subtle way to highlight one pricing tier or the hero screenshot. colorFrom/colorTo default orange/purple — pass var(--primary). Parent needs `relative overflow-hidden rounded-*`.

Quiet SVG dot background (also grid-pattern / interactive-grid-pattern / flickering-grid). Dots use currentColor on a hard-coded text-neutral-400/80 — pass className="text-muted-foreground/40" plus a radial mask.

Spotlight-follows-cursor card (bg-background surface). Gradient defaults are purple/pink hex and it imports next-themes — pass gradientFrom/To from the theme; drop next-themes if you don't use it.

Count-up number for stats sections. Hard-codes text-black dark:text-white — pass className="text-foreground" (or font-heading) to theme it.

Product flies into the cart along an arc() path with a spring impact — e-commerce delight. Free example (motion is MIT); copy and adapt the source from the example page.

AnimatePresence `mode` (sync / wait / popLayout): how to swap one view for another — tab panels, carousel slides, step wizards — without overlap jank. Free example (motion is MIT); copy and adapt the source from the example page.

Character counter that animates as you type and warns near the limit — input feedback done right. Free example (motion is MIT); copy and adapt the source from the example page.

drag + constraints + momentum: draggable cards, swipeable panels, sliders. Free example (motion is MIT); copy and adapt the source from the example page.

AnimatePresence exit: modals, toasts and removed list items animate OUT instead of vanishing. The fix for 'abrupt' close. Free example (motion is MIT); copy and adapt the source from the example page.

Element that follows the cursor with spring lag — custom cursors and spotlight followers without Motion+ Cursor. Free example (motion is MIT); copy and adapt the source from the example page.

`layout` prop: elements animate to their new size/position when state changes (expanding cards, accordion rows, reflowing grids). No height hacks. Free example (motion is MIT); copy and adapt the source from the example page.

Minimal three-dot pulse loader (variants + repeat). Free example (motion is MIT); copy and adapt the source from the example page.

pathLength: SVG line drawing for icons, checkmarks, signatures and diagrams. Free example (motion is MIT); copy and adapt the source from the example page.

Reorder: drag-to-reorder lists with automatic layout animation — settings lists, kanban columns, playlists. Free example (motion is MIT); copy and adapt the source from the example page.

Button whose label rolls to a new word on hover/click — a free alternative to Motion+ text components. Free example (motion is MIT); copy and adapt the source from the example page.

Header that hides on scroll down and returns on scroll up (useMotionValueEvent). Great default for marketing navbars. Free example (motion is MIT); copy and adapt the source from the example page.

useScroll + useTransform: progress bars and parallax tied to scroll position. Medium-intensity; keep it to one element per viewport. Free example (motion is MIT); copy and adapt the source from the example page.