Motion for the in-between.
74 animated React components for shadcn/ui. Tweak every prop live, copy the exact code, and install it with one command. You own the source.
$ npx shadcn@latest add @tweenly/text-revealFade InText RevealTypewriterWord RotateShimmer TextNumber TickerFill ButtonMagneticTilt CardSpotlight CardCursorLoaderDownload ButtonASCII ImageHover MediaImage FanImage ArcScroll Text RevealHorizontal ScrollImage RevealExpand GalleryScroll FocusStaggerMarqueeSticky CardsShine ButtonRipple ButtonHold ButtonSlide ButtonLike ButtonSegmented ControlNumber StepperElastic SwitchExpand InputRatingNavbarTable of ContentsOTP InputChart LineChart BarChart RadialChart RingsChart RadarChart KPIChart HeatmapChart ProgressChart DotsPreloaderFooterFAQConfettiPage LoaderPage TransitionSwipe RowNotification FeedProduct CardStamp Card404EnvelopeEnvelope RevealSmooth ScrollHero BackgroundCurved CarouselArc StepsTimeline ScrollSign In / Sign UpDockTweet CardOrbiting CirclesBannerAI VoiceAI RecorderAI InputAI Thinking
How it works
Three steps. No lock-in.
01
Pick
Browse by category or search with ⌘K. Every component runs live, right on its page.
02
Tweak
Change variants, timing and colors in the controls. The code updates as you go.
03
Own
Install with one shadcn command or copy the source. It's your code from then on.
Components
Something for every screen.
From a single button to a whole page section. Filter by Motion or GSAP in the docs sidebar.
Install
Ship it your way.
From your terminal, from your AI agent, or by hand. Every path ends with plain source code in your repo.
~/my-app — zsh
$
⠋ Checking registry.
⠋ Installing dependencies. motion
⠋ Created 1 file:
- components/text-reveal.tsx
$
components/text-reveal.tsx | 118 +++++++++++
package.json | 1 +
$
$ npx shadcn@latest add @tweenly/text-reveal@tweenly · shadcn registry
Make it
move.
Get new components in your inbox
One short email when new components ship. No spam, unsubscribe anytime.