sh4dcn
Registries
ActiveAnimated components230

@componentry

Animated components · MIT · data updated 2026-07-28

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 commit2 weeks ago
LicenseMIT
Open issues1
ArchivedNo
Stars230

Components (55)

animated-gradientascii-effectauth-modalborder-beamcircuit-boardclosing-plasmacollection-surfercommand-menucursor-driven-particle-typographydither-gradientdither-prism-herodithered-logoeye-trackingflight-status-cardgithub-calendarhero-geometrichyper-textimage-ripple-effectimage-trailinfinite-image-fieldinteractive-hover-buttonkinetic-text-reveallayered-stackletter-cascadeliquid-blobliquid-chromemac-keyboardmagnet-linesmagnetic-dockmatrix-rainmusic-playernoise-textureorbit-card-stackparticle-galaxypixel-canvasprism-gradientpulsating-buttonripple-transitionscroll-based-velocityscroll-choreographyscroll-split-cardscroll-tilted-gridscrub-inputshimmer-buttonshowcase-cardsignaturesilk-aurorasplit-flap-displayspotlight-cardsticky-scroll-cardstestimonial-marqueetext-animatetext-repelwebgl-liquidgradient-hero-01
Components: animated-gradient, ascii-effect, auth-modal, border-beam, circuit-board, closing-plasma, collection-surfer, command-menu, cursor-driven-particle-typography, dither-gradient, dither-prism-hero, dithered-logo, eye-tracking, flight-status-card, github-calendar, hero-geometric, 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, noise-texture, orbit-card-stack, particle-galaxy, pixel-canvas, 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, split-flap-display, spotlight-card, sticky-scroll-cards, testimonial-marquee, text-animate, text-repel, webgl-liquid, gradient-hero-01

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