ActiveAnimated componentspro available10
@tween-ui
Animated components · MIT · data updated 2026-10-10
GSAP & CSS animated React components and blocks. One file each, no shared runtime, reduced-motion handled.
animationaudioauthblocksbuttonscardscmsiconsloadersmarketingmedianavigationoverlayspro-available
Install
npx shadcn@latest add https://tween-ui.vercel.app/r/registry.jsonHealth
StatusActive
Last commit1 day ago
LicenseMIT
Open issues0
ArchivedNo
Stars10
Components (104)
icon-trail-buttonicon-trail-button-demosliding-tabssliding-tabs-demoavatar-revealavatar-reveal-demoauth-modalauth-modal-demonumber-counternumber-counter-demovoice-sample-playervoice-sample-player-demoflip-cardflip-card-demofaq-accordionfaq-accordion-demoshiny-buttonshiny-button-demotext-roll-buttontext-roll-button-demoslide-arrow-buttonslide-arrow-button-demoglow-buttonglow-button-demomagnetic-buttonmagnetic-button-demodot-bloom-buttondot-bloom-button-demoarrow-tile-buttonarrow-tile-button-demofocus-frame-buttonfocus-frame-button-demoslant-morph-buttonslant-morph-button-demologo-orbitlogo-orbit-demologo-cyclelogo-cycle-demologo-wavelogo-wave-demoimage-fan-sliderimage-fan-slider-demomorphing-textmorphing-text-demowordmark-revealwordmark-reveal-demopricing-plan-switchpricing-plan-switch-demoprocess-card-revealprocess-card-reveal-demoprocess-sticky-stepsprocess-sticky-steps-demostrip-wipestrip-wipe-demorating-carouselrating-carousel-democta-image-fancta-image-fan-democta-photo-headlinecta-photo-headline-demo
Components: icon-trail-button, icon-trail-button-demo, sliding-tabs, sliding-tabs-demo, avatar-reveal, avatar-reveal-demo, auth-modal, auth-modal-demo, number-counter, number-counter-demo, voice-sample-player, voice-sample-player-demo, flip-card, flip-card-demo, faq-accordion, faq-accordion-demo, shiny-button, shiny-button-demo, text-roll-button, text-roll-button-demo, slide-arrow-button, slide-arrow-button-demo, glow-button, glow-button-demo, magnetic-button, magnetic-button-demo, dot-bloom-button, dot-bloom-button-demo, arrow-tile-button, arrow-tile-button-demo, focus-frame-button, focus-frame-button-demo, slant-morph-button, slant-morph-button-demo, logo-orbit, logo-orbit-demo, logo-cycle, logo-cycle-demo, logo-wave, logo-wave-demo, image-fan-slider, image-fan-slider-demo, morphing-text, morphing-text-demo, wordmark-reveal, wordmark-reveal-demo, pricing-plan-switch, pricing-plan-switch-demo, process-card-reveal, process-card-reveal-demo, process-sticky-steps, process-sticky-steps-demo, strip-wipe, strip-wipe-demo, rating-carousel, rating-carousel-demo, cta-image-fan, cta-image-fan-demo, cta-photo-headline, cta-photo-headline-demo, blog-hover-expand, blog-hover-expand-demo, integration-hub, integration-hub-demo, infinite-rotating-cards, infinite-rotating-cards-demo, card-hover-expand, card-hover-expand-demo, card-spotlight-grid, card-spotlight-grid-demo, column-drift, column-drift-demo, team-scatter-focus, team-scatter-focus-demo, tab-wipe, tab-wipe-demo, logo-wall-shuffle, logo-wall-shuffle-demo, testimonial-line-sweep, testimonial-line-sweep-demo, cta-starfall, cta-starfall-demo, pricing-usage-slider, pricing-usage-slider-demo, grid-cascade, grid-cascade-demo, cube-roll-item, cube-roll-item-demo, shutter-slider, shutter-slider-demo, testimonial-reel-focus, testimonial-reel-focus-demo, kinetic-type-ring, kinetic-type-ring-demo, footer-wordmark-rise, footer-wordmark-rise-demo, loader-line-fold, loader-line-fold-demo, loader-iris-ring, loader-iris-ring-demo, testimonial-ring, testimonial-ring-demo, gyro-gallery, gyro-gallery-demoPreview
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.
@tween-ui · icon-trail-button
npx shadcn@latest add https://tween-ui.vercel.app/r/icon-trail-button.jsonView source