# viberdy.dev

> the curated library for vibecoders — Ready-to-use React + Tailwind UI components, sections, patterns and animations. Copy the code, grab the AI prompt, or install straight from the CLI.

viberdy.dev is a hand-curated library of 207 React + Tailwind UI components, sections, patterns and animations. Every entry ships clean TSX source, an AI-ready prompt, and a shadcn-compatible registry item, so a coding agent can install a component directly — no browser required. Fetch https://viberdy.dev/r/registry.json for the machine-readable index, or https://viberdy.dev/r/<name>.json for a single component's full source.

## Install

Install any single component with the shadcn CLI:

```
npx shadcn@latest add https://viberdy.dev/r/<name>.json
```

Or register viberdy as a permanent namespace in your project's `components.json`:

```json
{
  "registries": {
    "@viberdy": "https://viberdy.dev/r/{name}.json"
  }
}
```

Then install any entry by name:

```
npx shadcn@latest add @viberdy/<name>
```

Pro entries need an API key (create one at https://viberdy.dev/account). Give the namespace a header and keep the key in `.env.local`:

```json
{
  "registries": {
    "@viberdy": {
      "url": "https://viberdy.dev/r/{name}.json",
      "headers": { "Authorization": "Bearer ${VIBERDY_API_KEY}" }
    }
  }
}
```

## Components

### Components

- [Magnetic Button](https://viberdy.dev/library/magnetic-button): A button whose label leans toward the cursor with a springy pull.
- [Tilt Card](https://viberdy.dev/library/tilt-card): A 3D card that tilts toward the cursor with spring physics.
- [Marquee Ticker](https://viberdy.dev/library/marquee-ticker): An infinite scrolling strip of words or logos that pauses when you hover it.
- [Confetti Burst Button](https://viberdy.dev/library/confetti-button): A button that scatters a quick burst of confetti particles on click.
- [Circular Progress Ring](https://viberdy.dev/library/progress-ring): An SVG progress ring whose fill and centered percentage count up together on scroll into view.
- [Draggable Range Slider](https://viberdy.dev/library/range-slider): A custom-styled slider with a drag handle and a value tooltip while dragging.
- [3D Flip Card](https://viberdy.dev/library/flip-card): A card that flips on a real Y-axis rotation to reveal a back face.
- [Magnetic Nav Dock](https://viberdy.dev/library/magnetic-nav-dock): A macOS-style dock where icons magnify based on real distance from the cursor.
- [Animated Checkbox](https://viberdy.dev/library/animated-checkbox): A checkbox whose checkmark draws itself in as a real SVG path animation.
- [Image Comparison Slider](https://viberdy.dev/library/image-comparison-slider): A draggable before/after divider that reveals one image over another.
- [Ripple Click Effect](https://viberdy.dev/library/ripple-click-effect): A Material-style ripple that expands from the exact click point.
- [Floating Label Input](https://viberdy.dev/library/floating-label-input): A text input whose label floats from placeholder position into a caption on focus.
- [Animated Tabs Indicator](https://viberdy.dev/library/animated-tabs-indicator): A tab row where the active-state highlight slides between tabs instead of popping.
- [Morphing Hamburger Icon](https://viberdy.dev/library/morphing-hamburger-icon): A three-line menu icon that morphs smoothly into an X.
- [Expandable Search Bar](https://viberdy.dev/library/expandable-search-bar): A search icon that smoothly expands into a full text input on click.
- [Interactive Star Rating](https://viberdy.dev/library/star-rating-interactive): A 5-star rating control with hover preview and a springy fill pop.
- [Pricing Toggle Switch](https://viberdy.dev/library/pricing-toggle-switch): A monthly/yearly billing switch with the price sliding to its new value.
- [File Upload Dropzone](https://viberdy.dev/library/file-upload-dropzone): A real drag-and-drop file zone with a live dragover state and file chips.
- [Segmented Control](https://viberdy.dev/library/segmented-control): An iOS-style pill switch whose highlight slides between options.
- [Theme Toggle Sun Moon Morph](https://viberdy.dev/library/theme-toggle-sun-moon-morph): A track+thumb switch whose icon morphs between a sun and a crescent moon.
- [Share Button Expand](https://viberdy.dev/library/share-button-expand): A share icon that expands into a row of social options with a copy-link state.
- [Badge Ping Counter](https://viberdy.dev/library/badge-ping-counter): An icon badge counter that bounces and pings once on every increment.
- [Sortable Data Table](https://viberdy.dev/library/data-table-sortable): A searchable table with three-state column sorting and a real loading skeleton.
- [Date Range Picker](https://viberdy.dev/library/date-range-picker): A click-twice range calendar with a live hover preview and quick presets.
- [File Tree Explorer](https://viberdy.dev/library/file-tree-explorer): A recursive, collapsible file tree with real roving-tabindex arrow-key navigation.
- [Inline Editable Grid](https://viberdy.dev/library/inline-editable-grid): A keyboard-driven spreadsheet grid with roving-cell navigation and Excel-style Enter/Tab commits.
- [Multi-Select Combobox](https://viberdy.dev/library/multi-select-combobox): A chip-and-search combobox with full keyboard control and a selection cap.
- [Multi-Step Form Flow](https://viberdy.dev/library/multi-step-form-flow): A validated wizard with per-step gating, an editable review step, and a real success state.
- [Nested Command Menu](https://viberdy.dev/library/nested-command-menu): A Cmd+K menu with real submenu drilling, a breadcrumb trail, and scoped per-level search.
- [Notification Center](https://viberdy.dev/library/notification-center-panel): A read/unread notification list with filtering, bulk actions, and a real empty state.
- [Onboarding Checklist](https://viberdy.dev/library/onboarding-checklist): An expandable setup checklist with a real derived progress bar and a completion state.
- [Usage Pricing Calculator](https://viberdy.dev/library/usage-pricing-calculator): A live estimator with real marginal-tier overage pricing and an annual discount toggle.
- [Crosshair Cursor Readout](https://viberdy.dev/library/cursor-crosshair-readout): A drafting-tool crosshair with live X/Y coordinates that trails the pointer.
- [Cursor Label Follower](https://viberdy.dev/library/cursor-label-follower): A contextual chip that trails the pointer and names whatever it is over.
- [Cursor Lens Magnifier](https://viberdy.dev/library/cursor-lens-magnifier): A glass lens that follows the pointer and magnifies the live DOM beneath it.
- [Snapping Cursor](https://viberdy.dev/library/cursor-snap-target): A cursor dot that latches onto interactive elements and takes their exact shape.
- [Stroke Draw Button](https://viberdy.dev/library/hover-stroke-draw-button): A button whose outline draws itself around the shape on hover, at any size.
- [Morphing Island Notch](https://viberdy.dev/library/morphing-island-notch): A status pill that resizes itself fluidly around whatever content it holds.
- [Fuzzy Match Input](https://viberdy.dev/library/fuzzy-match-input): Subsequence search that scores by run length and word starts, and highlights the hits.
- [Scrub Timeline Player](https://viberdy.dev/library/scrub-timeline-player): A media scrubber with buffered range, hover timestamp and pointer-capture dragging.
- [Glare Tilt Card](https://viberdy.dev/library/glare-tilt-card): A card that tilts toward the pointer with a true angular specular sweep.
- [Orbital Action Menu](https://viberdy.dev/library/orbital-action-menu): A radial menu that fans actions along an arc, evenly spaced at any count.
- [Glass Refraction Panel](https://viberdy.dev/library/glass-refraction-panel): Glass rather than frost: saturated backdrop, bent edges and a tracking specular rim.
- [Elastic Underline Nav](https://viberdy.dev/library/elastic-underline-nav): A nav underline that stretches with the distance it travels and settles back to width.
- [Progress Arc Gauge](https://viberdy.dev/library/progress-arc-gauge): An SVG arc gauge with a needle and a readout that counts to its value.
- [Segmented Morph Toggle](https://viberdy.dev/library/segmented-morph-toggle): A segmented control where only the selected option expands to its label.
- [Avatar Orbit Cluster](https://viberdy.dev/library/avatar-orbit-cluster): A team ring that redistributes at any size, lifting the hovered member out.
- [Hold To Commit Button](https://viberdy.dev/library/hold-to-commit-button): A destructive action that requires sustained pressure, with a ring that fills on an ease-in curve.
- [Scrub Number Field](https://viberdy.dev/library/scrub-number-field): A numeric input whose label you drag to scrub, with pointer lock and precision modifiers.
- [Sparkline Scrub Cell](https://viberdy.dev/library/sparkline-scrub-cell): An inline micro-chart you sweep to read exact values, with monotone interpolation that never invents a peak.
- [Optimistic Inline Commit](https://viberdy.dev/library/optimistic-inline-commit): An instant-feedback control with the parts everyone skips: request sequencing and a rollback that restores the right value.
- [Resizable Split Pane](https://viberdy.dev/library/resizable-split-pane): A split view with pointer capture, pixel minimums resolved against real width, and a separator you can actually tab to.
- [Contrast Safe Swatch](https://viberdy.dev/library/contrast-safe-swatch): Picks a readable foreground from real relative luminance, and reports all three WCAG thresholds instead of one badge.
- [Pressure Signature Pad](https://viberdy.dev/library/pressure-signature-pad): A signature pad with real variable-width ink — pen pressure where it exists, velocity everywhere else, coalesced samples and midpoint quadratics.
- [Median Cut Palette Plate](https://viberdy.dev/library/median-cut-palette-plate): Pulls a genuinely distinct palette out of a photograph by median cut — splitting on channel spread, not on population, sorted by relative luminance.
- [Priority Plus Nav](https://viberdy.dev/library/priority-plus-nav): A nav that measures itself and collapses what does not fit into a More menu — ghost-row measurement, no breakpoints, no flicker loop.
- [Async Action Button](https://viberdy.dev/library/async-action-button): A button that survives a real round trip — a minimum pending duration, a width that never twitches, aria-disabled instead of disabled.
- [OTP Code Input](https://viberdy.dev/library/otp-code-input): A one-time-code field whose cells survive SMS autofill, paste and Android backspace.
- [Shortcut Recorder Field](https://viberdy.dev/library/shortcut-recorder-field): Records a keyboard chord by physical key position, and refuses the ones the browser owns.
- [Live Hours Nav](https://viberdy.dev/library/live-hours-nav): A small-business header that says whether the shop is open right now — computed in the shop's timezone, with overnight hours and split shifts handled.
- [Entry Edge Fill Button](https://viberdy.dev/library/entry-edge-fill-button): A fill that wipes in from the edge your pointer crossed and leaves by the one you exit — the label inverts letter by letter as the edge passes through it.
- [Index Overlay Menu](https://viberdy.dev/library/index-overlay-menu): A full-screen menu set like a printed index — numbered entries in heavy type, and a treated photo plate that wipes in the direction you travel.
- [Ripple Roll Button](https://viberdy.dev/library/ripple-roll-button): A label that rolls letter by letter to a second copy, rippling outward from wherever your pointer came in — and settling back toward where it left.
- [Chapter Progress Nav](https://viberdy.dev/library/chapter-progress-nav): A sticky section nav whose items fill like progress bars as you read — and still reaches the short last section that fixed-line navs never activate.
- [Thumb Action Dock](https://viberdy.dev/library/thumb-action-dock): A phone bottom bar with Call, Directions and Book — that appears once the hero's CTA has gone, and steps aside for the footer, a focused field and the keyboard.
- [Booking Slot Picker](https://viberdy.dev/library/booking-slot-picker): Pick a day, pick a time, confirm — with honest availability, a real keyboard grid, and a WhatsApp or email request mode for shops with no booking system.
- [Rotating Seal Badge](https://viberdy.dev/library/rotating-seal-badge): A round seal — the phrase fitted exactly around the circle with drawn dot separators — that turns once every 24 seconds, eases to a stop on hover, and is the link.

### Sections

- [Stacked Type Hero](https://viberdy.dev/library/stacked-type-hero): Oversized, tightly-stacked headline words that reveal in on mount — big type as sculpture.
- [Vertical Timeline Reveal](https://viberdy.dev/library/vertical-timeline-reveal): A scroll-triggered vertical timeline whose dots and cards reveal in sequence.
- [Animated Stat Grid](https://viberdy.dev/library/animated-stat-grid): A row of stat counters that count up together the moment they scroll into view.
- [Scroll-Linked Image Mask Reveal](https://viberdy.dev/library/scroll-linked-image-mask-reveal): An image whose circular clip-path mask grows and shrinks in lockstep with scroll.
- [Kinetic Stat Board](https://viberdy.dev/library/kinetic-stat-board): Metrics, deltas and sparklines that all count in together from one shared loop.
- [Spec Ledger Section](https://viberdy.dev/library/spec-ledger-section): A dense spec table with real header association, a focusable scroll region, and a sticky head that keeps its rule.
- [Sticky Index Section](https://viberdy.dev/library/sticky-index-section): An editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.
- [Hanging Quote Section](https://viberdy.dev/library/hanging-quote-section): A pull quote with the opening mark optically aligned — measured from the real glyph, not a guessed em value.
- [Service Price Ledger](https://viberdy.dev/library/service-price-ledger): A price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
- [Find Us Map Section](https://viberdy.dev/library/find-us-map-section): A street map printed in the shop's colour, the address set large, a live "Open until 18:00" readout in the shop's own time, the week's hours, nearby stations and one-tap directions — no API key.

### Patterns

- [Spotlight Card Grid](https://viberdy.dev/library/spotlight-grid): A card grid with a soft red spotlight that follows the cursor across it.
- [Swipe Card Stack](https://viberdy.dev/library/swipe-card-stack): A draggable deck of cards you flick away to cycle through, Tinder-style.
- [Toast Notification Stack](https://viberdy.dev/library/toast-stack): A queue of toast notifications that stack, reflow, and auto-dismiss independently.
- [Sticky Scroll Stack](https://viberdy.dev/library/sticky-scroll-stack): Cards that pin and stack on top of each other as you scroll past.
- [3D Card Carousel](https://viberdy.dev/library/card-carousel-3d): Cards mounted on a rotating 3D ring — the active one faces forward, others recede.
- [Draggable Sortable List](https://viberdy.dev/library/draggable-sortable-list): A drag-handle-driven list that reorders with a smooth layout swap.
- [Draggable Bottom Sheet Modal](https://viberdy.dev/library/draggable-bottom-sheet): A modal sheet you can drag down to dismiss, with a distance + velocity threshold.
- [Command Palette](https://viberdy.dev/library/command-palette): A Cmd+K style searchable command menu with a filtered live list.
- [Copy Code Snippet](https://viberdy.dev/library/copy-code-snippet): A dark code block with a one-click copy button that confirms itself.
- [Kanban Drag Columns](https://viberdy.dev/library/kanban-drag-columns): A mini kanban board where cards drag both within and across columns.
- [Testimonial Carousel](https://viberdy.dev/library/testimonial-carousel): An auto-advancing quote carousel with directional slide transitions.
- [Hide On Scroll Navbar](https://viberdy.dev/library/hide-on-scroll-navbar): A navbar that slides away on scroll-down and reappears on scroll-up.
- [Searchable FAQ Accordion](https://viberdy.dev/library/searchable-faq-accordion): A filterable FAQ list where each answer expands independently.
- [Link Peek Preview](https://viberdy.dev/library/hover-link-peek): An index list that floats a velocity-tilted preview card beside the pointer.
- [Expanding Panel Row](https://viberdy.dev/library/hover-expand-panels): A row of panels where the hovered one grows and its neighbours compress.
- [Drag Inertia Carousel](https://viberdy.dev/library/drag-inertia-carousel): A rail you can throw — it projects the momentum and settles on the nearest slide.
- [Cursor Mask Reveal](https://viberdy.dev/library/cursor-mask-reveal): The pointer cuts a soft hole through one layer to expose a different one beneath.
- [Peeking Toast Stack](https://viberdy.dev/library/notification-stack-peek): Toasts collapsed into a depth-scaled deck that fans out on hover.
- [Spotlight List Focus](https://viberdy.dev/library/spotlight-list-focus): A list that dims and blurs every row except the one under the pointer.
- [Depth Card Carousel](https://viberdy.dev/library/depth-card-carousel): A carousel whose side cards recede in scale, blur and rotation from one offset value.
- [Infinite Drag Canvas](https://viberdy.dev/library/infinite-drag-canvas): An endlessly pannable board that recycles a fixed set of tiles via modulo wrapping.
- [Hover Reveal Text Gallery](https://viberdy.dev/library/hover-reveal-text-gallery): A list of text rows, each hiding a photograph that wipes open under the cursor and follows it.
- [Native Sheet Dialog](https://viberdy.dev/library/native-sheet-dialog): A sheet on the native dialog element — no hand-rolled focus trap, and the three things the platform leaves you fixed.
- [Form Error Summary](https://viberdy.dev/library/form-error-summary): The error pattern that actually works with a screen reader: focus the summary, link to the fields, punish late.
- [Undo Commit Toast](https://viberdy.dev/library/undo-commit-toast): An undo window that defers the action instead of reversing it, and pauses when you tab toward the button.
- [Infinite List Sentinel](https://viberdy.dev/library/infinite-list-sentinel): Sentinel-based pagination with the stall fixed — the bug where a short page leaves the sentinel on screen and loading stops.
- [Variable Blur Scrim](https://viberdy.dev/library/variable-blur-scrim): A scrim whose blur ramps instead of switching on — stacked backdrop-filter layers at doubling radii with overlapping masks.
- [Selection Annotate Toolbar](https://viberdy.dev/library/selection-annotate-toolbar): A toolbar that follows a text selection and highlights ranges without touching the DOM.

### Assets

- [Skeleton Shimmer Loader](https://viberdy.dev/library/skeleton-shimmer): Loading-state placeholder blocks with a light sweep animating across them.
- [Audio Wave Visualizer](https://viberdy.dev/library/audio-wave-visualizer): A bouncing equalizer bar animation for audio/podcast/music UI.
- [Masonry Image Hover Grid](https://viberdy.dev/library/masonry-image-hover-grid): A CSS-columns masonry gallery with a scale + caption reveal on hover.
- [Page Loading Bar](https://viberdy.dev/library/page-loading-bar): An nprogress-style top-of-page bar that eases toward completion, never stalling.
- [ASCII Halftone Canvas](https://viberdy.dev/library/ascii-halftone-canvas): Turns any canvas drawing into live ASCII art, sampled one pixel per glyph.
- [Seeded Identity Mark](https://viberdy.dev/library/seeded-identity-mark): Turns any string into a symmetric geometric logo that is byte-identical on every render, forever.

### Backgrounds

- [Grain Overlay](https://viberdy.dev/library/grain-overlay): A subtle animated film-grain texture layered over any section via canvas.
- [Animated Gradient Border Beam](https://viberdy.dev/library/gradient-border-beam): A light beam that continuously travels around a card's border.
- [Liquid Blob Cursor Follow](https://viberdy.dev/library/liquid-blob-cursor): A soft blurred blob that trails the cursor with spring-smoothed lag.
- [Animated Dot Matrix](https://viberdy.dev/library/animated-dot-matrix): A grid of dots that pulses outward in concentric ripples, drawn on canvas.
- [Animated Mesh Waves](https://viberdy.dev/library/animated-mesh-waves): Layered translucent wave ribbons scrolling at different speeds for a fluid mesh feel.
- [Aurora Gradient Field](https://viberdy.dev/library/aurora-gradient-field): Soft, hue-shifting color fields that drift behind a hero like ambient aurora light.
- [Noise Gradient Canvas](https://viberdy.dev/library/noise-gradient-canvas): A slow-drifting colored noise wash rendered at low resolution and upscaled smooth.
- [Perspective Grid Floor](https://viberdy.dev/library/perspective-grid-floor): A tilted, endlessly scrolling grid floor that recedes toward the horizon.
- [Spotlight Follow Background](https://viberdy.dev/library/spotlight-follow-background): A full-bleed radial glow that tracks the cursor with zero re-renders.
- [Starfield Parallax](https://viberdy.dev/library/starfield-parallax): A three-depth-layer field of drifting, twinkling stars with true parallax speed.
- [Ticker Tape Background](https://viberdy.dev/library/ticker-tape-background): Oversized, near-invisible ticker rows scrolling behind the fold as ambient texture.
- [Beam Sweep Backdrop](https://viberdy.dev/library/beam-sweep-backdrop): Slow conic light beams rotating behind content, CSS-only and compositor-friendly.
- [Pointer Warp Dot Field](https://viberdy.dev/library/pointer-warp-dot-field): A canvas dot grid that bulges and brightens away from the cursor.
- [CRT Scanline Overlay](https://viberdy.dev/library/crt-scanline-overlay): Scanlines, aperture grille, rolling refresh and vignette over any content.
- [Liquid Metal Field](https://viberdy.dev/library/liquid-metal-field): Gooey metaball blobs that fuse and split as they drift, with a specular sheen.
- [Magnetic Tile Grid](https://viberdy.dev/library/magnetic-tile-grid): A tile field that leans toward the pointer and brightens with proximity.
- [Orb Depth Field](https://viberdy.dev/library/orb-depth-field): Floating orbs whose size, blur, opacity and speed all derive from one depth value.
- [Wave Ribbon Band](https://viberdy.dev/library/wave-ribbon-band): Layered SVG line-work flowing from two incommensurable sine waves.
- [Fractal Noise Drift](https://viberdy.dev/library/fractal-noise-drift): GPU fractal noise drifting through a gradient light field, with no JS loop.
- [Moiré Interference Field](https://viberdy.dev/library/moire-interference-field): Two stripe layers a fraction of a degree apart, generating a shifting fringe field under the cursor.
- [Topographic Contour Drift](https://viberdy.dev/library/topographic-contour-drift): A survey map of terrain that never existed, traced live with marching squares and drifting underfoot.
- [Caustic Light Pool](https://viberdy.dev/library/caustic-light-pool): Water caustics computed from the real focusing condition, so the bright filaments land where the physics puts them.
- [Halftone Depth Field](https://viberdy.dev/library/halftone-depth-field): A rotated print screen that swells into a pool of light under the pointer, with the gamma actually done right.
- [Flow Field Drift](https://viberdy.dev/library/flow-field-drift): Particles carried through a divergence-free curl-noise field, so the frame never drains into a few basins.
- [Lenticular Print Shift](https://viberdy.dev/library/lenticular-print-shift): Two photographs interleaved in hard-edged strips that wipe between each other as the pointer crosses the plate.
- [Reaction Diffusion Plate](https://viberdy.dev/library/reaction-diffusion-plate): A live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.
- [Ordered Dither Plate](https://viberdy.dev/library/ordered-dither-plate): A gradient quantised to a few tones by an 8x8 Bayer matrix — offset then quantised, dithered in linear light, one cell per device pixel.
- [Concrete Wall Texture](https://viberdy.dev/library/concrete-wall-texture): A seamless procedural concrete surface drawn once to canvas and blended over anything.
- [Signal Field](https://viberdy.dev/library/signal-field): A machined dot grid lit by slow waves of light, with a pointer lens and click ripples.

### Text Effects

- [Scramble Text](https://viberdy.dev/library/scramble-text): Text that decodes from random characters into its real word on hover.
- [Odometer Counter](https://viberdy.dev/library/odometer-counter): A stat number that rolls up from zero to its target the moment it's in view.
- [Typewriter Text](https://viberdy.dev/library/typewriter-text): Text that types itself out character by character, then cycles to the next phrase.
- [Glitch Text Hover](https://viberdy.dev/library/glitch-text-hover): An RGB-split, jittery glitch effect on text when you hover it.
- [Rotating Word Swap Headline](https://viberdy.dev/library/rotating-word-swap): A headline where one word auto-cycles with a vertical odometer-style swap.
- [Slice Shear Hover](https://viberdy.dev/library/hover-slice-shear): Display type cut into horizontal bands that fan apart under the pointer.
- [Split Flap Board](https://viberdy.dev/library/split-flap-board): A real Solari departure board — four layers and a hinge, with reels that land apart because they travel different distances.
- [Weight Wave Text](https://viberdy.dev/library/weight-wave-text): Per-character variable font weight that swells around the pointer and drifts when idle.
- [Extruded Type Tilt](https://viberdy.dev/library/extruded-type-tilt): Display type with a solid extrusion that swings around as the pointer moves.
- [Chromatic Split Hover](https://viberdy.dev/library/chromatic-split-hover): RGB channels of a headline separate toward the pointer and recombine to white.
- [Particle Assemble Text](https://viberdy.dev/library/particle-assemble-text): Particles sampled from the glyphs themselves, assembling into a word and scattering on hover.
- [Specular Text Sweep](https://viberdy.dev/library/specular-text-sweep): A light band travelling inside the glyphs, clipped to the text so only ink lights up.
- [Text Mask Media Reveal](https://viberdy.dev/library/text-mask-media-reveal): Type used as a mask so imagery moves inside the letterforms.
- [Whiplash Letters](https://viberdy.dev/library/whiplash-letters): A headline whose letters follow the cursor as a spring chain — crisp at the head, loose at the tail.
- [Displacement Smear Type](https://viberdy.dev/library/displacement-smear-type): A headline that smears along the pointer's direction of travel with a real accumulation blur.
- [Masked Scroll Highlight](https://viberdy.dev/library/masked-scroll-highlight): Copy that resolves word by word as you scroll, mapped by real reading position rather than word index.
- [Word Wheel Cylinder](https://viberdy.dev/library/word-wheel-cylinder): A rotating word wheel built on a real cylinder — derived radius, accumulated rotation, no backwards spin on the wrap.
- [Iridescent Foil Sweep](https://viberdy.dev/library/iridescent-foil-sweep): Hot-foil type that shifts colour under the pointer — Newton's series rather than a rainbow, translated rather than rotated.
- [Knockout Type Plate](https://viberdy.dev/library/knockout-type-plate): A headline that inverts the photograph beneath it, with a scrim that keeps it legible.
- [Letterpress Light Type](https://viberdy.dev/library/letterpress-light-type): Type debossed into paper and lit by a real lighting model — the lamp follows your pointer, so every wall of every letter catches and loses the light.
- [Neon Tube Sign](https://viberdy.dev/library/neon-tube-sign): A neon sign that lights the wall behind it — glass tubes with a hot core, one tired letter that stutters, an ignition flicker, and a real on/off switch.

### Templates

- [Auth Screens](https://viberdy.dev/library/auth-screens-template): Sign in, sign up and reset as one component — layout and mode switching only, with no submit logic.
- [Blog Post Page](https://viberdy.dev/library/blog-post-template): A long-form article page with real reading progress and a ToC that tracks scroll.
- [Changelog Page](https://viberdy.dev/library/changelog-page-template): A changelog with working tag filters and releases that expand in place.
- [Dashboard Shell](https://viberdy.dev/library/dashboard-shell-template): A dashboard shell with a collapsible rail and real routing between views.
- [Documentation Page](https://viberdy.dev/library/docs-page-template): A docs shell where the sidebar routes, search filters the tree and the ToC tracks the article.
- [404 Page](https://viberdy.dev/library/not-found-template): A centered 404 with a huge numeral, a human message, a home CTA, and a subtle grid backdrop.
- [Portfolio Page](https://viberdy.dev/library/portfolio-page-template): A personal portfolio with working discipline filters and a pointer-responsive work grid.
- [Pricing Page](https://viberdy.dev/library/pricing-page-template): A pricing page that computes: seat slider, annual toggle and an expandable comparison matrix.
- [SaaS Landing Page](https://viberdy.dev/library/saas-landing-template): A full marketing landing page: nav, hero, logo band, feature grid, and footer.
- [Waitlist Page](https://viberdy.dev/library/waitlist-page-template): A single-purpose pre-launch page: headline, email capture form, and a joined-count signal.

### Heroes

- [Announcement Badge Hero](https://viberdy.dev/library/announcement-badge-hero): A large pulsing announcement pill anchors the hero above one headline.
- [Bento Preview Hero](https://viberdy.dev/library/bento-preview-hero): Copy beside an asymmetric bento grid of small feature-glimpse tiles.
- [Logo Proof Hero](https://viberdy.dev/library/logo-proof-hero): A generous wordmark wall leads the hero, with a modest headline above it.
- [Product Shot Hero](https://viberdy.dev/library/product-shot-hero): A dominant framed app-window screenshot mock with the headline as a caption above it.
- [Split Screen Hero](https://viberdy.dev/library/split-screen-hero): A copy-left, product-right split with a floating stacked dashboard card.
- [Terminal Demo Hero](https://viberdy.dev/library/terminal-demo-hero): A staged terminal window as the hero's centerpiece, typed command and streaming output.
- [Video Backdrop Hero](https://viberdy.dev/library/video-backdrop-hero): A cinematic full-bleed motion backdrop, built entirely from CSS and Framer Motion.
- [Waitlist Capture Hero](https://viberdy.dev/library/waitlist-capture-hero): A waitlist hero that actually captures: validation, pending, success and queue position.
- [Edge Sliver Poster Hero](https://viberdy.dev/library/edge-sliver-poster-hero): A saturated poster hero whose photographic sliver opens on hover, with live ticket tiers and a countdown.
- [Filmstrip Silhouette Hero](https://viberdy.dev/library/filmstrip-silhouette-hero): A saturated field with a multiply-blended silhouette and a thumbnail strip that drives it.
- [Type Specimen Hero](https://viberdy.dev/library/type-specimen-hero): A magazine-cover hero where the photograph inverts through the letterforms, pinned to its own stacking context.
- [Duotone Plate Hero](https://viberdy.dev/library/duotone-plate-hero): A real two-colour separation via SVG filters — with the sRGB interpolation flag that everyone leaves out.

### Site Templates

- [Axis Supply — Streetwear Store](https://viberdy.dev/library/axis-supply-store-site): A storefront drawn as an engineering document, with an inverted checkerboard lookbook.
- [Seventeen — Creative Studio](https://viberdy.dev/library/seventeen-studio-site): A print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.

### Animations

- [Line Mask Reveal](https://viberdy.dev/library/line-mask-reveal): Reveals text one line at a time, each sliding up from behind its own clipping mask.
- [Morphing Shape Loop](https://viberdy.dev/library/morphing-shape-loop): A decorative blob whose SVG outline continuously morphs between shapes.
- [Page Transition Wrapper](https://viberdy.dev/library/page-transition-wrapper): Wraps route content so it animates out and the next page animates in instead of swapping instantly.
- [Scroll Velocity Skew](https://viberdy.dev/library/scroll-velocity-skew): Skews its content based on how fast the page is being scrolled, relaxing back to flat at rest.
- [Stagger Reveal Group](https://viberdy.dev/library/stagger-reveal-group): A wrapper that reveals its children one after another as the group scrolls into view.
- [Pointer Parallax Scene](https://viberdy.dev/library/pointer-parallax-scene): A depth system where layers separate under the pointer from one shared motion source.
- [FLIP Grid Reorder](https://viberdy.dev/library/flip-grid-reorder): A filterable grid whose tiles travel to their new positions instead of snapping.
- [Scroll Card Deal](https://viberdy.dev/library/scroll-card-deal): A pile of cards that fans out symmetrically as its section crosses the viewport.
- [Velocity Marquee Rail](https://viberdy.dev/library/velocity-marquee-rail): A marquee that accelerates with scroll speed and flips direction when you scroll back.
- [Path Follow Scroll](https://viberdy.dev/library/path-follow-scroll): A marker that rides an SVG curve on scroll, banking through the bends.
- [Flip Reveal Tiles](https://viberdy.dev/library/flip-reveal-tiles): A tile grid that flips on a diagonal wavefront to resolve into one image.
- [Pixel Dissolve Reveal](https://viberdy.dev/library/pixel-dissolve-reveal): A block-grid dissolve driven by a seeded shuffle, so it clears perfectly evenly.
- [3D Cylinder Marquee](https://viberdy.dev/library/marquee-cylinder-3d): Words on a rotating cylinder, with the radius derived from the face count.
- [Scroll Depth Layers](https://viberdy.dev/library/scroll-depth-layers): A parallax scene where every layer derives from one shared scroll source.
- [Pendulum Menu](https://viberdy.dev/library/pendulum-menu): Menu items that hang from a rail and swing on real pendulum physics, nudging their neighbours.
- [Intent Safe Menu](https://viberdy.dev/library/intent-safe-menu): A mega-menu that reads where the pointer is heading, so cutting the corner never steals the submenu.
- [View Timeline Reveal](https://viberdy.dev/library/view-timeline-reveal): Scroll reveals on a real CSS view timeline — off the main thread, and visible by default where it is not supported.
- [Elastic Overscroll List](https://viberdy.dev/library/elastic-overscroll-list): Rubber-band overscroll with the real asymptotic curve, engaged only at the boundary.
- [Verlet Cloth Banner](https://viberdy.dev/library/verlet-cloth-banner): A banner hanging from its fixings as real Verlet cloth — previous-position integration, relaxation passes and a fixed timestep behind an accumulator.
- [Venetian Blind Slideshow](https://viberdy.dev/library/venetian-blind-slideshow): A hero slideshow whose photographs change like venetian blinds turning — slats flip in a staggered cascade, with the dark frame showing through as they go edge-on.
- [Ink Bleed Reveal](https://viberdy.dev/library/ink-bleed-reveal): A photograph that arrives the way ink wicks into paper — an organic front spreading from a point, with a wet tide-line of ink running just ahead of it.
- [Aperture Iris Reveal](https://viberdy.dev/library/aperture-iris-reveal): A photo revealed by a real iris — straight metal blades that part and twist from the centre — while a corner readout clicks down the f-stops from ƒ/22 to ƒ/1.4.

## Optional

- [Full corpus](https://viberdy.dev/llms-full.txt): every free component's complete source, inline.
- [Registry index](https://viberdy.dev/r/registry.json): machine-readable shadcn registry.json.
- [About](https://viberdy.dev/about)
- [Pricing](https://viberdy.dev/pricing)