ActiveAnimated componentspro available0
@viberdy
Animated components · data updated 2026-10-10
Animated React and Tailwind components in 14 design styles, from glassmorphism and aurora to kinetic type and dither, each with an AI prompt. 161 are free with source at github.com/viberdy-dev/ui; Pro items need an API key.
3daianimationaudioauthbackgroundsblocksbuttonscardscmsdashboarddeveloper-toolsformsglassmorphismiconsloadersmarketingmedianavigationonboardingoverlayspro-availableretrotablestext-effectstheming
Install
npx shadcn@latest add https://viberdy.dev/r/registry.jsonHealth
StatusActive
Last commit4 days ago
License—
Open issues0
ArchivedNo
Stars0
Components (386)
magnetic-buttonstacked-type-herotilt-cardmarquee-tickerspotlight-gridgrain-overlayscramble-textswipe-card-stackodometer-counterconfetti-buttontoast-stackskeleton-shimmerprogress-ringrange-sliderflip-cardtypewriter-textsticky-scroll-stackmagnetic-nav-dockanimated-checkboximage-comparison-sliderripple-click-effectfloating-label-inputanimated-tabs-indicatorgradient-border-beammorphing-hamburger-iconglitch-text-hoverliquid-blob-cursorexpandable-search-barcard-carousel-3ddraggable-sortable-liststar-rating-interactiverotating-word-swapdraggable-bottom-sheetpricing-toggle-switchcommand-palettefile-upload-dropzonesegmented-controlvertical-timeline-revealcopy-code-snippetanimated-stat-gridaudio-wave-visualizerkanban-drag-columnstestimonial-carouselhide-on-scroll-navbartheme-toggle-sun-moon-morphscroll-linked-image-mask-revealsearchable-faq-accordionmasonry-image-hover-gridshare-button-expandpage-loading-barbadge-ping-counterdata-table-sortabledate-range-pickerfile-tree-explorerinline-editable-gridmulti-select-comboboxmulti-step-form-flownested-command-menunotification-center-panelonboarding-checklist
Components: magnetic-button, stacked-type-hero, tilt-card, marquee-ticker, spotlight-grid, grain-overlay, scramble-text, swipe-card-stack, odometer-counter, confetti-button, toast-stack, skeleton-shimmer, progress-ring, range-slider, flip-card, typewriter-text, sticky-scroll-stack, magnetic-nav-dock, animated-checkbox, image-comparison-slider, ripple-click-effect, floating-label-input, animated-tabs-indicator, gradient-border-beam, morphing-hamburger-icon, glitch-text-hover, liquid-blob-cursor, expandable-search-bar, card-carousel-3d, draggable-sortable-list, star-rating-interactive, rotating-word-swap, draggable-bottom-sheet, pricing-toggle-switch, command-palette, file-upload-dropzone, segmented-control, vertical-timeline-reveal, copy-code-snippet, animated-stat-grid, audio-wave-visualizer, kanban-drag-columns, testimonial-carousel, hide-on-scroll-navbar, theme-toggle-sun-moon-morph, scroll-linked-image-mask-reveal, searchable-faq-accordion, masonry-image-hover-grid, share-button-expand, page-loading-bar, badge-ping-counter, data-table-sortable, date-range-picker, file-tree-explorer, inline-editable-grid, multi-select-combobox, multi-step-form-flow, nested-command-menu, notification-center-panel, onboarding-checklist, usage-pricing-calculator, auth-screens-template, blog-post-template, changelog-page-template, dashboard-shell-template, docs-page-template, not-found-template, portfolio-page-template, pricing-page-template, saas-landing-template, waitlist-page-template, line-mask-reveal, morphing-shape-loop, page-transition-wrapper, scroll-velocity-skew, stagger-reveal-group, animated-dot-matrix, animated-mesh-waves, aurora-gradient-field, noise-gradient-canvas, perspective-grid-floor, spotlight-follow-background, starfield-parallax, ticker-tape-background, announcement-badge-hero, bento-preview-hero, logo-proof-hero, product-shot-hero, split-screen-hero, terminal-demo-hero, video-backdrop-hero, waitlist-capture-hero, cursor-crosshair-readout, cursor-label-follower, cursor-lens-magnifier, cursor-snap-target, hover-slice-shear, hover-link-peek, hover-stroke-draw-button, hover-expand-panels, beam-sweep-backdrop, pointer-warp-dot-field, crt-scanline-overlay, split-flap-board, weight-wave-text, extruded-type-tilt, morphing-island-notch, pointer-parallax-scene, flip-grid-reorder, scroll-card-deal, velocity-marquee-rail, path-follow-scroll, drag-inertia-carousel, fuzzy-match-input, cursor-mask-reveal, ascii-halftone-canvas, scrub-timeline-player, liquid-metal-field, glare-tilt-card, chromatic-split-hover, magnetic-tile-grid, particle-assemble-text, specular-text-sweep, orb-depth-field, orbital-action-menu, glass-refraction-panel, elastic-underline-nav, progress-arc-gauge, notification-stack-peek, wave-ribbon-band, flip-reveal-tiles, segmented-morph-toggle, spotlight-list-focus, fractal-noise-drift, depth-card-carousel, text-mask-media-reveal, kinetic-stat-board, pixel-dissolve-reveal, marquee-cylinder-3d, avatar-orbit-cluster, scroll-depth-layers, infinite-drag-canvas, hover-reveal-text-gallery, axis-supply-store-site, seventeen-studio-site, edge-sliver-poster-hero, filmstrip-silhouette-hero, moire-interference-field, whiplash-letters, hold-to-commit-button, scrub-number-field, sparkline-scrub-cell, pendulum-menu, seeded-identity-mark, intent-safe-menu, topographic-contour-drift, displacement-smear-type, optimistic-inline-commit, caustic-light-pool, native-sheet-dialog, halftone-depth-field, flow-field-drift, masked-scroll-highlight, resizable-split-pane, form-error-summary, undo-commit-toast, infinite-list-sentinel, type-specimen-hero, duotone-plate-hero, word-wheel-cylinder, view-timeline-reveal, contrast-safe-swatch, spec-ledger-section, sticky-index-section, hanging-quote-section, elastic-overscroll-list, lenticular-print-shift, reaction-diffusion-plate, ordered-dither-plate, pressure-signature-pad, median-cut-palette-plate, verlet-cloth-banner, variable-blur-scrim, priority-plus-nav, async-action-button, iridescent-foil-sweep, otp-code-input, shortcut-recorder-field, selection-annotate-toolbar, concrete-wall-texture, knockout-type-plate, live-hours-nav, entry-edge-fill-button, index-overlay-menu, ripple-roll-button, chapter-progress-nav, letterpress-light-type, venetian-blind-slideshow, ink-bleed-reveal, thumb-action-dock, neon-tube-sign, booking-slot-picker, service-price-ledger, find-us-map-section, aperture-iris-reveal, rotating-seal-badge, signal-field, marker-highlight-text, window-light-drift, swatch-fan-deck, hours-poster-section, headline-switch-hero, seam-reveal-hero, class-timetable-section, gift-voucher-composer, colourway-product-card, curtain-footer-section, ink-fluid-field, prism-beam-hero, lathe-story-scroll, marbled-endpaper, final-call-section, liquid-glass-button, liquid-glass-switch, liquid-glass-tab-bar, liquid-lens-hero, glass-bento-wall, liquid-wallpaper-field, glass-etch-text, glass-focus-field, glass-pricing-tiers, glass-app-template, glass-morph-popover, glass-tint-footer, hairline-tile-button, spec-numeral-tile, living-bento-grid, keynote-bento-hero, tile-expand-panel, bento-pricing-tiles, bento-command-nav, capture-loop-card, metric-proof-tiles, bento-footer-grid, widget-reorder-input, bento-launch-template, slab-stack-hero, card-shuffle-deck, pushed-shadow-button, offset-shadow-card, stamped-feature-grid, brutal-mega-menu, weight-slam-text, black-border-form, neo-brutal-saas-template, sticker-pricing-section, punch-card-field, warning-tape-footer, beam-lattice-hero, lit-dot-matrix-field, orbit-light-button, pointer-lit-card, morphing-command-nav, slit-light-heading, circuit-feature-map, deploy-log-input, fit-light-pricing, horizon-light-footer, beam-connector, dark-precision-site, molten-chrome-hero, holo-foil-field, chrome-pill-button, holo-ticket-card, pour-tracklist-section, mirror-pool-footer, pour-fill-heading, chrome-rim-input, chrome-vinyl-preorder, mercury-pour-nav, chrome-pour-reveal, liquid-chrome-site, breathing-halo-hero, halo-mesh-field, soft-glow-button, halo-treatment-card, concern-finder-section, halo-concern-nav, veil-resolve-heading, aura-booking-picker, lit-rooms-membership, dusk-set-footer, breath-pacer-ring, diffused-glow-site, aurora-horizon-hero, aurora-curtain-field, aurora-glow-button, aurora-rim-card, aurora-window-features, aurora-rise-footer, aurora-drift-text, aurora-flow-nav, aurora-volume-pricing, aurora-ribbon-cursor, aurora-glow-input, aurora-site, flush-pressure-hero, glyph-wave-field, axis-press-button, axis-session-card, flush-lineup-poster, flush-wordmark-footer, axis-scrub-heading, axis-flow-nav, axis-pass-pricing, glyph-axis-stagger, name-badge-input, kinetic-type-site, orbit-product-hero, soft-form-field, keycap-button, extruded-spec-card, exploded-view-section, pedestal-footer, anamorphic-heading, curved-rail-nav, finish-tier-pricing, assemble-reveal, detent-dial-input, spatial-3d-site, transform-loupe-hero, ascii-flow-field, bayer-fill-button, dither-develop-card, transform-compare-section, ascii-wordmark-footer, ascii-resolve-heading, ascii-density-nav, noise-fill-pricing, dither-ascii-site, bayer-dissolve, dither-drop-input, dawn-scrub-hero, morning-light-field, weight-press-button, light-lift-card, dawn-timeline-section, ember-rest-footer, sundial-shadow-heading, hairline-morph-nav, program-curve-pricing, modern-minimal-site, scrub-mask-reveal, wake-time-wheel, jelly-letter-hero, puffer-quilt-field, squash-press-button, wobble-drop-card, sticker-peel-steps, gummy-pile-footer, squish-letter-heading, taffy-pill-nav, fee-squeeze-pricing, tactile-maximalism-site, squish-flip, gummy-type-input, overshoot-lattice-hero, yielding-hairline-field, offset-target-button, z-swap-plate-card, reflow-states-section, run-off-wordmark-footer, edge-invert-headline, index-step-nav, third-plate-pricing, broken-grid-site, rule-handoff-flip, hanging-label-input, particle-galaxy-field, ringed-planet-field, star-system-section, keylight-field, aura-dial, density-ledger, patina-dock, quiet-zone-heroPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@viberdy · magnetic-button
npx shadcn@latest add https://viberdy.dev/r/magnetic-button.jsonView source