{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "ui-beats",
  "homepage": "https://uibeats.com",
  "items": [
    {
      "name": "feature-grid",
      "type": "registry:block",
      "title": "Feature Grid",
      "description": "The FeatureGrid block arranges a set of features into a bento layout, letting each one declare how many columns it spans so the arrangement itself ranks them.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "lucide-react"
      ],
      "registryDependencies": [
        "https://uibeats.com/r/bento-grid.json"
      ],
      "files": [
        {
          "path": "components/blocks/feature-grid.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "hero",
      "type": "registry:block",
      "title": "Hero",
      "description": "The Hero block is a complete landing page opening: eyebrow, headline, description, two calls to action and a row of faces for social proof, over a field of falling meteors. Installing it installs the three components it is built from.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "registryDependencies": [
        "https://uibeats.com/r/avatar-stack.json",
        "https://uibeats.com/r/meteors.json",
        "https://uibeats.com/r/shimmer-button.json"
      ],
      "files": [
        {
          "path": "components/blocks/hero.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "pricing",
      "type": "registry:block",
      "title": "Pricing",
      "description": "The Pricing block lays out a row of plans and traces the recommended one with a travelling Border Beam, so the tier you want chosen is the one that moves rather than the one wearing another badge.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "lucide-react"
      ],
      "registryDependencies": [
        "https://uibeats.com/r/border-beam.json",
        "https://uibeats.com/r/shimmer-button.json"
      ],
      "files": [
        {
          "path": "components/blocks/pricing.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "animated-list",
      "type": "registry:ui",
      "title": "Animated List",
      "description": "The AnimatedList component streams its children in one at a time, springing each new entry into place and pushing the older ones down until they fall out of the bottom of the list.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/animated-list.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "bounce",
      "type": "registry:ui",
      "title": "Bounce",
      "description": "The Bounce component adds a playful, elastic animation to its children when they enter the viewport.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/bounce.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "fade-in",
      "type": "registry:ui",
      "title": "Fade In",
      "description": "The FadeIn component creates a smooth fade-in animation for its children when they enter the viewport.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/fade-in.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "fade-in-unblur",
      "type": "registry:ui",
      "title": "Fade In Unblur",
      "description": "The FadeInUnblur component creates a smooth fade-in while unblurring animation for its children when they enter the viewport.",
      "author": "Divyaswor (https://github.com/divyaswormakai)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/fade-in-unblur.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "rotate-in",
      "type": "registry:ui",
      "title": "Rotate In",
      "description": "The RotateIn component creates a smooth rotation animation for its children when they enter the viewport.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/rotate-in.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scale-in",
      "type": "registry:ui",
      "title": "Scale In",
      "description": "The ScaleIn component creates a smooth scale-in animation for its children when they enter the viewport.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/scale-in.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "smooth-reveal",
      "type": "registry:ui",
      "title": "Smooth Reveal",
      "description": "The SmoothReveal component creates a smooth reveal animation for its children when they enter the viewport.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/smooth-reveal.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "stagger-list",
      "type": "registry:ui",
      "title": "Stagger List",
      "description": "The StaggerList component animates its children into view one after another when the list enters the viewport, without requiring any changes to the children themselves.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/stagger-list.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "animated-beam",
      "type": "registry:ui",
      "title": "Animated Beam",
      "description": "The AnimatedBeam component draws a curved line between any two elements and sends a gradient pulse along it, remeasuring whenever the layout moves.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "cssVars": {
        "light": {
          "accent-pink": "oklch(0.68 0.2 355)",
          "brand": "oklch(0.55 0.23 285)"
        },
        "dark": {
          "accent-pink": "oklch(0.74 0.18 355)",
          "brand": "oklch(0.7 0.19 288)"
        }
      },
      "files": [
        {
          "path": "components/ui/animated-beam.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "orbiting-elements",
      "type": "registry:ui",
      "title": "Orbiting Elements",
      "description": "The OrbitingElements component places children evenly around a circle and rotates them around a centre point, keeping each one upright.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/orbiting-elements.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "gradient-flow",
      "type": "registry:ui",
      "title": "Gradient Flow",
      "description": "The GradientFlow component creates a flowing gradient animation effect for its children, adding visual interest to backgrounds or UI elements.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/gradient-flow.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "meteors",
      "type": "registry:ui",
      "title": "Meteors",
      "description": "The Meteors component drops a field of glowing streaks across its container, each one falling at its own pace so the shower never settles into a repeating pattern.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/meteors.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "retro-grid",
      "type": "registry:ui",
      "title": "Retro Grid",
      "description": "The RetroGrid component lays an infinite grid back in 3D and scrolls it toward the viewer, fading out into a horizon. A synthwave backdrop drawn entirely in CSS.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/retro-grid.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "sparkling-grid",
      "type": "registry:ui",
      "title": "Sparkling Grid",
      "description": "The SparklingGrid component creates an animated grid of dots that ripples outward on mount and sparkles at random, ideal for dynamic, atmospheric backgrounds.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/sparkling-grid.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "aurora",
      "type": "registry:ui",
      "title": "Aurora",
      "description": "The Aurora component drifts three soft bands of colour behind your content on different periods, so the layer keeps rearranging itself instead of looping visibly. Pure CSS gradients and transforms, no canvas.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "cssVars": {
        "light": {
          "accent-pink": "oklch(0.68 0.2 355)",
          "brand": "oklch(0.55 0.23 285)"
        },
        "dark": {
          "accent-pink": "oklch(0.74 0.18 355)",
          "brand": "oklch(0.7 0.19 288)"
        }
      },
      "files": [
        {
          "path": "components/ui/aurora.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dot-pattern",
      "type": "registry:ui",
      "title": "Dot Pattern",
      "description": "The DotPattern component tiles a grid of dots behind your content and lights the ones nearest the pointer, using a masked second copy of the same grid so the bright dots land exactly on the dim ones.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/dot-pattern.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "particles",
      "type": "registry:ui",
      "title": "Particles",
      "description": "The Particles component draws a drifting field of specks on a canvas and scatters them away from the pointer, holding positions as fractions of the frame so a resize redraws the field instead of reshuffling it.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/particles.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "loading-button",
      "type": "registry:ui",
      "title": "Loading Button",
      "description": "The LoadingButton component runs one async action and reports on it in place: it swaps to a spinner while the request is open, confirms with a tick when it resolves, and returns to its resting label on its own.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "lucide-react",
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/loading-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "magnetic-button",
      "type": "registry:ui",
      "title": "Magnetic Button",
      "description": "The MagneticButton component drifts toward the pointer as it approaches and springs back when the pointer leaves, making calls to action feel responsive before they are even clicked.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/magnetic-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "ripple-button",
      "type": "registry:ui",
      "title": "Ripple Button",
      "description": "The RippleButton component sends a ripple out from the exact point it was pressed, sized to reach the button's farthest corner so the whole surface floods however near the edge you click.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/ripple-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "shimmer-button",
      "type": "registry:ui",
      "title": "Shimmer Button",
      "description": "The ShimmerButton component sweeps a band of light across its face on a loop, giving a call to action a slow pulse of movement without asking the reader to hover, click or scroll first.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/shimmer-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "subscribe-button",
      "type": "registry:ui",
      "title": "Subscribe Button",
      "description": "The SubscribeButton component is an interactive button for subscription actions, modelled on the YouTube subscribe animation, with customisable styles and timings.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "lucide-react",
        "motion",
        "next-themes"
      ],
      "files": [
        {
          "path": "components/ui/subscribe-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "rainbow-button",
      "type": "registry:ui",
      "title": "Rainbow Button",
      "description": "The RainbowButton component rings a call to action with a band of colour that travels around it, drawn from the project's own chart tokens so the palette re-themes with the rest of the app.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/rainbow-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "confetti-button",
      "type": "registry:ui",
      "title": "Confetti Button",
      "description": "The ConfettiButton component throws a burst of confetti from its own centre when pressed, measuring the button's position at click time so the pieces come from the thing the reader actually pressed.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "canvas-confetti",
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/confetti-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "card-stack",
      "type": "registry:ui",
      "title": "Card Stack",
      "description": "The CardStack component deals your content as a deck: drag the top card aside to throw it away, the cards behind rise a step, and the dismissed card loops around to the back.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/card-stack.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "flip-card",
      "type": "registry:ui",
      "title": "Flip Card",
      "description": "The FlipCard component creates an elegant, Apple-inspired interactive card that flips to reveal additional content. It features smooth animations, subtle gradients, and a clean design that's perfect for showcasing key information or features.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "lucide-react",
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/flip-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "glowing-card",
      "type": "registry:ui",
      "title": "Glowing Card",
      "description": "The GlowingCard component tracks the cursor across the card and paints a soft glow wherever it goes, so the surface reacts as the pointer moves over it.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/glowing-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "morphing-card",
      "type": "registry:ui",
      "title": "Morphing Card",
      "description": "The MorphingCard component creates an engaging, interactive card that smoothly transitions between different shapes and content. It features elegant 3D rotations, customizable gradients, and a clean design that's perfect for showcasing key information or features in a visually striking manner.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "lucide-react",
        "motion",
        "next-themes"
      ],
      "cssVars": {
        "light": {
          "accent-pink": "oklch(0.68 0.2 355)",
          "brand": "oklch(0.55 0.23 285)"
        },
        "dark": {
          "accent-pink": "oklch(0.74 0.18 355)",
          "brand": "oklch(0.7 0.19 288)"
        }
      },
      "files": [
        {
          "path": "components/ui/morphing-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "tilt-card",
      "type": "registry:ui",
      "title": "Tilt Card",
      "description": "The TiltCard component tilts toward the pointer in 3D and tracks it with a specular highlight, giving flat cards a tactile, physical feel.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/tilt-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "expandable-card",
      "type": "registry:ui",
      "title": "Expandable Card",
      "description": "The ExpandableCard component grows any row of a list into a detail panel in place, sharing a layout id between the two so the card the reader pressed is visibly the card that opens rather than one fading out as a dialog fades in.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/expandable-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "avatar-stack",
      "type": "registry:ui",
      "title": "Avatar Stack",
      "description": "The AvatarStack component overlaps a row of avatars into a single group, collapses everyone past a limit into a +N chip, and lifts an avatar clear of its neighbours on hover without the row changing width.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/avatar-stack.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "bento-grid",
      "type": "registry:ui",
      "title": "Bento Grid",
      "description": "The BentoGrid component arranges cards of different sizes into the asymmetric layout known as a bento box, with each cell declaring how many columns and rows it spans and every card collapsing to full width on small screens.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/bento-grid.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "border-beam",
      "type": "registry:ui",
      "title": "Border Beam",
      "description": "The BorderBeam component wraps any content in a border traced by a travelling beam of light. It follows the container's rounded corners exactly, and nothing around it moves.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/border-beam.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dock",
      "type": "registry:ui",
      "title": "Dock",
      "description": "The Dock component recreates the macOS dock: items swell as the pointer approaches, and each one names itself in a tooltip on hover or focus.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/dock.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "liquid-tabs",
      "type": "registry:ui",
      "title": "Liquid Tabs",
      "description": "The LiquidTabs component is a tab switcher whose selection pill flows between tabs, stretching in proportion to how fast it is travelling and settling back into shape as it lands.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/liquid-tabs.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "marquee",
      "type": "registry:ui",
      "title": "Marquee",
      "description": "The Marquee component scrolls its children in a seamless, infinite loop, with pause-on-hover and faded edges.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/marquee.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scratch-to-reveal",
      "type": "registry:ui",
      "title": "Scratch to Reveal",
      "description": "The ScratchToReveal component covers your content in a foil the user rubs away with a pointer, firing onComplete and dropping the rest of the foil once enough has been cleared.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/scratch-to-reveal.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scroll-progress",
      "type": "registry:ui",
      "title": "Scroll Progress",
      "description": "The ScrollProgress component fills a thin bar as the reader moves through a page or a panel, scaling a single transform rather than resizing an element so it costs nothing on the scroll frame.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/scroll-progress.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "shimmer-effect",
      "type": "registry:ui",
      "title": "Shimmer Effect",
      "description": "The ShimmerEffect component creates a shimmering animation, ideal for loading placeholders or skeleton screens.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/shimmer-effect.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "timeline",
      "type": "registry:ui",
      "title": "Timeline",
      "description": "The Timeline component lays events down a vertical rail that fills as the reader scrolls through them, scaling a single element rather than resizing it so the fill costs nothing on the main thread.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/timeline.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "terminal",
      "type": "registry:ui",
      "title": "Terminal",
      "description": "The Terminal component replays a shell session, typing the commands character by character and printing everything else whole, with the pause sitting in front of each output line where the work would have happened.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/terminal.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "comparison-slider",
      "type": "registry:ui",
      "title": "Comparison Slider",
      "description": "The ComparisonSlider component stacks two layers and reveals one against the other with a divider the reader drags, clipping the top layer rather than resizing it so neither side reflows as the divider moves.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "lucide-react"
      ],
      "files": [
        {
          "path": "components/ui/comparison-slider.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "progress-ring",
      "type": "registry:ui",
      "title": "Progress Ring",
      "description": "The ProgressRing component sweeps an arc round to a value and counts a label up alongside it, driving both from one animation so the number can never finish ahead of the arc describing it.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/progress-ring.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "number-ticker",
      "type": "registry:ui",
      "title": "Number Ticker",
      "description": "The NumberTicker component counts a number up when it scrolls into view, with locale-aware formatting.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/number-ticker.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scroll-reveal",
      "type": "registry:ui",
      "title": "Scroll Reveal",
      "description": "The ScrollReveal component lights up text word by word as the reader scrolls past it, tied to scroll position rather than a timer.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/scroll-reveal.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "gravity-text-swap",
      "type": "registry:ui",
      "title": "Gravity Text Swap",
      "description": "The GravityTextSwap component drops characters into place under a gravity-like fall, so one word gives way to the next instead of simply being replaced.",
      "author": "Michael (https://github.com/lappemic)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/gravity-text-swap.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "split-flap",
      "type": "registry:ui",
      "title": "Split Flap",
      "description": "The SplitFlap component turns text into a mechanical departure board, each column riffling through the alphabet until it reaches its letter, a beat behind the column to its left.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/split-flap.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "text-scramble",
      "type": "registry:ui",
      "title": "Text Scramble",
      "description": "The TextScramble component decodes text one character at a time, cycling through random glyphs before each letter settles into place.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/text-scramble.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "text-shine",
      "type": "registry:ui",
      "title": "Text Shine",
      "description": "The TextShine component sweeps a coloured highlight across your text on a loop, drawing the eye without demanding a click.",
      "author": "Divyaswor (https://github.com/divyaswormakai)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/text-shine.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "text-writer",
      "type": "registry:ui",
      "title": "Text Writer",
      "description": "The TextWriter component creates a typing animation effect for text, where characters appear one by one to mimic real-time typing.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/text-writer.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "gradient-text",
      "type": "registry:ui",
      "title": "Gradient Text",
      "description": "The GradientText component paints a line of text with a colour ramp that travels across it on a loop, so a headline word carries the accent colour as movement rather than as a flat fill.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "cssVars": {
        "light": {
          "accent-pink": "oklch(0.68 0.2 355)",
          "brand": "oklch(0.55 0.23 285)"
        },
        "dark": {
          "accent-pink": "oklch(0.74 0.18 355)",
          "brand": "oklch(0.7 0.19 288)"
        }
      },
      "files": [
        {
          "path": "components/ui/gradient-text.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "flip-words",
      "type": "registry:ui",
      "title": "Flip Words",
      "description": "The FlipWords component cycles one slot in a sentence through a list of words, blurring each out as the next rises into its place and animating the width difference so the rest of the line never jumps.",
      "author": "Nikhil Singh (https://nikhils4.vercel.app)",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "components/ui/flip-words.tsx",
          "type": "registry:ui"
        }
      ]
    }
  ]
}