sh4dcn
Registries
ActiveAnimated components621

@componentry

Animated components · MIT · data updated 2026-10-27

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
3daestheticanimationaudiobackgroundsblockscardschartsdesign-systemglassmorphismiconsmapsmarketingmedianavigationretrosaas

Install

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

Health

StatusActive
Last commit2 weeks ago
LicenseMIT
Open issues1
ArchivedNo
Stars621

Components (57)

animated-gradientascii-effectaurora-flowcase-study-flip-stackcircuit-boardclosing-plasmacollection-surfercursor-driven-particle-typographydither-gradientdither-prism-herodithered-logoeye-trackingfisheye-infinite-gridflight-status-cardflipping-word-swapgithub-calendarhero-geometrichover-transitionimage-ripple-effectimage-trailinfinite-image-fieldkinetic-text-reveallayered-stackletter-cascadeliquid-chromemac-keyboardmagnet-linesmagnetic-dockmatrix-rainmusic-playernewsletter-bookshelforbit-card-stackpixel-canvaspixel-image-trailprism-gradientripple-transitionscroll-based-velocityscroll-choreographyscroll-split-cardscroll-tilted-gridsignaturesilk-auroraspiral-3d-slidersplit-flap-displaysticky-scroll-cardstext-morphtext-repelwebgl-liquidwheel-carouselannotated-textgrain-gradientspectral-ribbonliquid-glass-carousellens-clockgradient-hero-01pricing-01pricing-02
Components: animated-gradient, ascii-effect, aurora-flow, case-study-flip-stack, circuit-board, closing-plasma, collection-surfer, 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, image-ripple-effect, image-trail, infinite-image-field, kinetic-text-reveal, layered-stack, letter-cascade, liquid-chrome, mac-keyboard, magnet-lines, magnetic-dock, matrix-rain, music-player, newsletter-bookshelf, orbit-card-stack, pixel-canvas, pixel-image-trail, prism-gradient, ripple-transition, scroll-based-velocity, scroll-choreography, scroll-split-card, scroll-tilted-grid, signature, silk-aurora, spiral-3d-slider, split-flap-display, sticky-scroll-cards, text-morph, text-repel, webgl-liquid, wheel-carousel, annotated-text, grain-gradient, spectral-ribbon, liquid-glass-carousel, lens-clock, 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