---
name: "@svelte-bits"
slug: "svelte-bits"
description: "An open source collection of high quality, animated, interactive & fully customizable Svelte components for building stunning, memorable user interfaces."
category: "Animated components"
tags: ["animation", "backgrounds", "cards", "glassmorphism", "icons", "media", "navigation", "retro", "text-effects"]
framework: "svelte"
license: null
author: "DavidHDev"
website: "https://sveltebits.xyz"
github: "https://github.com/DavidHDev/svelte-bits"
registry: "https://sveltebits.xyz/r/registry.json"
pro: false
pro_url: null
github_stars: 219
component_count: 128
generated_at: "2026-07-28T08:00:50.948Z"
---

# @svelte-bits

An open source collection of high quality, animated, interactive & fully customizable Svelte components for building stunning, memorable user interfaces.

## Links

- Website: https://sveltebits.xyz
- GitHub: https://github.com/DavidHDev/svelte-bits
- Registry JSON: https://sveltebits.xyz/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/svelte-bits
- This file: https://sh4dcn.vercel.app/md/svelte-bits.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://sveltebits.xyz/r/registry.json
pnpm dlx shadcn@latest add https://sveltebits.xyz/r/registry.json
bunx shadcn@latest add https://sveltebits.xyz/r/registry.json
# clone the source repo
git clone https://github.com/DavidHDev/svelte-bits.git
# fetch the raw registry index
curl -s https://sveltebits.xyz/r/registry.json
```

## Components (128)

| name | type | description | install |
| --- | --- | --- | --- |
| animated-content | registry:component | Scroll-triggered entrance animation with distance, direction, scale and opacity controls. Powered by GSAP + ScrollTrigger. | `npx shadcn@latest add https://sveltebits.xyz/r/animated-content.json` |
| antigravity | registry:component | Instanced 3D particles that orbit and react to the mouse with wave physics, rendered with three.js. | `npx shadcn@latest add https://sveltebits.xyz/r/antigravity.json` |
| blob-cursor | registry:component | Gooey blob cursor with a trail of lagging blobs, smoothed via GSAP. | `npx shadcn@latest add https://sveltebits.xyz/r/blob-cursor.json` |
| click-spark | registry:component | Clickable container that emits radial spark lines on click. | `npx shadcn@latest add https://sveltebits.xyz/r/click-spark.json` |
| crosshair | registry:component | Animated crosshair lines that follow the cursor with subtle SVG turbulence on hover. | `npx shadcn@latest add https://sveltebits.xyz/r/crosshair.json` |
| cubes | registry:component | 3D cube grid that tilts toward the cursor with optional ripple-on-click and idle drift. | `npx shadcn@latest add https://sveltebits.xyz/r/cubes.json` |
| electric-border | registry:component | Animated electric arcs around rounded rectangle borders rendered to canvas with noise displacement. | `npx shadcn@latest add https://sveltebits.xyz/r/electric-border.json` |
| fade-content | registry:component | Scroll-triggered fade-in (with optional blur) entrance using GSAP + ScrollTrigger, with optional auto-disappearance. | `npx shadcn@latest add https://sveltebits.xyz/r/fade-content.json` |
| ghost-cursor | registry:component | WebGL ghostly cursor trail rendered with three.js + bloom + film grain post-processing. | `npx shadcn@latest add https://sveltebits.xyz/r/ghost-cursor.json` |
| glare-hover | registry:component | Hover-triggered moving glare highlight across a card. | `npx shadcn@latest add https://sveltebits.xyz/r/glare-hover.json` |
| gradual-blur | registry:component | Multi-layer gradient-masked backdrop blur for soft fade-out edges (top/bottom/left/right). | `npx shadcn@latest add https://sveltebits.xyz/r/gradual-blur.json` |
| image-trail | registry:component | Mouse trail of images with 8 visually distinct GSAP variants. | `npx shadcn@latest add https://sveltebits.xyz/r/image-trail.json` |
| laser-flow | registry:component | Volumetric laser beam with wisps and tilting fog volume, rendered with three.js raw shader. | `npx shadcn@latest add https://sveltebits.xyz/r/laser-flow.json` |
| logo-loop | registry:component | Smooth, infinite, pause-on-hover marquee for partner logos with optional fade-out edges. | `npx shadcn@latest add https://sveltebits.xyz/r/logo-loop.json` |
| magic-rings | registry:component | WebGL2 concentric ring animation with mouse parallax, hover scale, and click burst. Real three.js shader. | `npx shadcn@latest add https://sveltebits.xyz/r/magic-rings.json` |
| magnet | registry:component | Magnetic pull effect that attracts content toward the cursor when nearby. | `npx shadcn@latest add https://sveltebits.xyz/r/magnet.json` |
| magnet-lines | registry:component | A grid of small line segments that rotate to face the cursor. | `npx shadcn@latest add https://sveltebits.xyz/r/magnet-lines.json` |
| meta-balls | registry:component | Animated metaballs (gooey blob field) with cursor interaction, rendered with OGL shader. | `npx shadcn@latest add https://sveltebits.xyz/r/meta-balls.json` |
| metallic-paint | registry:component | Image-driven liquid metallic paint shader (WebGL2) with depth field solved via SOR relaxation. | `npx shadcn@latest add https://sveltebits.xyz/r/metallic-paint.json` |
| noise | registry:component | Full-viewport animated film-grain canvas overlay. | `npx shadcn@latest add https://sveltebits.xyz/r/noise.json` |
| orbit-images | registry:component | Images orbiting along a configurable SVG path (ellipse, circle, star, heart, infinity, wave, custom). | `npx shadcn@latest add https://sveltebits.xyz/r/orbit-images.json` |
| pixel-trail | registry:component | Pixelated mouse trail with optional gooey blend, rendered with three.js + a canvas-based trail texture. | `npx shadcn@latest add https://sveltebits.xyz/r/pixel-trail.json` |
| pixel-transition | registry:component | Hover/click reveal that transitions between two contents through a randomized pixel grid effect. | `npx shadcn@latest add https://sveltebits.xyz/r/pixel-transition.json` |
| ribbons | registry:component | Colorful spring-driven ribbon trails following the cursor, rendered with OGL polylines. | `npx shadcn@latest add https://sveltebits.xyz/r/ribbons.json` |
| shape-blur | registry:component | Mouse-reactive blurred SDF shapes (rounded rect, circle, ring, triangle) rendered with three.js. | `npx shadcn@latest add https://sveltebits.xyz/r/shape-blur.json` |
| splash-cursor | registry:component | Liquid splash burst at cursor with curling ripples and waves. | `npx shadcn@latest add https://sveltebits.xyz/r/splash-cursor.json` |
| star-border | registry:component | Button-like wrapper with two animated radial-gradient sweeps tracing the top and bottom border. | `npx shadcn@latest add https://sveltebits.xyz/r/star-border.json` |
| sticker-peel | registry:component | Draggable sticker that peels off on hover, with SVG specular lighting and drop shadow filters. | `npx shadcn@latest add https://sveltebits.xyz/r/sticker-peel.json` |
| target-cursor | registry:component | Custom spinning crosshair cursor that snaps to corners of elements matching a selector when hovered. | `npx shadcn@latest add https://sveltebits.xyz/r/target-cursor.json` |
| aurora | registry:component | WebGL aurora background with configurable color stops, amplitude, blend and speed. Real OGL shader, not a CSS gradient. | `npx shadcn@latest add https://sveltebits.xyz/r/aurora.json` |
| balatro | registry:component | Swirling pixel-painted Balatro-style WebGL background with mouse interaction. | `npx shadcn@latest add https://sveltebits.xyz/r/balatro.json` |
| ballpit | registry:component | Interactive 3D ball pit using Three.js physics. | `npx shadcn@latest add https://sveltebits.xyz/r/ballpit.json` |
| beams | registry:component | Light beams animated with noise displacement. | `npx shadcn@latest add https://sveltebits.xyz/r/beams.json` |
| color-bends | registry:component | Three.js shader background with warped color bands, pointer parallax, noise, and rotation controls. | `npx shadcn@latest add https://sveltebits.xyz/r/color-bends.json` |
| dark-veil | registry:component | Dark veil WebGL background with hue shift, scanlines, noise and warp controls. | `npx shadcn@latest add https://sveltebits.xyz/r/dark-veil.json` |
| dither | registry:component | Bayer-dithered animated wave field. | `npx shadcn@latest add https://sveltebits.xyz/r/dither.json` |
| dot-field | registry:component | Interactive dotted canvas background with cursor bulge, glow, sparkle, and wave controls. | `npx shadcn@latest add https://sveltebits.xyz/r/dot-field.json` |
| dot-grid | registry:component | Interactive grid of dots with cursor proximity highlighting and shockwave click physics. | `npx shadcn@latest add https://sveltebits.xyz/r/dot-grid.json` |
| evil-eye | registry:component | Reactive evil eye background with cursor-tracked pupil. | `npx shadcn@latest add https://sveltebits.xyz/r/evil-eye.json` |
| faulty-terminal | registry:component | OGL terminal-style shader background with scanlines, glitches, curvature, mouse reaction, and load animation. | `npx shadcn@latest add https://sveltebits.xyz/r/faulty-terminal.json` |
| floating-lines | registry:component | Layered animated wave lines with parallax & bend. | `npx shadcn@latest add https://sveltebits.xyz/r/floating-lines.json` |
| galaxy | registry:component | Animated galaxy of twinkling stars. | `npx shadcn@latest add https://sveltebits.xyz/r/galaxy.json` |
| gradient-blinds | registry:component | Animated gradient blinds with spotlight tracking. | `npx shadcn@latest add https://sveltebits.xyz/r/gradient-blinds.json` |
| grainient | registry:component | Animated WebGL2 grainy gradient. | `npx shadcn@latest add https://sveltebits.xyz/r/grainient.json` |
| grid-distortion | registry:component | Image grid distortion driven by mouse movement. | `npx shadcn@latest add https://sveltebits.xyz/r/grid-distortion.json` |
| grid-motion | registry:component | Grid that pans with mouse position, powered by GSAP. | `npx shadcn@latest add https://sveltebits.xyz/r/grid-motion.json` |
| grid-scan | registry:component | Animated 3D grid scan with bloom and chromatic aberration. Optional face tracking via face-api.js. | `npx shadcn@latest add https://sveltebits.xyz/r/grid-scan.json` |
| hyperspeed | registry:component | Three.js hyperspeed road background with bloom, SMAA, distortion presets, animated light trails, and hold-to-accelerate interaction. | `npx shadcn@latest add https://sveltebits.xyz/r/hyperspeed.json` |
| iridescence | registry:component | Animated iridescent WebGL background with optional mouse parallax. | `npx shadcn@latest add https://sveltebits.xyz/r/iridescence.json` |
| letter-glitch | registry:component | Cascading glitchy letter grid background. | `npx shadcn@latest add https://sveltebits.xyz/r/letter-glitch.json` |
| light-pillar | registry:component | Volumetric raymarched light pillar. | `npx shadcn@latest add https://sveltebits.xyz/r/light-pillar.json` |
| light-rays | registry:component | Animated volumetric light rays rendered with OGL. | `npx shadcn@latest add https://sveltebits.xyz/r/light-rays.json` |
| lightning | registry:component | Procedural lightning bolt WebGL background. | `npx shadcn@latest add https://sveltebits.xyz/r/lightning.json` |
| line-waves | registry:component | Warped line waves background powered by OGL. | `npx shadcn@latest add https://sveltebits.xyz/r/line-waves.json` |
| liquid-chrome | registry:component | Liquid chrome animated WebGL background with mouse and touch interaction. | `npx shadcn@latest add https://sveltebits.xyz/r/liquid-chrome.json` |
| liquid-ether | registry:component | Interactive liquid shader with flowing distortion and customizable colors. | `npx shadcn@latest add https://sveltebits.xyz/r/liquid-ether.json` |
| orb | registry:component | Dreamy hue-shifting orb with hover interaction. | `npx shadcn@latest add https://sveltebits.xyz/r/orb.json` |
| particles | registry:component | OGL-based 3D point cloud particles with hover interaction. | `npx shadcn@latest add https://sveltebits.xyz/r/particles.json` |
| pixel-blast | registry:component | Pixelated dithered shape field with ripples and liquid distortion. | `npx shadcn@latest add https://sveltebits.xyz/r/pixel-blast.json` |
| pixel-snow | registry:component | Volumetric pixel snowfall background. | `npx shadcn@latest add https://sveltebits.xyz/r/pixel-snow.json` |
| plasma | registry:component | Volumetric plasma WebGL2 background with optional mouse interaction and color tinting. | `npx shadcn@latest add https://sveltebits.xyz/r/plasma.json` |
| plasma-wave | registry:component | Raymarched plasma wave background. | `npx shadcn@latest add https://sveltebits.xyz/r/plasma-wave.json` |
| prism | registry:component | Animated raymarched prism with hue and bloom. | `npx shadcn@latest add https://sveltebits.xyz/r/prism.json` |
| prismatic-burst | registry:component | Volumetric ray burst with bend and color gradient. | `npx shadcn@latest add https://sveltebits.xyz/r/prismatic-burst.json` |
| radar | registry:component | Radar sweep background rendered with OGL. | `npx shadcn@latest add https://sveltebits.xyz/r/radar.json` |
| ripple-grid | registry:component | Animated rippling grid background powered by OGL with mouse interaction. | `npx shadcn@latest add https://sveltebits.xyz/r/ripple-grid.json` |
| shape-grid | registry:component | Animated grid of squares, hexagons, circles, or triangles with hover trail and configurable scroll direction. | `npx shadcn@latest add https://sveltebits.xyz/r/shape-grid.json` |
| silk | registry:component | Silk-like animated WebGL background using a Three.js shader plane. | `npx shadcn@latest add https://sveltebits.xyz/r/silk.json` |
| soft-aurora | registry:component | Soft aurora bands rendered with OGL using Perlin noise. | `npx shadcn@latest add https://sveltebits.xyz/r/soft-aurora.json` |
| threads | registry:component | Animated WebGL line/threads background with mouse parallax. | `npx shadcn@latest add https://sveltebits.xyz/r/threads.json` |
| waves | registry:component | Perlin-noise wavy line grid that reacts to the cursor. | `npx shadcn@latest add https://sveltebits.xyz/r/waves.json` |
| animated-list | registry:component | Scroll-aware list with item-by-item scale + fade transitions and keyboard navigation. | `npx shadcn@latest add https://sveltebits.xyz/r/animated-list.json` |
| border-glow | registry:component | Card with directional, edge-sensitive mesh-gradient border glow that follows the pointer. | `npx shadcn@latest add https://sveltebits.xyz/r/border-glow.json` |
| bounce-cards | registry:component | GSAP-powered card stack with elastic intro animation and optional hover-to-spread. | `npx shadcn@latest add https://sveltebits.xyz/r/bounce-cards.json` |
| bubble-menu | registry:component | Pill-style overlay nav with staggered GSAP bubble entrance animation. | `npx shadcn@latest add https://sveltebits.xyz/r/bubble-menu.json` |
| card-nav | registry:component | Expandable navbar with three reveal cards animated by GSAP. | `npx shadcn@latest add https://sveltebits.xyz/r/card-nav.json` |
| card-swap | registry:component | Three-card stack that auto-cycles with skewed perspective transforms (GSAP). | `npx shadcn@latest add https://sveltebits.xyz/r/card-swap.json` |
| carousel | registry:component | Draggable carousel with spring snap, autoplay, optional loop, and 3D rotateY parallax. | `npx shadcn@latest add https://sveltebits.xyz/r/carousel.json` |
| chroma-grid | registry:component | Card grid with cursor-following spotlight reveal of color from a desaturated overlay (GSAP). | `npx shadcn@latest add https://sveltebits.xyz/r/chroma-grid.json` |
| circular-gallery | registry:component | WebGL bent gallery with momentum scroll, picture-frame distortion, and titles. | `npx shadcn@latest add https://sveltebits.xyz/r/circular-gallery.json` |
| counter | registry:component | Animated rolling-digit counter with spring physics (motion). | `npx shadcn@latest add https://sveltebits.xyz/r/counter.json` |
| decay-card | registry:component | Image card that warps with SVG turbulence + displacement, lerped to cursor velocity (GSAP). | `npx shadcn@latest add https://sveltebits.xyz/r/decay-card.json` |
| dock | registry:component | macOS-style magnification dock with spring physics. Each item scales smoothly based on cursor distance. | `npx shadcn@latest add https://sveltebits.xyz/r/dock.json` |
| dome-gallery | registry:component | Draggable 3D image dome with momentum, click-to-enlarge, and dome blur overlays. | `npx shadcn@latest add https://sveltebits.xyz/r/dome-gallery.json` |
| elastic-slider | registry:component | Slider that stretches with overshoot decay and bounce-back spring (motion). | `npx shadcn@latest add https://sveltebits.xyz/r/elastic-slider.json` |
| flowing-menu | registry:component | Vertical menu where rows reveal an animated marquee from the closest edge on hover (GSAP). | `npx shadcn@latest add https://sveltebits.xyz/r/flowing-menu.json` |
| flying-posters | registry:component | 3D posters rotate on scroll infinitely. | `npx shadcn@latest add https://sveltebits.xyz/r/flying-posters.json` |
| folder | registry:component | Click to open a folder, fanning out paper snippets that follow the cursor on hover. | `npx shadcn@latest add https://sveltebits.xyz/r/folder.json` |
| glass-icons | registry:component | Floating glass-effect icon buttons with skewed gradient cards behind a frosted face. | `npx shadcn@latest add https://sveltebits.xyz/r/glass-icons.json` |
| glass-surface | registry:component | Liquid-glass surface using SVG displacement filters and chromatic offset. | `npx shadcn@latest add https://sveltebits.xyz/r/glass-surface.json` |
| gooey-nav | registry:component | Pill-style nav with a gooey, particle-bursting active highlight powered by SVG-style filter blur+contrast. | `npx shadcn@latest add https://sveltebits.xyz/r/gooey-nav.json` |
| infinite-menu | registry:component | Spherical icosahedron menu rendered with WebGL2 + instanced disc atlas, dragged via arcball physics. | `npx shadcn@latest add https://sveltebits.xyz/r/infinite-menu.json` |
| magic-bento | registry:component | Bento grid with spotlight, particle stars, border glow, tilt, and magnetism. | `npx shadcn@latest add https://sveltebits.xyz/r/magic-bento.json` |
| masonry | registry:component | Animated responsive masonry grid with GSAP entrance and hover effects. | `npx shadcn@latest add https://sveltebits.xyz/r/masonry.json` |
| model-viewer | registry:component | Interactive GLTF/GLB/FBX/OBJ model viewer with orbit, parallax, and hover effects. | `npx shadcn@latest add https://sveltebits.xyz/r/model-viewer.json` |
| pill-nav | registry:component | Animated pill-shaped nav with circular GSAP hover and mobile menu. | `npx shadcn@latest add https://sveltebits.xyz/r/pill-nav.json` |
| pixel-card | registry:component | Card with shimmering pixel canvas effect on hover/focus. | `npx shadcn@latest add https://sveltebits.xyz/r/pixel-card.json` |
| profile-card | registry:component | Holographic profile card with pointer/device-orientation tilt and animated shine. | `npx shadcn@latest add https://sveltebits.xyz/r/profile-card.json` |
| reflective-card | registry:component | Webcam-fed metallic glass card using SVG turbulence and specular lighting filters. | `npx shadcn@latest add https://sveltebits.xyz/r/reflective-card.json` |
| scroll-stack | registry:component | Scroll-driven card stack with pin/scale/blur/rotation, powered by Lenis smooth-scroll. | `npx shadcn@latest add https://sveltebits.xyz/r/scroll-stack.json` |
| spotlight-card | registry:component | Card with a soft radial spotlight that follows the cursor. | `npx shadcn@latest add https://sveltebits.xyz/r/spotlight-card.json` |
| stack | registry:component | Draggable card stack with spring rotation and send-to-back interaction. | `npx shadcn@latest add https://sveltebits.xyz/r/stack.json` |
| staggered-menu | registry:component | Full-screen staggered slide-in menu with layered colors and GSAP timelines. | `npx shadcn@latest add https://sveltebits.xyz/r/staggered-menu.json` |
| stepper | registry:component | Animated multi-step form with sliding step content and round step indicators. | `npx shadcn@latest add https://sveltebits.xyz/r/stepper.json` |
| tilted-card | registry:component | 3D tilt-on-mouse card with spring physics and a cursor-following caption. | `npx shadcn@latest add https://sveltebits.xyz/r/tilted-card.json` |
| ascii-text | registry:component | Renders text with an animated ASCII background for a retro feel. | `npx shadcn@latest add https://sveltebits.xyz/r/ascii-text.json` |
| blur-text | registry:component | Per-word/letter blur-in animation triggered when scrolled into view, with configurable direction, easing and stepped keyframes. | `npx shadcn@latest add https://sveltebits.xyz/r/blur-text.json` |
| circular-text | registry:component | Layouts characters around a circle with optional rotation animation. | `npx shadcn@latest add https://sveltebits.xyz/r/circular-text.json` |
| count-up | registry:component | Spring-animated number counter that counts up (or down) when scrolled into view, with configurable spring physics, delay, and number formatting. | `npx shadcn@latest add https://sveltebits.xyz/r/count-up.json` |
| curved-loop | registry:component | Marquee text rendered along a curved SVG path that scrolls infinitely and can be dragged for interactive control. | `npx shadcn@latest add https://sveltebits.xyz/r/curved-loop.json` |
| decrypted-text | registry:component | Scrambled-character reveal effect that decrypts a string on hover, click, or scroll-into-view, with sequential or random iteration modes. | `npx shadcn@latest add https://sveltebits.xyz/r/decrypted-text.json` |
| falling-text | registry:component | Characters fall with gravity + bounce creating a playful entrance. | `npx shadcn@latest add https://sveltebits.xyz/r/falling-text.json` |
| fuzzy-text | registry:component | Canvas-rendered text that displaces pixel rows or columns on every frame to create a fuzzy/static distortion, with hover, click, and glitch modes. | `npx shadcn@latest add https://sveltebits.xyz/r/fuzzy-text.json` |
| glitch-text | registry:component | RGB-split glitch effect on text using clip-path keyframe animation, with optional hover-only mode. | `npx shadcn@latest add https://sveltebits.xyz/r/glitch-text.json` |
| gradient-text | registry:component | Animated multi-color gradient text with optional border, direction, yoyo and pause-on-hover. | `npx shadcn@latest add https://sveltebits.xyz/r/gradient-text.json` |
| rotating-text | registry:component | Cycles through an array of phrases with per-character stagger animations on entry and exit, driven by motion springs. | `npx shadcn@latest add https://sveltebits.xyz/r/rotating-text.json` |
| scrambled-text | registry:component | Detects cursor position and applies a distortion effect to text. | `npx shadcn@latest add https://sveltebits.xyz/r/scrambled-text.json` |
| scroll-float | registry:component | Scroll-triggered floating text animation with per-character stagger. | `npx shadcn@latest add https://sveltebits.xyz/r/scroll-float.json` |
| scroll-reveal | registry:component | Words reveal in sequence as the container scrolls into view, with optional rotation and blur tied to the scroll position. | `npx shadcn@latest add https://sveltebits.xyz/r/scroll-reveal.json` |
| scroll-velocity | registry:component | Multi-row marquee that scrolls horizontally at a base velocity and accelerates with spring-smoothed page-scroll movement. | `npx shadcn@latest add https://sveltebits.xyz/r/scroll-velocity.json` |
| shiny-text | registry:component | Animated shiny gradient sweep across text, with yoyo + direction controls. | `npx shadcn@latest add https://sveltebits.xyz/r/shiny-text.json` |
| shuffle | registry:component | Per-character shuffle animation: each letter slides through interim glyphs before settling on its final character, with hover replay and ScrollTrigger entrance. | `npx shadcn@latest add https://sveltebits.xyz/r/shuffle.json` |
| split-text | registry:component | Splits text into characters / words for staggered entrance animation. | `npx shadcn@latest add https://sveltebits.xyz/r/split-text.json` |
| text-cursor | registry:component | Trail of repeating text glyphs that follows the cursor, optionally rotating to match direction and floating with random keyframes. | `npx shadcn@latest add https://sveltebits.xyz/r/text-cursor.json` |
| text-pressure | registry:component | Variable-font heading where each character reacts to cursor proximity by morphing its width, weight, italic and opacity axes. | `npx shadcn@latest add https://sveltebits.xyz/r/text-pressure.json` |
| text-type | registry:component | Typewriter effect that types and deletes through one or more sentences with a configurable cursor, blink rate, variable speed, and color rotation. | `npx shadcn@latest add https://sveltebits.xyz/r/text-type.json` |
| true-focus | registry:component | Applies dynamic blur / clarity based over a series of words in order. | `npx shadcn@latest add https://sveltebits.xyz/r/true-focus.json` |
| variable-proximity | registry:component | Per-letter variable-font interpolation that responds to cursor proximity inside a container, with linear, exponential or gaussian falloff. | `npx shadcn@latest add https://sveltebits.xyz/r/variable-proximity.json` |

## For AI agents

```text
You are adding components from @svelte-bits to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/svelte-bits.md) for the component list.
2. Fetch the machine-readable index: https://sveltebits.xyz/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: svelte-bits).
```