{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "myndui", "homepage": "https://myndui.design", "items": [ { "name": "myndui-theme", "type": "registry:theme", "title": "Myndui Theme", "description": "Celestial Sapphire design tokens (OKLCH) — colors, radius, fonts, shadows, button scale, and rainbow tokens shared by all Myndui components.", "cssVars": { "theme": { "font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif", "font-serif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", "font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", "radius-sm": "calc(var(--radius) - 4px)", "radius-md": "calc(var(--radius) - 2px)", "radius-lg": "var(--radius)", "radius-xl": "calc(var(--radius) + 4px)", "button-py-sm": "0.5rem", "button-px-sm": "1rem", "button-text-sm": "0.875rem", "button-leading-sm": "1.25rem", "button-radius-sm": "var(--radius-md)", "button-py-md": "0.75rem", "button-px-md": "1.5rem", "button-text-md": "0.875rem", "button-leading-md": "1.25rem", "button-radius-md": "var(--radius-lg)", "button-py-lg": "1rem", "button-px-lg": "2rem", "button-text-lg": "1rem", "button-leading-lg": "1.5rem", "button-radius-lg": "var(--radius-xl)" }, "light": { "background": "oklch(1 0 0)", "foreground": "oklch(0.145 0 0)", "card": "oklch(1 0 0)", "card-foreground": "oklch(0.145 0 0)", "popover": "oklch(1 0 0)", "popover-foreground": "oklch(0.145 0 0)", "primary": "oklch(0.205 0 0)", "primary-foreground": "oklch(0.985 0 0)", "secondary": "oklch(0.97 0 0)", "secondary-foreground": "oklch(0.205 0 0)", "accent": "oklch(0.97 0 0)", "accent-foreground": "oklch(0.205 0 0)", "muted": "oklch(0.97 0 0)", "muted-foreground": "oklch(0.556 0 0)", "destructive": "oklch(0.577 0.245 27.325)", "border": "oklch(0.922 0 0)", "input": "oklch(0.922 0 0)", "ring": "oklch(0.708 0 0)", "chart-1": "oklch(0.646 0.222 41.116)", "chart-2": "oklch(0.6 0.118 184.704)", "chart-3": "oklch(0.398 0.07 227.392)", "chart-4": "oklch(0.828 0.189 84.429)", "chart-5": "oklch(0.769 0.188 70.08)", "sidebar": "oklch(0.985 0 0)", "sidebar-foreground": "oklch(0.145 0 0)", "sidebar-primary": "oklch(0.205 0 0)", "sidebar-primary-foreground": "oklch(0.985 0 0)", "sidebar-accent": "oklch(0.97 0 0)", "sidebar-accent-foreground": "oklch(0.205 0 0)", "sidebar-border": "oklch(0.922 0 0)", "sidebar-ring": "oklch(0.708 0 0)", "radius": "0.625rem", "shadow-2xs": "0 1px 2px rgb(0 0 0 / 0.02)", "shadow-xs": "0 1px 3px rgb(0 0 0 / 0.04)", "shadow-sm": "0 2px 6px rgb(0 0 0 / 0.05)", "shadow": "0 4px 12px rgb(0 0 0 / 0.06)", "shadow-md": "0 8px 20px rgb(0 0 0 / 0.08)", "shadow-lg": "0 16px 32px rgb(0 0 0 / 0.1)", "shadow-xl": "0 24px 48px rgb(0 0 0 / 0.12)", "shadow-2xl": "0 40px 80px rgb(0 0 0 / 0.16)", "god-gradient": "linear-gradient(135deg, oklch(0.55 0.19 266) 0%, oklch(1 0 0) 50%, oklch(0.85 0.12 90) 100%)", "god-glow": "0 0 24px oklch(0.55 0.19 266 / 0.14), 0 0 80px oklch(0.85 0.12 90 / 0.06)", "glow-highlight": "61, 102, 223", "color-primary-rgb": "61, 102, 223", "rainbow-1": "oklch(0.55 0.19 266)", "rainbow-2": "oklch(0.68 0.16 305)", "rainbow-3": "oklch(0.82 0.1 185)", "rainbow-4": "oklch(0.78 0.12 14)", "rainbow-5": "oklch(0.8 0.13 90)", "rainbow-speed": "2s" }, "dark": { "background": "oklch(0.145 0 0)", "foreground": "oklch(0.985 0 0)", "card": "oklch(0.205 0 0)", "card-foreground": "oklch(0.985 0 0)", "popover": "oklch(0.205 0 0)", "popover-foreground": "oklch(0.985 0 0)", "primary": "oklch(0.922 0 0)", "primary-foreground": "oklch(0.205 0 0)", "secondary": "oklch(0.269 0 0)", "secondary-foreground": "oklch(0.985 0 0)", "accent": "oklch(0.269 0 0)", "accent-foreground": "oklch(0.985 0 0)", "muted": "oklch(0.269 0 0)", "muted-foreground": "oklch(0.708 0 0)", "destructive": "oklch(0.704 0.191 22.216)", "border": "oklch(1 0 0 / 10%)", "input": "oklch(1 0 0 / 15%)", "ring": "oklch(0.556 0 0)", "chart-1": "oklch(0.488 0.243 264.376)", "chart-2": "oklch(0.696 0.17 162.48)", "chart-3": "oklch(0.769 0.188 70.08)", "chart-4": "oklch(0.627 0.265 303.9)", "chart-5": "oklch(0.645 0.246 16.439)", "sidebar": "oklch(0.205 0 0)", "sidebar-foreground": "oklch(0.985 0 0)", "sidebar-primary": "oklch(0.488 0.243 264.376)", "sidebar-primary-foreground": "oklch(0.985 0 0)", "sidebar-accent": "oklch(0.269 0 0)", "sidebar-accent-foreground": "oklch(0.985 0 0)", "sidebar-border": "oklch(1 0 0 / 10%)", "sidebar-ring": "oklch(0.556 0 0)", "shadow-2xs": "0 1px 2px rgb(0 0 0 / 0.12)", "shadow-xs": "0 1px 3px rgb(0 0 0 / 0.15)", "shadow-sm": "0 2px 6px rgb(0 0 0 / 0.2)", "shadow": "0 4px 12px rgb(0 0 0 / 0.25)", "shadow-md": "0 8px 20px rgb(0 0 0 / 0.3)", "shadow-lg": "0 16px 32px rgb(0 0 0 / 0.35)", "shadow-xl": "0 24px 48px rgb(0 0 0 / 0.4)", "shadow-2xl": "0 40px 80px rgb(0 0 0 / 0.5)", "god-gradient": "linear-gradient(135deg, oklch(0.72 0.15 266) 0%, oklch(1 0 0) 50%, oklch(0.86 0.12 90) 100%)", "god-glow": "0 0 24px oklch(0.72 0.15 266 / 0.28), 0 0 80px oklch(0.86 0.12 90 / 0.12)", "glow-highlight": "120, 160, 255", "color-primary-rgb": "120, 160, 255", "rainbow-1": "oklch(0.72 0.15 266)", "rainbow-2": "oklch(0.74 0.16 305)", "rainbow-3": "oklch(0.84 0.1 185)", "rainbow-4": "oklch(0.8 0.12 14)", "rainbow-5": "oklch(0.84 0.13 90)", "rainbow-speed": "2s" } }, "css": { "@layer base": { ":is(code, kbd, samp, pre)": { "font-family": "var(--font-mono)" } } } }, { "name": "magic-button", "type": "registry:ui", "title": "Magic Button", "description": "A tactile 3D push button with an animated rainbow edge and shadow.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/magic-button/magic-button.tsx", "type": "registry:ui", "target": "components/myndui/magic-button.tsx" } ], "cssVars": { "theme": { "animate-magic-rainbow": "magic-rainbow var(--rainbow-speed, 2s) infinite linear" } }, "css": { "@keyframes magic-rainbow": { "0%": { "background-position": "0% 50%" }, "100%": { "background-position": "200% 50%" } } } }, { "name": "magic-tab", "type": "registry:ui", "title": "Magic Tab", "description": "A segmented tab bar where the selected option lifts into a 3D button with an optional rainbow edge.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/magic-tab/magic-tab.tsx", "type": "registry:ui", "target": "components/myndui/magic-tab.tsx" } ], "cssVars": { "theme": { "animate-magic-rainbow": "magic-rainbow var(--rainbow-speed, 2s) infinite linear" } }, "css": { "@keyframes magic-rainbow": { "0%": { "background-position": "0% 50%" }, "100%": { "background-position": "200% 50%" } } } }, { "name": "magic-input", "type": "registry:ui", "title": "Magic Input", "description": "A 3D layered text input that lifts on focus with an optional rainbow edge animation.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/magic-input/magic-input.tsx", "type": "registry:ui", "target": "components/myndui/magic-input.tsx" } ], "cssVars": { "theme": { "animate-magic-rainbow": "magic-rainbow var(--rainbow-speed, 2s) infinite linear", "animate-magic-input-indeterminate": "magic-input-indeterminate 1.2s ease-in-out infinite alternate", "animate-magic-input-sweep": "magic-input-sweep 220ms ease-out", "animate-magic-input-spin": "magic-input-spin 0.8s linear infinite" } }, "css": { "@keyframes magic-rainbow": { "0%": { "background-position": "0% 50%" }, "100%": { "background-position": "200% 50%" } }, "@keyframes magic-input-indeterminate": { "from": { "background-position": "110% center" }, "to": { "background-position": "-10% center" } }, "@keyframes magic-input-sweep": { "from": { "background-size": "0% 100%" }, "to": { "background-size": "100% 100%" } }, "@keyframes magic-input-spin": { "to": { "transform": "rotate(360deg)" } } } }, { "name": "shimmer-button", "type": "registry:ui", "title": "Shimmer Button", "description": "A button with an animated shimmering border light that speeds up on hover.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/shimmer-button/shimmer-button.tsx", "type": "registry:ui", "target": "components/myndui/shimmer-button.tsx" } ], "cssVars": { "theme": { "animate-shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate", "animate-spin-around": "spin-around calc(var(--speed) * 2) infinite linear" } }, "css": { "@keyframes shimmer-slide": { "to": { "transform": "translate(calc(100cqw - 100%), 0)" } }, "@keyframes spin-around": { "0%": { "transform": "translateZ(0) rotate(0)" }, "15%, 35%": { "transform": "translateZ(0) rotate(90deg)" }, "65%, 85%": { "transform": "translateZ(0) rotate(270deg)" }, "100%": { "transform": "translateZ(0) rotate(360deg)" } } } }, { "name": "progress-fold-button", "type": "registry:ui", "title": "Progress Fold Button", "description": "A button whose front face folds back to reveal a controlled progress bar while loading.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/progress-fold-button/progress-fold-button.tsx", "type": "registry:ui", "target": "components/myndui/progress-fold-button.tsx" } ], "cssVars": { "theme": { "animate-progress-fold-indeterminate": "progress-fold-indeterminate 1.2s ease-in-out infinite" } }, "css": { "@keyframes progress-fold-indeterminate": { "0%": { "transform": "translateX(-100%)" }, "100%": { "transform": "translateX(250%)" } } } }, { "name": "mask-button", "type": "registry:ui", "title": "Mask Button", "description": "A button whose face wipes away on hover via an animated CSS sprite-sheet mask, revealing the label behind it.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/mask-button/mask-button.tsx", "type": "registry:ui", "target": "components/myndui/mask-button.tsx" } ], "cssVars": { "theme": { "animate-mask-nature-in": "mask-button-in 0.7s steps(22) forwards", "animate-mask-nature-out": "mask-button-out 0.7s steps(22) forwards", "animate-mask-urban-in": "mask-button-in 0.7s steps(29) forwards", "animate-mask-urban-out": "mask-button-out 0.7s steps(29) forwards", "animate-mask-forest-in": "mask-button-in 0.7s steps(70) forwards", "animate-mask-forest-out": "mask-button-out 0.7s steps(70) forwards" } }, "css": { "@keyframes mask-button-in": { "from": { "-webkit-mask-position": "0 0", "mask-position": "0 0" }, "to": { "-webkit-mask-position": "100% 0", "mask-position": "100% 0" } }, "@keyframes mask-button-out": { "from": { "-webkit-mask-position": "100% 0", "mask-position": "100% 0" }, "to": { "-webkit-mask-position": "0 0", "mask-position": "0 0" } } } }, { "name": "magnetic-button", "type": "registry:ui", "title": "Magnetic Button", "description": "A button whose content is magnetically pulled toward the cursor within a sensor range, springing back on exit.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/magnetic-button/magnetic-button.tsx", "type": "registry:ui", "target": "components/myndui/magnetic-button.tsx" } ] }, { "name": "multi-button", "type": "registry:ui", "title": "Multi Button", "description": "A responsive action rail where Standard reserves width, Compact collapses, Original pairs ease-out redistribution with spring labels, and Gooey adds elastic metaballs.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/multi-button/multi-button.tsx", "type": "registry:ui", "target": "components/myndui/multi-button.tsx" } ] }, { "name": "progressive-card-reveal", "type": "registry:ui", "title": "Progressive Card Reveal", "description": "A vertical stack of cards where one card expands to its full view while the rest collapse to compact pills, animating the morph between them.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/progressive-card-reveal/progressive-card-reveal.tsx", "type": "registry:ui", "target": "components/myndui/progressive-card-reveal.tsx" } ] }, { "name": "aurora-text", "type": "registry:ui", "title": "Aurora Text", "description": "Gradient text with a rainbow aurora that drifts across the letters.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/aurora-text/aurora-text.tsx", "type": "registry:ui", "target": "components/myndui/aurora-text.tsx" } ], "cssVars": { "theme": { "animate-aurora-text": "aurora-text var(--aurora-text-speed, 10s) infinite linear" } }, "css": { "@keyframes aurora-text": { "0%": { "background-position": "0% 50%" }, "50%": { "background-position": "100% 50%" }, "100%": { "background-position": "0% 50%" } } } }, { "name": "elastic-text", "type": "registry:ui", "title": "Elastic Text", "description": "Variable-font text whose weight springs up under an automatic spotlight or the pointer.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/elastic-text/elastic-text.tsx", "type": "registry:ui", "target": "components/myndui/elastic-text.tsx" }, { "path": "packages/components/src/lib/text-utils.ts", "type": "registry:ui", "target": "components/myndui/text-utils.ts" } ] }, { "name": "text-animate", "type": "registry:ui", "title": "Text Animate", "description": "Staggered text entrance animations (fade, blur, slide) by character, word, or line.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/text-animate/text-animate.tsx", "type": "registry:ui", "target": "components/myndui/text-animate.tsx" }, { "path": "packages/components/src/text-animate/text-animate-utils.ts", "type": "registry:ui", "target": "components/myndui/text-animate-utils.ts" }, { "path": "packages/components/src/lib/text-utils.ts", "type": "registry:ui", "target": "components/myndui/text-utils.ts" } ] }, { "name": "highlighter", "type": "registry:ui", "title": "Highlighter", "description": "Hand-drawn rough-notation annotations (highlight, underline, box, circle) over text.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion", "rough-notation"], "files": [ { "path": "packages/components/src/highlighter/highlighter.tsx", "type": "registry:ui", "target": "components/myndui/highlighter.tsx" } ] }, { "name": "number-ticker", "type": "registry:ui", "title": "Number Ticker", "description": "Animates a number to its target value with spring physics when scrolled into view.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/number-ticker/number-ticker.tsx", "type": "registry:ui", "target": "components/myndui/number-ticker.tsx" } ] }, { "name": "marquee", "type": "registry:ui", "title": "Marquee", "description": "An infinite, seamless scrolling row or column of content that pauses on hover.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/marquee/marquee.tsx", "type": "registry:ui", "target": "components/myndui/marquee.tsx" } ], "cssVars": { "theme": { "animate-marquee": "marquee var(--duration, 40s) linear infinite", "animate-marquee-vertical": "marquee-vertical var(--duration, 40s) linear infinite" } }, "css": { "@keyframes marquee": { "from": { "transform": "translateX(0)" }, "to": { "transform": "translateX(calc(-100% - var(--gap)))" } }, "@keyframes marquee-vertical": { "from": { "transform": "translateY(0)" }, "to": { "transform": "translateY(calc(-100% - var(--gap)))" } } } }, { "name": "command-palette", "type": "registry:ui", "title": "Command Palette", "description": "A ⌘K command menu with fuzzy filtering, keyboard navigation, and a spring-tracked active highlight.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/command-palette/command-palette.tsx", "type": "registry:ui", "target": "components/myndui/command-palette.tsx" } ] }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Stacked, swipe-dismissible toasts with an imperative toast() API and auto-dismiss.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/toast/toast.tsx", "type": "registry:ui", "target": "components/myndui/toast.tsx" } ] }, { "name": "drawer", "type": "registry:ui", "title": "Drawer", "description": "A draggable bottom or side sheet with rubber-band physics, flick-to-dismiss, scrim, and scroll lock.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/drawer/drawer.tsx", "type": "registry:ui", "target": "components/myndui/drawer.tsx" } ] }, { "name": "animated-testimonials", "type": "registry:ui", "title": "Animated Testimonials", "description": "A testimonial carousel with a shuffling image stack, word-by-word quote reveal, and autoplay.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/animated-testimonials/animated-testimonials.tsx", "type": "registry:ui", "target": "components/myndui/animated-testimonials.tsx" } ] }, { "name": "dock", "type": "registry:ui", "title": "Dock", "description": "A macOS-style dock whose items magnify with spring physics as the pointer moves across them.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/dock/dock.tsx", "type": "registry:ui", "target": "components/myndui/dock.tsx" } ] }, { "name": "animated-tooltip", "type": "registry:ui", "title": "Animated Tooltip", "description": "A tooltip that springs in and tilts in 3D as the pointer moves across its trigger.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/animated-tooltip/animated-tooltip.tsx", "type": "registry:ui", "target": "components/myndui/animated-tooltip.tsx" } ] }, { "name": "ascii-dither", "type": "registry:ui", "title": "ASCII Dither", "description": "Renders an image or video as a live field of ASCII characters or halftone dither dots, inked by theme or source color.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/ascii-dither/ascii-dither.tsx", "type": "registry:ui", "target": "components/myndui/ascii-dither.tsx" } ] }, { "name": "bento-grid", "type": "registry:ui", "title": "Bento Grid", "description": "A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/bento-grid/bento-grid.tsx", "type": "registry:ui", "target": "components/myndui/bento-grid.tsx" } ] }, { "name": "scroll-reveal", "type": "registry:ui", "title": "Scroll Reveal", "description": "Reveals its children with a spring as they scroll into view, with optional scroll-velocity skew.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/scroll-reveal/scroll-reveal.tsx", "type": "registry:ui", "target": "components/myndui/scroll-reveal.tsx" } ] }, { "name": "gooey-stack", "type": "registry:ui", "title": "Gooey Stack", "description": "A stack of cards that fuse with a liquid metaball bridge and collapse behind an anchor with a spring.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/gooey-stack/gooey-stack.tsx", "type": "registry:ui", "target": "components/myndui/gooey-stack.tsx" } ] }, { "name": "swipe-deck", "type": "registry:ui", "title": "Swipe Deck", "description": "A physics, Tinder-style swipeable card deck with throw-to-dismiss, directional intent, and keyboard controls.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/swipe-deck/swipe-deck.tsx", "type": "registry:ui", "target": "components/myndui/swipe-deck.tsx" } ] }, { "name": "image-accordion", "type": "registry:ui", "title": "Image Accordion", "description": "Horizontal image panels that expand on hover to reveal their caption — an elegant, space-efficient gallery.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/image-accordion/image-accordion.tsx", "type": "registry:ui", "target": "components/myndui/image-accordion.tsx" } ] }, { "name": "card-swap", "type": "registry:ui", "title": "Card Swap", "description": "A 3D stack of cards that cycles through a showcase loop, with pointer parallax and spring re-flow.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/card-swap/card-swap.tsx", "type": "registry:ui", "target": "components/myndui/card-swap.tsx" } ] }, { "name": "scroll-stack", "type": "registry:ui", "title": "Scroll Stack", "description": "Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/scroll-stack/scroll-stack.tsx", "type": "registry:ui", "target": "components/myndui/scroll-stack.tsx" } ] }, { "name": "scroll-text-reveal", "type": "registry:ui", "title": "Scroll Text Reveal", "description": "Kinetic typography that scrubs each word from dim to sharp as the paragraph scrolls through view — reverses cleanly on scroll-up.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/scroll-text-reveal/scroll-text-reveal.tsx", "type": "registry:ui", "target": "components/myndui/scroll-text-reveal.tsx" }, { "path": "packages/components/src/lib/text-utils.ts", "type": "registry:ui", "target": "components/myndui/text-utils.ts" } ] }, { "name": "liquid-image", "type": "registry:ui", "title": "Liquid Image", "description": "A premium hover effect that ripples and distorts an image like liquid, intensifying with cursor speed.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/liquid-image/liquid-image.tsx", "type": "registry:ui", "target": "components/myndui/liquid-image.tsx" } ] }, { "name": "text-scramble", "type": "registry:ui", "title": "Text Scramble", "description": "Characters cycle through random glyphs and resolve into the target text — a decrypt / matrix reveal.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/text-scramble/text-scramble.tsx", "type": "registry:ui", "target": "components/myndui/text-scramble.tsx" } ] }, { "name": "particle-dissolve", "type": "registry:ui", "title": "Particle Dissolve", "description": "Text or an image is sampled into particles that scatter and reform — a dramatic entrance or transition.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/particle-dissolve/particle-dissolve.tsx", "type": "registry:ui", "target": "components/myndui/particle-dissolve.tsx" } ] }, { "name": "spotlight-reveal", "type": "registry:ui", "title": "Spotlight Reveal", "description": "A cursor-following flashlight that cuts through the top layer to expose a hidden layer beneath.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/spotlight-reveal/spotlight-reveal.tsx", "type": "registry:ui", "target": "components/myndui/spotlight-reveal.tsx" } ] }, { "name": "image-trail", "type": "registry:ui", "title": "Image Trail", "description": "Images spawn along the pointer's path, pop in, and drift away — the signature portfolio hover effect.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/image-trail/image-trail.tsx", "type": "registry:ui", "target": "components/myndui/image-trail.tsx" } ] }, { "name": "spotlight-card", "type": "registry:ui", "title": "Spotlight Card", "description": "A card with a radial spotlight glow that follows the pointer, optionally lighting the border.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/spotlight-card/spotlight-card.tsx", "type": "registry:ui", "target": "components/myndui/spotlight-card.tsx" } ] }, { "name": "border-beam", "type": "registry:ui", "title": "Border Beam", "description": "An animated beam of light that travels around the border of its container.", "registryDependencies": ["@myndui/myndui-theme"], "dependencies": ["framer-motion"], "files": [ { "path": "packages/components/src/border-beam/border-beam.tsx", "type": "registry:ui", "target": "components/myndui/border-beam.tsx" } ] }, { "name": "liquid-glass-card", "type": "registry:ui", "title": "Liquid Glass Card", "description": "A glass panel that refracts the content behind it with a mouse-tracked specular highlight.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/liquid-glass/liquid-glass-card.tsx", "type": "registry:ui", "target": "components/myndui/liquid-glass-card.tsx" }, { "path": "packages/components/src/liquid-glass/liquid-glass-utils.tsx", "type": "registry:ui", "target": "components/myndui/liquid-glass-utils.tsx" } ] }, { "name": "liquid-glass-lens", "type": "registry:ui", "title": "Liquid Glass Lens", "description": "A circular glass lens that floats over your content and follows the cursor, refracting everything beneath it.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/liquid-glass/liquid-glass-lens.tsx", "type": "registry:ui", "target": "components/myndui/liquid-glass-lens.tsx" }, { "path": "packages/components/src/liquid-glass/liquid-glass-utils.tsx", "type": "registry:ui", "target": "components/myndui/liquid-glass-utils.tsx" } ] }, { "name": "pixel-grid", "type": "registry:ui", "title": "Pixel Grid", "description": "A grid of flickering squares with an optional cursor spotlight that lights up nearby pixels.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/pixel-grid/pixel-grid.tsx", "type": "registry:ui", "target": "components/myndui/pixel-grid.tsx" } ] }, { "name": "dynamic-island", "type": "registry:ui", "title": "Dynamic Island", "description": "An Apple-inspired pill that springs between size presets while its content cross-fades.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/dynamic-island/dynamic-island.tsx", "type": "registry:ui", "target": "components/myndui/dynamic-island.tsx" } ] }, { "name": "tilt-card", "type": "registry:ui", "title": "Tilt Card", "description": "A card that tilts in 3D toward the pointer with parallax depth and a specular glare.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/tilt-card/tilt-card.tsx", "type": "registry:ui", "target": "components/myndui/tilt-card.tsx" } ] }, { "name": "holographic-card", "type": "registry:ui", "title": "Holographic Card", "description": "A trading-card holo effect — iridescent foil, specular glare, and glitter that tilt and shift with the pointer or device gyroscope.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/holographic-card/holographic-card.tsx", "type": "registry:ui", "target": "components/myndui/holographic-card.tsx" } ] }, { "name": "animated-beam", "type": "registry:ui", "title": "Animated Beam", "description": "An animated gradient beam that travels along a path connecting two separate nodes.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/animated-beam/animated-beam.tsx", "type": "registry:ui", "target": "components/myndui/animated-beam.tsx" } ] }, { "name": "globe", "type": "registry:ui", "title": "Globe", "description": "A draggable, auto-rotating WebGL globe with glowing location markers.", "dependencies": ["cobe"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/globe/globe.tsx", "type": "registry:ui", "target": "components/myndui/globe.tsx" } ] }, { "name": "orbiting-circles", "type": "registry:ui", "title": "Orbiting Circles", "description": "Icons that orbit a center point on a configurable ring, staying upright as they travel.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/orbiting-circles/orbiting-circles.tsx", "type": "registry:ui", "target": "components/myndui/orbiting-circles.tsx" } ] }, { "name": "lamp", "type": "registry:ui", "title": "Lamp", "description": "A conic-gradient lamp that ignites and reveals a headline as it scrolls into view.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/lamp/lamp.tsx", "type": "registry:ui", "target": "components/myndui/lamp.tsx" } ] }, { "name": "confetti", "type": "registry:ui", "title": "Confetti", "description": "A physics-based confetti burst with an imperative fire API for celebratory moments.", "dependencies": ["canvas-confetti"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/confetti/confetti.tsx", "type": "registry:ui", "target": "components/myndui/confetti.tsx" } ] }, { "name": "encrypted-card", "type": "registry:ui", "title": "Encrypted Card", "description": "A card whose surface hides a live stream of scrambling ciphertext, revealed only through a soft spotlight that follows the pointer.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/encrypted-card/encrypted-card.tsx", "type": "registry:ui", "target": "components/myndui/encrypted-card.tsx" } ] }, { "name": "terminal", "type": "registry:ui", "title": "Terminal", "description": "An animated terminal window that types out a scripted sequence of commands and output, with window chrome and a blinking caret.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/terminal/terminal.tsx", "type": "registry:ui", "target": "components/myndui/terminal.tsx" } ] }, { "name": "spin-viewer", "type": "registry:ui", "title": "Spin Viewer", "description": "A 360-degree product viewer — drag to spin an object through a sequence of frames, with optional idle auto-rotate and a touch-friendly hint.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/spin-viewer/spin-viewer.tsx", "type": "registry:ui", "target": "components/myndui/spin-viewer.tsx" } ] }, { "name": "otp-input", "type": "registry:ui", "title": "OTP Input", "description": "A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/otp-input/otp-input.tsx", "type": "registry:ui", "target": "components/myndui/otp-input.tsx" } ] }, { "name": "avatar-group", "type": "registry:ui", "title": "Avatar Group", "description": "Overlapping avatars that fan apart on hover, with a +N overflow chip.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/avatar-group/avatar-group.tsx", "type": "registry:ui", "target": "components/myndui/avatar-group.tsx" } ] }, { "name": "scroll-progress", "type": "registry:ui", "title": "Scroll Progress", "description": "A spring-smoothed reading indicator — a pinned top bar or a fading back-to-top ring.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/scroll-progress/scroll-progress.tsx", "type": "registry:ui", "target": "components/myndui/scroll-progress.tsx" } ] }, { "name": "image-compare", "type": "registry:ui", "title": "Image Compare", "description": "A draggable before/after slider with clip-path reveal, keyboard support, and a pulsing handle hint.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/image-compare/image-compare.tsx", "type": "registry:ui", "target": "components/myndui/image-compare.tsx" } ] }, { "name": "segmented-control", "type": "registry:ui", "title": "Segmented Control", "description": "An iOS-style selector with a sliding pill that springs between options.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/segmented-control/segmented-control.tsx", "type": "registry:ui", "target": "components/myndui/segmented-control.tsx" } ] }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/accordion/accordion.tsx", "type": "registry:ui", "target": "components/myndui/accordion.tsx" } ] }, { "name": "floating-toolbar", "type": "registry:ui", "title": "Floating Toolbar", "description": "A context toolbar that springs into view with magnetic, morphing action buttons.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/floating-toolbar/floating-toolbar.tsx", "type": "registry:ui", "target": "components/myndui/floating-toolbar.tsx" } ] }, { "name": "split-flap-display", "type": "registry:ui", "title": "Split-Flap Display", "description": "A Solari departure-board display: each character spins through the charset on stacked flip leaves — the old top hinges away, the new bottom rises into place — settling on the value with a staggered column wave. View-only, compositor-only motion, reveals on scroll.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/split-flap-display/split-flap-display.tsx", "type": "registry:ui", "target": "components/myndui/split-flap-display.tsx" } ], "cssVars": { "theme": { "animate-split-flap-fall": "split-flap-fall 0.12s cubic-bezier(0.3, 0.7, 0.4, 1) forwards", "animate-split-flap-rise": "split-flap-rise 0.12s cubic-bezier(0.22, 1, 0.36, 1) both" } }, "css": { "@keyframes split-flap-fall": { "from": { "transform": "rotateX(0deg)" }, "to": { "transform": "rotateX(-90deg)" } }, "@keyframes split-flap-rise": { "from": { "transform": "rotateX(90deg)" }, "to": { "transform": "rotateX(0deg)" } } } }, { "name": "stack-badge", "type": "registry:ui", "title": "Stack Badge", "description": "A tech-stack wall of monochrome logo chips that stagger in on scroll and lift into their full brand color with a soft glow on hover; ships 20 built-in tech logos plus custom items.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/stack-badge/stack-badge.tsx", "type": "registry:ui", "target": "components/myndui/stack-badge.tsx" } ] }, { "name": "stepper", "type": "registry:ui", "title": "Stepper", "description": "A step indicator with a spring-filled progress line and a number-to-checkmark morph.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/stepper/stepper.tsx", "type": "registry:ui", "target": "components/myndui/stepper.tsx" } ] }, { "name": "resizable-header", "type": "registry:ui", "title": "Resizable Header", "description": "A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/resizable-header/resizable-header.tsx", "type": "registry:ui", "target": "components/myndui/resizable-header.tsx" } ] }, { "name": "mega-menu", "type": "registry:ui", "title": "Mega Menu", "description": "A Vercel-style navigation menu with a direction-aware highlight and a panel that springs and height-morphs between triggers.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/mega-menu/mega-menu.tsx", "type": "registry:ui", "target": "components/myndui/mega-menu.tsx" } ] }, { "name": "breadcrumbs", "type": "registry:ui", "title": "Breadcrumbs", "description": "A breadcrumb trail with hover-fill pills, animated path changes, and an overflow that collapses into an expandable popover.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/breadcrumbs/breadcrumbs.tsx", "type": "registry:ui", "target": "components/myndui/breadcrumbs.tsx" } ] }, { "name": "filter-bar", "type": "registry:ui", "title": "Filter Bar", "description": "A faceted filter bar with searchable multi-select popovers, count badges, and active filters that spring in and out as chips.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/filter-bar/filter-bar.tsx", "type": "registry:ui", "target": "components/myndui/filter-bar.tsx" } ] }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "An accessible dropdown that springs open from its trigger edge, with submenus, shortcuts, separators, and keyboard navigation.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/dropdown-menu/dropdown-menu.tsx", "type": "registry:ui", "target": "components/myndui/dropdown-menu.tsx" } ] }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "A right-click menu that springs from the cursor point and flips to stay in the viewport, with shortcuts and destructive actions.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/context-menu/context-menu.tsx", "type": "registry:ui", "target": "components/myndui/context-menu.tsx" } ] }, { "name": "tab-bar", "type": "registry:ui", "title": "Tab Bar", "description": "A mobile bottom navigation where a shared-element blob slides under the active tab and the icon gives a haptic-style pop.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/tab-bar/tab-bar.tsx", "type": "registry:ui", "target": "components/myndui/tab-bar.tsx" } ] }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/combobox/combobox.tsx", "type": "registry:ui", "target": "components/myndui/combobox.tsx" } ] }, { "name": "prompt-composer", "type": "registry:ui", "title": "Prompt Composer", "description": "An AI input box with an auto-growing textarea, attachment chips, an inline model picker, and a send button that morphs into a stop control while streaming.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/prompt-composer/prompt-composer.tsx", "type": "registry:ui", "target": "components/myndui/prompt-composer.tsx" } ] }, { "name": "conversation-thread", "type": "registry:ui", "title": "Conversation Thread", "description": "A streaming AI chat surface where messages spring in, tokens reveal with a blinking caret, hover actions fade in, and the view auto-sticks to the latest message.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/conversation-thread/conversation-thread.tsx", "type": "registry:ui", "target": "components/myndui/conversation-thread.tsx" } ] }, { "name": "cover-flow", "type": "registry:ui", "title": "Cover Flow", "description": "A physics 3D cover flow — the centered slide faces front while neighbours rotate away in perspective, with momentum drag and snap.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/cover-flow/cover-flow.tsx", "type": "registry:ui", "target": "components/myndui/cover-flow.tsx" } ] }, { "name": "inertia-gallery", "type": "registry:ui", "title": "Inertia Gallery", "description": "A horizontal gallery you throw with the pointer — momentum carries it, it rubber-bands at the ends, and slides scale, blur, and fade with distance from center.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/inertia-gallery/inertia-gallery.tsx", "type": "registry:ui", "target": "components/myndui/inertia-gallery.tsx" } ] }, { "name": "morph-gallery", "type": "registry:ui", "title": "Morph Gallery", "description": "A thumbnail grid where a tile morphs into a fullscreen detail view via a shared-element transition, with swipe and keyboard navigation.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/morph-gallery/morph-gallery.tsx", "type": "registry:ui", "target": "components/myndui/morph-gallery.tsx" } ] }, { "name": "orbit-carousel", "type": "registry:ui", "title": "Orbit Carousel", "description": "Slides ride an arc and rotate around a pivot, tilting and receding with angular distance from the front, with momentum drag and snap.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/orbit-carousel/orbit-carousel.tsx", "type": "registry:ui", "target": "components/myndui/orbit-carousel.tsx" } ] }, { "name": "agent-flow", "type": "registry:ui", "title": "Agent Flow", "description": "A draggable, pannable node-graph that visualizes an agent workflow — labelled nodes with live run status and data packets that flow along the edges between them.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/agent-flow/agent-flow.tsx", "type": "registry:ui", "target": "components/myndui/agent-flow.tsx" } ] }, { "name": "agent-timeline", "type": "registry:ui", "title": "Agent Timeline", "description": "A vertical timeline of agent steps with live status, a spring-filled connector, and collapsible reasoning or tool-output bodies that morph open.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/agent-timeline/agent-timeline.tsx", "type": "registry:ui", "target": "components/myndui/agent-timeline.tsx" } ] }, { "name": "prompt-suggestions", "type": "registry:ui", "title": "Prompt Suggestions", "description": "Animated starter prompts for AI empty states that stagger in, lift on hover, and feed straight into the composer when chosen.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/prompt-suggestions/prompt-suggestions.tsx", "type": "registry:ui", "target": "components/myndui/prompt-suggestions.tsx" } ] }, { "name": "source-citations", "type": "registry:ui", "title": "Source Citations", "description": "Inline numbered citation pills that spring out a rich preview card on hover, plus a collapsible source list for AI answers.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/source-citations/source-citations.tsx", "type": "registry:ui", "target": "components/myndui/source-citations.tsx" } ] }, { "name": "live-cursors", "type": "registry:ui", "title": "Live Cursors", "description": "Smoothly interpolated multiplayer cursors with trailing name flags and optional cursor-chat, plus a self-driving simulated-peer mode.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/live-cursors/live-cursors.tsx", "type": "registry:ui", "target": "components/myndui/live-cursors.tsx" }, { "path": "packages/components/src/lib/presence.ts", "type": "registry:lib", "target": "components/myndui/presence.ts" } ] }, { "name": "presence-facepile", "type": "registry:ui", "title": "Presence Facepile", "description": "Live avatars with animated status rings, spring join/leave, and a +N overflow that expands into a presence list.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/presence-facepile/presence-facepile.tsx", "type": "registry:ui", "target": "components/myndui/presence-facepile.tsx" }, { "path": "packages/components/src/lib/presence.ts", "type": "registry:lib", "target": "components/myndui/presence.ts" } ] }, { "name": "comment-pin", "type": "registry:ui", "title": "Comment Pin", "description": "Figma-style annotation pins that spring in over any surface and expand into a threaded comment popover with a reply field.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/comment-pin/comment-pin.tsx", "type": "registry:ui", "target": "components/myndui/comment-pin.tsx" }, { "path": "packages/components/src/lib/presence.ts", "type": "registry:lib", "target": "components/myndui/presence.ts" } ] }, { "name": "notification-inbox", "type": "registry:ui", "title": "Notification Inbox", "description": "A Linear-style notification center with time-bucketed groups, unread accent rails, swipe-to-archive, mark-all-read, and a polished empty state.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/notification-inbox/notification-inbox.tsx", "type": "registry:ui", "target": "components/myndui/notification-inbox.tsx" }, { "path": "packages/components/src/lib/presence.ts", "type": "registry:lib", "target": "components/myndui/presence.ts" } ] }, { "name": "flow-field", "type": "registry:ui", "title": "Flow Field", "description": "Particles streaming along an evolving noise vector field, leaving silky fading trails. Paints its own themed background.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/flow-field/flow-field.tsx", "type": "registry:ui", "target": "components/myndui/flow-field.tsx" } ] }, { "name": "blueprint-grid", "type": "registry:ui", "title": "Blueprint Grid", "description": "A technical blueprint lattice — ruled lines, a dot matrix, or a perspective floor — with a diagonal light sweep and a cursor spotlight. Pure CSS.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/blueprint-grid/blueprint-grid.tsx", "type": "registry:ui", "target": "components/myndui/blueprint-grid.tsx" } ], "cssVars": { "theme": { "animate-blueprint-sweep": "blueprint-sweep var(--blueprint-speed, 8s) linear infinite" } }, "css": { "@keyframes blueprint-sweep": { "0%": { "transform": "translate(-50%, -50%) rotate(var(--blueprint-angle, 25deg))", "opacity": "0" }, "15%, 85%": { "opacity": "1" }, "100%": { "transform": "translate(150%, 150%) rotate(var(--blueprint-angle, 25deg))", "opacity": "0" } } } }, { "name": "topographic-drift", "type": "registry:ui", "title": "Topographic Drift", "description": "Slowly drifting topographic contour lines — a living elevation map drawn with marching squares on a Canvas.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/topographic-drift/topographic-drift.tsx", "type": "registry:ui", "target": "components/myndui/topographic-drift.tsx" } ] }, { "name": "liquid-metaballs", "type": "registry:ui", "title": "Liquid Metaballs", "description": "Gooey blobs that drift, collide, and merge under an SVG goo filter, with an optional cursor blob. Per-instance filter id.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/liquid-metaballs/liquid-metaballs.tsx", "type": "registry:ui", "target": "components/myndui/liquid-metaballs.tsx" } ] }, { "name": "light-rays", "type": "registry:ui", "title": "Light Rays", "description": "Volumetric god-rays that slowly sweep and breathe, with optional film grain. Pure CSS.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/light-rays/light-rays.tsx", "type": "registry:ui", "target": "components/myndui/light-rays.tsx" } ], "cssVars": { "theme": { "animate-light-rays-sweep": "light-rays-sweep var(--rays-speed, 14s) ease-in-out infinite alternate" } }, "css": { "@keyframes light-rays-sweep": { "0%": { "transform": "rotate(calc(var(--rays-angle, 0deg) - 6deg)) scale(1)", "opacity": "calc(var(--rays-intensity, 0.6) * 0.7)" }, "100%": { "transform": "rotate(calc(var(--rays-angle, 0deg) + 6deg)) scale(1.08)", "opacity": "var(--rays-intensity, 0.6)" } } } }, { "name": "warp-starfield", "type": "registry:ui", "title": "Warp Starfield", "description": "A depth starfield you fly through — stars stream toward the viewer with cursor parallax and an optional hyperspace warp.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/warp-starfield/warp-starfield.tsx", "type": "registry:ui", "target": "components/myndui/warp-starfield.tsx" } ] }, { "name": "hold-confirm-button", "type": "registry:ui", "title": "Hold Confirm Button", "description": "Press and hold to confirm a destructive action; a radial fill commits at 100% and releasing early cancels.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/hold-confirm-button/hold-confirm-button.tsx", "type": "registry:ui", "target": "components/myndui/hold-confirm-button.tsx" } ] }, { "name": "slide-confirm-button", "type": "registry:ui", "title": "Slide Confirm Button", "description": "A drag-to-confirm thumb for high-stakes actions that snaps past a threshold and springs back otherwise.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/slide-confirm-button/slide-confirm-button.tsx", "type": "registry:ui", "target": "components/myndui/slide-confirm-button.tsx" } ] }, { "name": "jelly-button", "type": "registry:ui", "title": "Jelly Button", "description": "A squishy button that deforms on press and springs back with a jelly wobble, running entirely on the compositor.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/jelly-button/jelly-button.tsx", "type": "registry:ui", "target": "components/myndui/jelly-button.tsx" } ] }, { "name": "gooey-fab", "type": "registry:ui", "title": "Gooey FAB", "description": "A floating action button that gooey-morphs to extrude its satellite actions like liquid metaballs.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/gooey-fab/gooey-fab.tsx", "type": "registry:ui", "target": "components/myndui/gooey-fab.tsx" } ] }, { "name": "voice-orb", "type": "registry:ui", "title": "Voice Orb", "description": "A Siri-style audio-reactive orb that breathes when idle, pulses while listening, and swells with the voice as it speaks.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/voice-orb/voice-orb.tsx", "type": "registry:ui", "target": "components/myndui/voice-orb.tsx" } ], "cssVars": { "theme": { "animate-voice-orb-spin": "voice-orb-spin 8s linear infinite", "animate-voice-orb-breathe": "voice-orb-breathe 4s ease-in-out infinite", "animate-voice-orb-ring": "voice-orb-ring 1.6s ease-out infinite" } }, "css": { "@keyframes voice-orb-spin": { "to": { "transform": "rotate(360deg)" } }, "@keyframes voice-orb-breathe": { "0%, 100%": { "transform": "scale(1)" }, "50%": { "transform": "scale(1.04)" } }, "@keyframes voice-orb-ring": { "0%": { "transform": "scale(0.85)", "opacity": "0.6" }, "100%": { "transform": "scale(1.4)", "opacity": "0" } } } }, { "name": "morphing-dialog", "type": "registry:ui", "title": "Morphing Dialog", "description": "A card that physically morphs into a modal through a shared layout, then springs back on close.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/morphing-dialog/morphing-dialog.tsx", "type": "registry:ui", "target": "components/myndui/morphing-dialog.tsx" } ] }, { "name": "reorder-list", "type": "registry:ui", "title": "Reorder List", "description": "A drag-to-reorder list where items lift on grab, spring to place, and neighbours flow around them.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/reorder-list/reorder-list.tsx", "type": "registry:ui", "target": "components/myndui/reorder-list.tsx" } ] }, { "name": "fluid-cursor", "type": "registry:ui", "title": "Fluid Cursor", "description": "A spring-lagged blend-mode cursor that trails the pointer and swells over interactive elements.", "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/fluid-cursor/fluid-cursor.tsx", "type": "registry:ui", "target": "components/myndui/fluid-cursor.tsx" } ] }, { "name": "world-map", "type": "registry:ui", "title": "World Map", "description": "A dotted world map that draws animated arcs between locations, with pulsing endpoint pins.", "dependencies": ["dotted-map", "framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/world-map/world-map.tsx", "type": "registry:ui", "target": "components/myndui/world-map.tsx" } ] }, { "name": "gravity", "type": "registry:ui", "title": "Gravity", "description": "A physics playground where elements fall, pile, collide, and can be dragged and flung.", "dependencies": ["matter-js"], "devDependencies": ["@types/matter-js"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/gravity/gravity.tsx", "type": "registry:ui", "target": "components/myndui/gravity.tsx" } ] }, { "name": "hero-parallax", "type": "registry:ui", "title": "Hero Parallax", "description": "A scroll-driven grid of cards that drift in alternating directions on a tilted perspective plane.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/hero-parallax/hero-parallax.tsx", "type": "registry:ui", "target": "components/myndui/hero-parallax.tsx" } ] }, { "name": "scroll-timeline", "type": "registry:ui", "title": "Scroll Timeline", "description": "A scrollytelling timeline whose progress line grows as you scroll, revealing entries with sticky labels.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/scroll-timeline/scroll-timeline.tsx", "type": "registry:ui", "target": "components/myndui/scroll-timeline.tsx" } ] }, { "name": "container-scroll", "type": "registry:ui", "title": "Container Scroll", "description": "A device frame that un-tilts from a 3D perspective and scales to rest as you scroll — the classic product hero.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/container-scroll/container-scroll.tsx", "type": "registry:ui", "target": "components/myndui/container-scroll.tsx" } ] }, { "name": "three-d-marquee", "type": "registry:ui", "title": "3D Marquee", "description": "A perspective grid of images whose columns drift in alternating directions on a tilted plane.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/three-d-marquee/three-d-marquee.tsx", "type": "registry:ui", "target": "components/myndui/three-d-marquee.tsx" } ] }, { "name": "sticky-scroll", "type": "registry:ui", "title": "Sticky Scroll", "description": "A pinned two-column reveal where scrolling the text steps a synced visual panel through each item.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/sticky-scroll/sticky-scroll.tsx", "type": "registry:ui", "target": "components/myndui/sticky-scroll.tsx" } ] }, { "name": "beam-draw", "type": "registry:ui", "title": "Beam Draw", "description": "SVG beams that draw themselves along scroll progress with a soft glow.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/beam-draw/beam-draw.tsx", "type": "registry:ui", "target": "components/myndui/beam-draw.tsx" } ] }, { "name": "app-showcase", "type": "registry:ui", "title": "App Showcase", "description": "A realistic iPhone or Android device frame that shows your app on screen, with scroll, loop, carousel, and cluster interactions.", "dependencies": ["framer-motion"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/app-showcase/app-showcase.tsx", "type": "registry:ui", "target": "components/myndui/app-showcase.tsx" } ], "cssVars": { "theme": { "animate-app-showcase-scroll": "app-showcase-scroll var(--as-loop, 24s) linear infinite" } }, "css": { "@keyframes app-showcase-scroll": { "from": { "transform": "translateY(0)" }, "to": { "transform": "translateY(-50%)" } } } }, { "name": "store-badge", "type": "registry:ui", "title": "Store Badge", "description": "App Store and Google Play download badges with light/dark finishes, a hover sheen, and an optional scan-to-download QR popover.", "dependencies": ["framer-motion", "uqr"], "registryDependencies": ["@myndui/myndui-theme"], "files": [ { "path": "packages/components/src/store-badge/store-badge.tsx", "type": "registry:ui", "target": "components/myndui/store-badge.tsx" } ] } ] }