sh4dcn
Registries
ActiveAnimated components470

@componentry

Animated components · MIT · data updated 2026-09-05

Free, open-source React component library by Harsh Jadhav featuring beautiful, animated copy-paste components built with Tailwind CSS, TypeScript, and Framer Motion. Includes cursor-driven particle typography, dither-gradient effects, image trails, WebGL liquid backgrounds, scroll choreography, split-flap displays, pixel canvas, magnet lines, magnetic dock, and 30+ interactive components. Shadcn-compatible, MIT-licensed. Use for: adding high-visual-impact interactive animations and creative cursor/scroll effects to a product landing page or portfolio.

WebsiteDocsGitHubAgent brief (.md)
@componentry preview
3daestheticanimationaudioauthbackgroundsblocksbuttonscardschartsdesign-systemformsglassmorphismiconsloadersmapsmarketingmedianavigationoverlaysretrosaas

Install

npx shadcn@latest add https://componentry.fun/r/registry.json

Health

StatusActive
Last commit4 days ago
LicenseMIT
Open issues0
ArchivedNo
Stars470

Components (67)

animated-gradientascii-effectaurora-flowauth-modalborder-beamcase-study-flip-stackcircuit-boardclosing-plasmacollection-surfercommand-menucursor-driven-particle-typographydither-gradientdither-prism-herodithered-logoeye-trackingfisheye-infinite-gridflight-status-cardflipping-word-swapgithub-calendarhero-geometrichover-transitionhyper-textimage-ripple-effectimage-trailinfinite-image-fieldinteractive-hover-buttonkinetic-text-reveallayered-stackletter-cascadeliquid-blobliquid-chromemac-keyboardmagnet-linesmagnetic-dockmatrix-rainmusic-playernewsletter-bookshelfnoise-textureorbit-card-stackparticle-galaxypixel-canvaspixel-image-trailprism-gradientpulsating-buttonripple-transitionscroll-based-velocityscroll-choreographyscroll-split-cardscroll-tilted-gridscrub-inputshimmer-buttonshowcase-cardsignaturesilk-auroraspiral-3d-slidersplit-flap-displayspotlight-cardsticky-scroll-cardstestimonial-marqueetext-animate
Components: animated-gradient, ascii-effect, aurora-flow, auth-modal, border-beam, case-study-flip-stack, circuit-board, closing-plasma, collection-surfer, command-menu, cursor-driven-particle-typography, dither-gradient, dither-prism-hero, dithered-logo, eye-tracking, fisheye-infinite-grid, flight-status-card, flipping-word-swap, github-calendar, hero-geometric, hover-transition, hyper-text, image-ripple-effect, image-trail, infinite-image-field, interactive-hover-button, kinetic-text-reveal, layered-stack, letter-cascade, liquid-blob, liquid-chrome, mac-keyboard, magnet-lines, magnetic-dock, matrix-rain, music-player, newsletter-bookshelf, noise-texture, orbit-card-stack, particle-galaxy, pixel-canvas, pixel-image-trail, prism-gradient, pulsating-button, ripple-transition, scroll-based-velocity, scroll-choreography, scroll-split-card, scroll-tilted-grid, scrub-input, shimmer-button, showcase-card, signature, silk-aurora, spiral-3d-slider, split-flap-display, spotlight-card, sticky-scroll-cards, testimonial-marquee, text-animate, text-morph, text-repel, webgl-liquid, wheel-carousel, gradient-hero-01, pricing-01, pricing-02

Preview

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.

@componentry · animated-gradient

npx shadcn@latest add https://componentry.fun/r/animated-gradient.json
View source