{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "easyui", "homepage": "https://github.com/Surajmaurya1/easyui", "items": [ { "name": "activity-feed", "type": "registry:ui", "title": "Activity Feed", "description": "A developer telemetry and audit log stream featuring category filtering, live real-time event simulation with Framer Motion slide insertions, and expandable JSON payloads.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/ActivityFeed.tsx", "type": "registry:ui", "target": "components/ui/activity-feed.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "animated-file-upload", "type": "registry:ui", "title": "Animated File Upload", "description": "A minimal, physical drag-and-drop file uploader with smooth drop reaction, independent file upload tracking, progressive state morphing, and accessible retry flows.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/AnimatedFileUpload.tsx", "type": "registry:ui", "target": "components/ui/animated-file-upload.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "animated-number", "type": "registry:ui", "title": "Animated Number Morph", "description": "An Apple-grade smooth rolling digit counter that independently morphs individual numerical columns with physics-based springs, locale commas, currencies, and compact notation.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/AnimatedNumber.tsx", "type": "registry:ui", "target": "components/ui/animated-number.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "animated-tabs", "type": "registry:ui", "title": "Animated Tabs", "description": "A tabbed switcher with physical pill indicator sliding smoothly between active items with content cross-fades.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/AnimatedTabs.tsx", "type": "registry:ui", "target": "components/ui/animated-tabs.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "batch-gesture-tray", "type": "registry:ui", "title": "Batch Gesture Tray", "description": "A touch-ready contextual tray that slides into view upon item selection, presenting bulk actions and real-time count telemetry.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/BatchGestureTray.tsx", "type": "registry:ui", "target": "components/ui/batch-gesture-tray.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "book-call-button", "type": "registry:ui", "title": "Book Call Button", "description": "A premium \"Book a call\" pill with a green expanding capsule. At rest, a 36% accent capsule holds a dotted arrow + label; on hover, the capsule fills the pill, the label slides out, and a phone icon with ringing lines fades in centered.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/BookCallButton.tsx", "type": "registry:ui", "target": "components/ui/book-call-button.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "branching-submenu", "type": "registry:ui", "title": "Branching Submenu", "description": "A spatial submenu that connects parent options to child actions with staged branch motion.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/BranchingSubmenu.tsx", "type": "registry:ui", "target": "components/ui/branching-submenu.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "A versatile, production-ready button system with 8 visual variants, 4 sizes, loading spinner states, icon slots, and spring tap feedback.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/Button.tsx", "type": "registry:ui", "target": "components/ui/button.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "car-smoke-page-transition", "type": "registry:ui", "title": "Car Smoke Page Transition", "description": "A cinematic page transition where a speeding car crosses the screen, leaving a smoke trail before transitioning to the next page.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/CarSmokePageTransition.tsx", "type": "registry:ui", "target": "components/ui/car-smoke-page-transition.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/theme/useTheme.tsx", "type": "registry:lib", "target": "lib/theme/useTheme.tsx" } ] }, { "name": "circular-orbit", "type": "registry:ui", "title": "Circular Orbit", "description": "A circular gallery of image tiles orbiting around a centered title. All motion runs on a single MotionValue driven by useAnimationFrame, so no React renders per frame.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/CircularOrbit.tsx", "type": "registry:ui", "target": "components/ui/circular-orbit.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "code-snippet-deck", "type": "registry:ui", "title": "Code Snippet Deck", "description": "An interactive multi-runtime developer code snippet deck with runtime switching (cURL, TypeScript, Python, Go, Rust), live dynamic parameter customizations, and line highlighting.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/CodeSnippetDeck.tsx", "type": "registry:ui", "target": "components/ui/code-snippet-deck.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "command-menu", "type": "registry:ui", "title": "Command Menu", "description": "A global keyboard-first command palette with fuzzy filtering, category badges, and keyboard arrow controls.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/CommandMenu.tsx", "type": "registry:ui", "target": "components/ui/command-menu.tsx" }, { "path": "src/components/icons/GithubIcon.tsx", "type": "registry:ui", "target": "components/icons/github-icon.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" }, { "path": "src/lib/constants.ts", "type": "registry:lib", "target": "lib/constants.ts" } ] }, { "name": "cursor-follower", "type": "registry:ui", "title": "Cursor Follower", "description": "A smooth spring-based cursor follower with customizable physics, velocity scaling, and custom child icons or badges.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/CursorFollower.tsx", "type": "registry:ui", "target": "components/ui/cursor-follower.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "density-lens", "type": "registry:ui", "title": "Density Lens", "description": "An interactive floating lens that tracks pointer movement to reveal high-density data, magnified details, or alternative views.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/DensityLens.tsx", "type": "registry:ui", "target": "components/ui/density-lens.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "dependency-trace", "type": "registry:ui", "title": "Dependency Trace", "description": "An interactive SVG node graph that maps and dynamically traces relationship connections with directional bezier curves.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/DependencyTrace.tsx", "type": "registry:ui", "target": "components/ui/dependency-trace.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "depth-corridor", "type": "registry:ui", "title": "Depth Corridor", "description": "A 3D spatial layer stack with receding perspective depth, progressive focal blurs, and pointer parallax motion.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/DepthCorridor.tsx", "type": "registry:ui", "target": "components/ui/depth-corridor.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "directional-tooltip", "type": "registry:ui", "title": "DirectionalTooltip", "description": "A tooltip that appears from the direction it originates — it starts a small distance outside the trigger in its preferred direction and springs inward, so it feels like it materializes from the trigger.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/DirectionalTooltip.tsx", "type": "registry:ui", "target": "components/ui/directional-tooltip.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "dot-field", "type": "registry:ui", "title": "Dot Field", "description": "High-performance lightweight static Canvas dot matrix background with dynamic gradient coloring and responsive density scaling.", "files": [ { "path": "src/components/ui/DotField.tsx", "type": "registry:ui", "target": "components/ui/dot-field.tsx" }, { "path": "src/components/ui/DotField.css", "type": "registry:ui", "target": "components/ui/dot-field.css" } ] }, { "name": "drag-to-confirm", "type": "registry:ui", "title": "Drag to Confirm", "description": "A physical drag-to-confirm slider for high-stakes and destructive actions, equipped with elastic spring snapback physics, progressive track illumination, and accessible keyboard fallbacks.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/DragToConfirm.tsx", "type": "registry:ui", "target": "components/ui/drag-to-confirm.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "draw-checkbox", "type": "registry:ui", "title": "DrawCheckbox", "description": "A checkbox whose checkmark draws itself (path length animation) and settles with a tiny overshoot. The box scales from 0.9 -> 1.04 -> 1.0 for a tactile snap feel.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/DrawCheckbox.tsx", "type": "registry:ui", "target": "components/ui/draw-checkbox.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "evil-eye", "type": "registry:ui", "title": "Evil Eye", "description": "A hanging navy amulet disc with concentric sky-blue and white rings that swings with realistic inertia in response to the pointer, painted as a layered SVG and driven by a single spring pipeline.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/EvilEye.tsx", "type": "registry:ui", "target": "components/ui/evil-eye.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "expandable-data-row", "type": "registry:ui", "title": "Expandable Data Row", "description": "A polished table component with fluid accordion row unfolding, revealing deep metadata, audit activity feeds, and quick actions, with automatic card restructuring on mobile viewports.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/ExpandableDataRow.tsx", "type": "registry:ui", "target": "components/ui/expandable-data-row.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "expandable-search", "type": "registry:ui", "title": "Expandable Search", "description": "A compact search pill that smoothly widens on focus with shortcut hint pills and clear button.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/ExpandableSearch.tsx", "type": "registry:ui", "target": "components/ui/expandable-search.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "faq", "type": "registry:ui", "title": "FAQ", "description": "An expandable accordion FAQ component with smooth spring height calculation, single/multi-open modes, category filtering, search, and full ARIA keyboard accessibility.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/FAQ.tsx", "type": "registry:ui", "target": "components/ui/faq.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "floating-action-dock", "type": "registry:ui", "title": "Floating Action Dock", "description": "A floating quick-action toolbar inspired by macOS dock physics with smooth magnification and subtle tooltips.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/FloatingActionDock.tsx", "type": "registry:ui", "target": "components/ui/floating-action-dock.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "focus-mode", "type": "registry:ui", "title": "Focus Mode", "description": "An atmospheric focus-mode interaction that isolates selected cards or sections by smoothly dimming surrounding distractions with zero layout shift, tactile spring scaling, and Escape key dismissal.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/FocusMode.tsx", "type": "registry:ui", "target": "components/ui/focus-mode.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "form", "type": "registry:ui", "title": "Form", "description": "A modular, composable form system with accessible inputs, textareas, custom selects, checkboxes, radio groups, switches, and animated validation messages.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/Form.tsx", "type": "registry:ui", "target": "components/ui/form.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "glass-navbar", "type": "registry:ui", "title": "Glass Navbar", "description": "A modern, responsive glassmorphic navbar with smooth spring navigation pills, mobile menu drawer, and keyboard accessibility.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/GlassNavbar.tsx", "type": "registry:ui", "target": "components/ui/glass-navbar.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "gooey-menu", "type": "registry:ui", "title": "Gooey Menu", "description": "A tactile liquid dropdown menu with organic SVG metaball fusion filter and spring-driven extrusion animation.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/GooeyMenu.tsx", "type": "registry:ui", "target": "components/ui/gooey-menu.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "gravity-particle-burst", "type": "registry:ui", "title": "Gravity Particle Burst", "description": "A pointer-triggered canvas particle burst with velocity, gravity, friction, and short-lived physical follow-through.", "dependencies": [ "lucide-react" ], "files": [ { "path": "src/components/ui/GravityParticleBurst.tsx", "type": "registry:ui", "target": "components/ui/gravity-particle-burst.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "hamburger-menu", "type": "registry:ui", "title": "Hamburger Menu", "description": "An iconic three-line menu toggle that transforms smoothly into a symmetrical close symbol.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/HamburgerMenu.tsx", "type": "registry:ui", "target": "components/ui/hamburger-menu.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "interactive-timeline", "type": "registry:ui", "title": "Interactive Timeline", "description": "A developer-focused milestone and deployment timeline featuring dynamic progress lines, pulsating status nodes, expandable telemetry cards, and commit hash copy.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/InteractiveTimeline.tsx", "type": "registry:ui", "target": "components/ui/interactive-timeline.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "intro-loader", "type": "registry:ui", "title": "Intro Loader", "description": "An Apple-inspired multilingual welcome splash and intro loader that rapidly cycles localized greetings with fluid blur transitions, progress tracking, and accessible skip controls.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/IntroLoader.tsx", "type": "registry:ui", "target": "components/ui/intro-loader.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "ios-search-bar", "type": "registry:ui", "title": "iOS-style Search Bar", "description": "A minimalist search pill that smoothly expands on focus and reveals quick-clear controls with spring animation.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/IOSSearchBar.tsx", "type": "registry:ui", "target": "components/ui/ios-search-bar.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "liquid-ripple-button", "type": "registry:ui", "title": "Liquid Ripple Button", "description": "A tactile button whose pointer-origin ripple and subtle wave layer make press feedback feel fluid.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/LiquidRippleButton.tsx", "type": "registry:ui", "target": "components/ui/liquid-ripple-button.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "liquid-toggle", "type": "registry:ui", "title": "Liquid Toggle", "description": "A toggle with a liquid/blob-like transition. The internal shape deforms organically as it travels from off to on — stretching along the travel axis and settling into a natural blob shape rather than simply translating.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/LiquidToggle.tsx", "type": "registry:ui", "target": "components/ui/liquid-toggle.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/theme/useTheme.tsx", "type": "registry:lib", "target": "lib/theme/useTheme.tsx" } ] }, { "name": "loader", "type": "registry:ui", "title": "Loader", "description": "A minimal, purpose-driven loading indicator with 4 calm, non-anxious motion variants.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/Loader.tsx", "type": "registry:ui", "target": "components/ui/loader.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "lock-input", "type": "registry:ui", "title": "LockInput", "description": "A text input whose focus state subtly \"locks\" into place — a focus ring scales in from the center and the border tweens to active, giving the impression that the input snaps closed on itself.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/LockInput.tsx", "type": "registry:ui", "target": "components/ui/lock-input.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "login", "type": "registry:ui", "title": "Login", "description": "A production-ready authentication card built with the EasyUI form system, featuring password show/hide, remember me, validation states, and social logins.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/Login.tsx", "type": "registry:ui", "target": "components/ui/login.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "mac-os-folder-cards", "type": "registry:ui", "title": "macOS Folder Cards", "description": "An authentic porcelain-white macOS Finder folder icon that unrolls interactive cards with fluid Apple spring physics.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/MacOSFolderCards.tsx", "type": "registry:ui", "target": "components/ui/mac-os-folder-cards.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "magnetic-button", "type": "registry:ui", "title": "Magnetic Button", "description": "A responsive button with subtle proximity-based physics that pulls towards the cursor on hover and snaps back on departure.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/MagneticButton.tsx", "type": "registry:ui", "target": "components/ui/magnetic-button.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "metric-hud", "type": "registry:ui", "title": "Metric HUD", "description": "An interactive developer telemetry card featuring hardware-accelerated SVG sparklines, pointer-scrubbing point inspection, spring-animated time range morphing, and delta indicators.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/MetricHUD.tsx", "type": "registry:ui", "target": "components/ui/metric-hud.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "morphing-blob", "type": "registry:ui", "title": "Morphing Blob", "description": "An ambient, accessible SVG blob background that continuously morphs with spring physics and subtly follows the cursor for a fluid, interactive visual effect.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/MorphingBlob.tsx", "type": "registry:ui", "target": "components/ui/morphing-blob.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "morphing-button", "type": "registry:ui", "title": "Morphing Button", "description": "A layout-stable interactive action button that smoothly transitions between Idle, Loading, Success, and Error states without jarring jumps or dimension shifts.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/MorphingButton.tsx", "type": "registry:ui", "target": "components/ui/morphing-button.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "morphing-dialog", "type": "registry:ui", "title": "Morphing Dialog", "description": "An expandable card trigger that fluidly morphs into a centered dialog without jarring popup animations.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/MorphingDialog.tsx", "type": "registry:ui", "target": "components/ui/morphing-dialog.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "morphing-shape-loader", "type": "registry:ui", "title": "Morphing Shape Loader", "description": "A loading indicator that continuously morphs between configurable SVG shapes via real path interpolation. The transition is a genuine geometric morph — never a fade out / in.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/MorphingShapeLoader.tsx", "type": "registry:ui", "target": "components/ui/morphing-shape-loader.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/theme/useTheme.tsx", "type": "registry:lib", "target": "lib/theme/useTheme.tsx" } ] }, { "name": "neon-edge-button", "type": "registry:ui", "title": "Neon Edge Button", "description": "A button with a restrained light source travelling around the border while the label remains primary.", "dependencies": [ "lucide-react" ], "files": [ { "path": "src/components/ui/NeonEdgeButton.tsx", "type": "registry:ui", "target": "components/ui/neon-edge-button.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "nimbu-mirchi", "type": "registry:ui", "title": "Nimbu Mirchi", "description": "A hanging lemon-and-green-chilli charm that swings with realistic inertia in response to the pointer, built from layered physical springs rather than a single rigid illustration.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/NimbuMirchi.tsx", "type": "registry:ui", "target": "components/ui/nimbu-mirchi.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "notification-bell", "type": "registry:ui", "title": "Notification Bell", "description": "An interactive notification trigger with animated badge counter, arrival shake feedback, and dropdown panel.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/NotificationBell.tsx", "type": "registry:ui", "target": "components/ui/notification-bell.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "notification-stack", "type": "registry:ui", "title": "Notification Stack", "description": "A stacked notification card system with physical spring stacking elevation, swipe-to-dismiss drag, and simulation triggers.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/NotificationStack.tsx", "type": "registry:ui", "target": "components/ui/notification-stack.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "orbital-loading-ring", "type": "registry:ui", "title": "Orbital Loading Ring", "description": "A lightweight loading indicator with layered rings and orbiting particles that communicate active processing.", "files": [ { "path": "src/components/ui/OrbitalLoadingRing.tsx", "type": "registry:ui", "target": "components/ui/orbital-loading-ring.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "origin-dropdown", "type": "registry:ui", "title": "OriginDropdown", "description": "A dropdown with origin-aware expansion — the menu materializes from the chosen side with a slight scale and an inward translation, so its perceived origin is the trigger edge closest to the menu.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/OriginDropdown.tsx", "type": "registry:ui", "target": "components/ui/origin-dropdown.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "otp-input", "type": "registry:ui", "title": "OTP Input", "description": "An accessible one-time-passcode input made of auto-advancing digit boxes, each with a spring-driven pop animation on entry, built with Framer Motion and Tailwind CSS.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/OtpInput.tsx", "type": "registry:ui", "target": "components/ui/otp-input.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "particle-delete", "type": "registry:ui", "title": "Particle Delete", "description": "Premium physics-driven particle dissolution delete animation that rasterizes components into thousands of authentic tiny pixels and disperses them smoothly before state removal.", "dependencies": [ "lucide-react" ], "files": [ { "path": "src/components/ui/ParticleDelete.tsx", "type": "registry:ui", "target": "components/ui/particle-delete.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/particle-delete.ts", "type": "registry:lib", "target": "lib/particle-delete.ts" } ] }, { "name": "payment-receipt-printer", "type": "registry:ui", "title": "Payment Receipt Printer", "description": "An animated payment and order receipt printer component for React featuring realistic thermal paper extrusion, chassis micro-vibration, customizable receipt itemization, and replay controls.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/PaymentReceiptPrinter.tsx", "type": "registry:ui", "target": "components/ui/payment-receipt-printer.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "payment-status", "type": "registry:ui", "title": "Payment Status", "description": "A calm, Apple-grade payment confirmation card with animated SVG path checkmark drawing, staged verification lifecycle transitions, receipt inspection, and failure recovery.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/PaymentStatus.tsx", "type": "registry:ui", "target": "components/ui/payment-status.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "peek-card", "type": "registry:ui", "title": "Peek Card", "description": "An origin-anchored contextual preview popover that emerges directly from target triggers on hover or tap with smart collision edge detection and rich metadata summaries.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/PeekCard.tsx", "type": "registry:ui", "target": "components/ui/peek-card.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "pill-navigation", "type": "registry:ui", "title": "Pill Navigation", "description": "A restrained segmented navigation control with shared pill layout morphing and nested submenu dropdown support.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/PillNavigation.tsx", "type": "registry:ui", "target": "components/ui/pill-navigation.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "press-button", "type": "registry:ui", "title": "PressButton", "description": "A button that compresses slightly on press and settles with a tiny natural overshoot for a tactile, physical feel.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/PressButton.tsx", "type": "registry:ui", "target": "components/ui/press-button.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "pricing", "type": "registry:ui", "title": "Pricing", "description": "A minimal two-tier pricing component for EasyUI. Native to the existing design system, fully theme-aware, with a quiet Free tier and a slightly more attractive Pro tier — without resorting to SaaS marketing tropes.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/Pricing.tsx", "type": "registry:ui", "target": "components/ui/pricing.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "profile-card", "type": "registry:ui", "title": "Profile Card", "description": "A premium dark social profile card with a painted blue cover-art panel, action row, and a detail panel with avatar, verified name, bio, follower stats, and outbound website link.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/ProfileCard.tsx", "type": "registry:ui", "target": "components/ui/profile-card.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "recovery-ledger", "type": "registry:ui", "title": "Recovery Ledger", "description": "An archival audit timeline and state recovery ledger with chronological snapshot markers, diff inspection, and one-click rollback triggers.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/RecoveryLedger.tsx", "type": "registry:ui", "target": "components/ui/recovery-ledger.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "reveal-card", "type": "registry:ui", "title": "Reveal Card", "description": "A high-definition product card with smooth cursor-driven 3D perspective rotation, dynamic glare, and revealed content.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/RevealCard.tsx", "type": "registry:ui", "target": "components/ui/reveal-card.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "rocket-party-popper", "type": "registry:ui", "title": "Rocket Party Popper", "description": "An interactive black rocket launch that blasts into a colorful party popper confetti shower to reveal celebratory milestones.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/RocketPartyPopper.tsx", "type": "registry:ui", "target": "components/ui/rocket-party-popper.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "scroll-progress-nav", "type": "registry:ui", "title": "Scroll Progress Navigation", "description": "A floating table-of-contents navigation pill that tracks scroll depth, dynamically morphs between resting and floating states, highlights active sections, and enables smooth scrolling.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/ScrollProgressNav.tsx", "type": "registry:ui", "target": "components/ui/scroll-progress-nav.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "selection-basket", "type": "registry:ui", "title": "Selection Basket", "description": "A floating bulk-action toolbar that smoothly rises from the bottom of the screen when multiple dataset items are selected, supporting batch operations, horizontal scrolling, and clear triggers.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/SelectionBasket.tsx", "type": "registry:ui", "target": "components/ui/selection-basket.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "settle-modal", "type": "registry:ui", "title": "SettleModal", "description": "A modal whose content has a tiny scale/settle instead of a generic fade. The panel scales 0.94 -> 1.02 -> 1.0 with a small y travel, then the inner content layers its own gentle settle on top.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/SettleModal.tsx", "type": "registry:ui", "target": "components/ui/settle-modal.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "sign-up", "type": "registry:ui", "title": "Sign Up", "description": "A comprehensive registration card with live password strength metrics, password confirmation matching, terms validation, and social onboarding.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/SignUp.tsx", "type": "registry:ui", "target": "components/ui/sign-up.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "slide-pagination", "type": "registry:ui", "title": "SlidePagination", "description": "A pagination control where the active indicator slides between pages rather than instantly switching. The active background uses shared layoutId so the indicator visibly travels from one item to the next.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/SlidePagination.tsx", "type": "registry:ui", "target": "components/ui/slide-pagination.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "small-floating-dock", "type": "registry:ui", "title": "Small Floating Dock", "description": "A minimal, gesture-responsive floating dock for quick access to 3-5 primary actions.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/SmallFloatingDock.tsx", "type": "registry:ui", "target": "components/ui/small-floating-dock.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "smart-comparison", "type": "registry:ui", "title": "Smart Comparison", "description": "An interactive feature matrix and SaaS tier comparison component featuring live difference filtering, collapsible specification categories, search indexing, and mobile card toggle.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/SmartComparison.tsx", "type": "registry:ui", "target": "components/ui/smart-comparison.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "smooth-accordion", "type": "registry:ui", "title": "Smooth Accordion", "description": "An accordion component with physics height transition, rotating chevron indicators, and accessible keyboard toggles.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/SmoothAccordion.tsx", "type": "registry:ui", "target": "components/ui/smooth-accordion.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "spotlight-card", "type": "registry:ui", "title": "Spotlight Card", "description": "A dark elevated surface that illuminates border and inner surfaces dynamically based on mouse pointer coordinates.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/SpotlightCard.tsx", "type": "registry:ui", "target": "components/ui/spotlight-card.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "spotlight-search", "type": "registry:ui", "title": "Spotlight Search", "description": "A global command palette and search overlay triggered by ⌘K featuring real-time fuzzy filtering, moving active highlight springs, kbd shortcuts, and full keyboard navigation.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/SpotlightSearch.tsx", "type": "registry:ui", "target": "components/ui/spotlight-search.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" }, { "path": "src/lib/constants.ts", "type": "registry:lib", "target": "lib/constants.ts" } ] }, { "name": "spring-select", "type": "registry:ui", "title": "SpringSelect", "description": "A select dropdown whose menu follows the trigger with a tiny spring. The chevron rotates a hair past 180° before settling, and the panel slides down with a subtle overshoot.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/SpringSelect.tsx", "type": "registry:ui", "target": "components/ui/spring-select.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "stack-unfold-panel", "type": "registry:ui", "title": "Stack Unfold Panel", "description": "A vertically stacked card deck that unfolds progressively with spring physics, shifting adjacent panels with zero layout jank.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/StackUnfoldPanel.tsx", "type": "registry:ui", "target": "components/ui/stack-unfold-panel.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "stacked-cards", "type": "registry:ui", "title": "Stacked Cards", "description": "A responsive, scroll-driven stacking cards component built with Tailwind CSS and Framer Motion. Cards start aligned in a column and stack gracefully on scroll without hijacking page scrolling.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/StackedCards.tsx", "type": "registry:ui", "target": "components/ui/stacked-cards.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "story-card", "type": "registry:ui", "title": "Story Cards", "description": "A responsive, accessible story cards carousel for React applications built with Tailwind CSS and Framer Motion.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/StoryCard.tsx", "type": "registry:ui", "target": "components/ui/story-card.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "stretch-switch", "type": "registry:ui", "title": "StretchSwitch", "description": "A toggle switch whose thumb stretches slightly while dragging or pressing, then snaps naturally to its destination via a snappy spring.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/StretchSwitch.tsx", "type": "registry:ui", "target": "components/ui/stretch-switch.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "text-scramble-decoder", "type": "registry:ui", "title": "Text Scramble Decoder", "description": "A controlled text reveal that resolves scrambled glyphs into readable copy without changing the text semantics.", "dependencies": [ "lucide-react" ], "files": [ { "path": "src/components/ui/TextScrambleDecoder.tsx", "type": "registry:ui", "target": "components/ui/text-scramble-decoder.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "thinking-orb", "type": "registry:ui", "title": "Thinking Orb", "description": "Minimalist monochrome spherical particle vortex with orbital physics, pure black-and-white luminous styling, and 9 cognitive state deformations.", "files": [ { "path": "src/components/ui/ThinkingOrb.tsx", "type": "registry:ui", "target": "components/ui/thinking-orb.tsx" } ] }, { "name": "torque-dial", "type": "registry:ui", "title": "Torque Dial", "description": "A rotational control dial with realistic physical angular momentum, velocity tracking, and exponential friction deceleration.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/TorqueDial.tsx", "type": "registry:ui", "target": "components/ui/torque-dial.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "typewriter-button", "type": "registry:ui", "title": "Typewriter Button", "description": "An interactive button that reveals its label character-by-character with optional synthesized mechanical audio feedback.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/TypewriterButton.tsx", "type": "registry:ui", "target": "components/ui/typewriter-button.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "undo-toast", "type": "registry:ui", "title": "Undo Toast", "description": "An advanced undo notification toast featuring an interactive progress countdown, pause-on-hover mechanics, action reversal animation, and versatile position anchoring.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/UndoToast.tsx", "type": "registry:ui", "target": "components/ui/undo-toast.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "unfold-accordion", "type": "registry:ui", "title": "UnfoldAccordion", "description": "An accordion whose content unfolds with the chevron and spacing moving together. The chevron rotates 180° while the content height expands and the inner content slides up to close the gap, producing a single, fluid motion.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/UnfoldAccordion.tsx", "type": "registry:ui", "target": "components/ui/unfold-accordion.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "velocity-toast", "type": "registry:ui", "title": "VelocityToast", "description": "A toast that enters with velocity and settles, with a progress indicator that responds naturally — pauses on hover, resumes with no jump, and eases slightly in the final 10% so dismissal feels intentional.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "src/components/ui/VelocityToast.tsx", "type": "registry:ui", "target": "components/ui/velocity-toast.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" }, { "path": "src/lib/motion-tokens.ts", "type": "registry:lib", "target": "lib/motion-tokens.ts" } ] }, { "name": "wallet-card", "type": "registry:ui", "title": "Wallet Card", "description": "A premium dark wallet card with a blue radial-gradient surface, live balance display, iOS-style toggle, and a primary action button. The card surface responds to the pointer with a soft cyan shine driven entirely by MotionValues.", "dependencies": [ "framer-motion" ], "files": [ { "path": "src/components/ui/WalletCard.tsx", "type": "registry:ui", "target": "components/ui/wallet-card.tsx" }, { "path": "src/lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] } ] }