ActiveAnimated components3
@tweenly
Animated components · MIT · data updated 2026-10-10
Animated React components built on Motion and GSAP. Tweak every prop live, copy the code, and own it.
aianimationaudioauthbackgroundsblocksbuttonscardschartsformshooksloadersmapsmedianavigationoverlaystablestext-effectstheming
Install
npx shadcn@latest add https://trytweenly.vercel.app/r/registry.jsonHealth
StatusActive
Last commit2 days ago
LicenseMIT
Open issues0
ArchivedNo
Stars3
Components (77)
use-reduced-motionfade-intext-revealtypewriterword-rotateshimmer-textnumber-tickerfill-buttonmagnetictilt-cardspotlight-cardstaggermarqueesticky-cardsscroll-text-revealhorizontal-scrollimage-revealascii-imagehover-mediacursorloaderdownload-buttonimage-fanimage-arcexpand-galleryscroll-focusshine-buttonripple-buttonhold-buttonslide-buttonlike-buttonsegmented-controlnumber-stepperelastic-switchexpand-inputratingnavbartable-of-contentsotp-inputchart-linechart-progresschart-radialchart-dotspreloaderchart-kitchart-barchart-ringschart-radarchart-kpichart-heatmapconfettifaqfooternotification-feedpage-loaderpage-transitionswipe-rowenvelopenot-foundproduct-card
Components: use-reduced-motion, fade-in, text-reveal, typewriter, word-rotate, shimmer-text, number-ticker, fill-button, magnetic, tilt-card, spotlight-card, stagger, marquee, sticky-cards, scroll-text-reveal, horizontal-scroll, image-reveal, ascii-image, hover-media, cursor, loader, download-button, image-fan, image-arc, expand-gallery, scroll-focus, shine-button, ripple-button, hold-button, slide-button, like-button, segmented-control, number-stepper, elastic-switch, expand-input, rating, navbar, table-of-contents, otp-input, chart-line, chart-progress, chart-radial, chart-dots, preloader, chart-kit, chart-bar, chart-rings, chart-radar, chart-kpi, chart-heatmap, confetti, faq, footer, notification-feed, page-loader, page-transition, swipe-row, envelope, not-found, product-card, stamp-card, arc-steps, auth, curved-carousel, hero-background, smooth-scroll, timeline-scroll, ai-input, ai-recorder, ai-thinking, ai-voice, banner, dock, orbiting-circles, tweet-card, tweenly-font, tweenly-themePreview
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.
@tweenly · use-reduced-motion
npx shadcn@latest add https://trytweenly.vercel.app/r/use-reduced-motion.jsonView source