Motion your clients will ask for.
Animated components for sites that sell. React, Tailwind and GSAP, installed as code you own.
On display
One at a time, at full size.
Text
Title Reveal
Each word rises in turn, then a marker draws under the key word.
Text
Before and After Text
The old way is crossed out and the new way takes its place.
Messages
Chat Flow
From a button to a chat: picks, a sent message, typing dots and a reply.
Messages
Question Typer
Each question is typed out and its answer appears right under it, changing with every question.
Messages
Appointment Reminder
A reminder with buttons: the customer taps Confirm and the confirmation comes back.
Commerce
Payment Notification
A payment lands on the lock screen, the app opens and the amount counts up.
Commerce
Search Ad
A search types out, the results show up, and the sponsored result is highlighted.
Commerce
Add to Cart
A click on the button sends the product flying into the cart; the badge bumps and the total climbs.
Commerce
Plan Toggle
The switch slides from monthly to yearly, the prices roll like an odometer and the discount badge pops in.
Commerce
Offer Countdown
A flip clock counts down to the real end of the offer, next to the real stock left.
Social proof
Review Card
The stars light up one by one, the rating and the review count climb, and the reviews take turns.
Location
Map Pin Drop
A pin drops on the map, bounces, and the address card slides up.
Location
Order Tracker
Each stage checks off, the courier rides the route on the map and the time left counts down to delivered.
Scheduling
Slot Booking
A time slot fills with color and the booking is confirmed.
Anatomy
Sales Funnel
A sales funnel as a sieve: people drop out at each stage and only the booked ones reach the bin.
Anatomy
ROI Balance
A bench balance weighs ad budget against the revenue it brings in; the pointer reads the return, and more budget brings it back toward break-even.
Anatomy
Page Speed Gauge
The heavier the page, the longer the stopwatch runs and the more visitors a pusher takes off the belt before they reach the door.
Install any component with one command
Every component is published to a shadcn registry. The file lands in your project, on your own stack.
npx shadcn@latest add https://motionshelf-pi.vercel.app/r/payment-notification.json