01HeroFree
Headline Focus
Use it for The first screen of a landing page.
›Make a hero where each word comes into focus
UI Motion
Website animations that ship.
36 clean website and product animations. Every one is a 4:5 video slide for your carousels and the same animation as code for your site. Each comes with a prompt for Claude Code. The previews below are the real thing.
- 1Pick an animation below.
- 2Paste its prompt into Claude Code for the video slide, or copy the section for your site.
- 3Make it yours. Texts, numbers and colours are variables.
Video slides need Claude Code (a paid Claude plan, Pro or higher) and a Mac or Windows computer, or the phone setup. The website versions are plain HTML, CSS and JavaScript with GSAP. Names, reviews and numbers in the previews are invented examples.
Landing page 12 animations
Hero, social proof, pricing and signup: the sections that turn a visit into a signup.
02HeroIn the pack
Swap Word
Use it for A hero line that says more than one thing.
›Add a headline word that swaps in a pill
03Social proofIn the pack
Live Signups
Use it for Social proof under a hero or pricing table.
›Add live signup toasts that stack up
04Social proofIn the pack
Logo Wall
Use it for Trust under the hero, above the pricing.
›Add a drifting logo wall with a rating
05DashboardFree
Metric Tiles
Use it for A product dashboard, at a glance.
›Animate three KPI tiles with a ring and bars
06FeaturesIn the pack
Bento Build
Use it for A features section.
›Make a bento grid that builds itself
07Product demoIn the pack
Cursor Demo
Use it for Product pages and launch posts.
›Show my app with a cursor demo
08How it worksIn the pack
Steps Path
Use it for How it works and onboarding.
›Draw a path through three steps
09Before and afterIn the pack
Compare Slider
Use it for Redesigns and case studies.
›Compare my old page with the new one
10PricingIn the pack
Pricing Toggle
Use it for A pricing section with a billing switch.
›Make a pricing toggle with rolling prices
11FAQIn the pack
FAQ Accordion
Use it for The FAQ block of a landing page.
›Make an FAQ where answers open in turn
12SignupIn the pack
Signup Success
Use it for A waitlist or newsletter signup.
›Make a signup that ends in confetti
Product UI 12 animations
Command palettes, AI answers, boards and settings: product screens that explain themselves.
13Command menuIn the pack
Command Palette
Use it for Product tours and feature posts.
›Make a command palette that filters live
14AI assistantIn the pack
AI Answer
Use it for AI features and assistant launches.
›Make an AI answer that streams in
15BoardIn the pack
Kanban Move
Use it for Task and project management apps.
›Make a kanban card move to Done
16NotificationsIn the pack
Notification Center
Use it for Dashboards and app feature posts.
›Make a notification panel that clears
17BookingIn the pack
Booking Picker
Use it for Booking pages and appointment flows.
›Animate a booking calendar with time slots
18UploadsIn the pack
Upload Progress
Use it for Upload dialogs, file managers, onboarding.
›Show three files uploading with progress
19SettingsIn the pack
Settings Cascade
Use it for Settings pages and onboarding checklists.
›Flip five settings on and show Saved
20Dark modeIn the pack
Theme Switch
Use it for Dark mode launches and theme settings.
›Switch my card from light to dark mode
21OnboardingIn the pack
Onboarding Checklist
Use it for Onboarding flows and getting-started cards.
›Tick off a five-step onboarding checklist
22TrackingIn the pack
Delivery Tracker
Use it for Delivery, ride and order tracking screens.
›Animate a courier pin on a route with an ETA
23BillingIn the pack
Invoice Paid
Use it for Billing, invoicing and payment-success screens.
›Stamp an invoice paid and send the receipt
24CollaborationIn the pack
Team Cursors
Use it for Collaboration, docs and multiplayer features.
›Show three cursors editing one document
Shop and social proof 12 animations
Cart, sizes, reviews and rewards: the details that make a shop feel finished.
25Product pageFree
Add to Cart
Use it for Product pages and online shops.
›Make a product fly into the cart
26VariantsIn the pack
Color Swatches
Use it for Product pages with color options.
›Make swatches that recolor a product
27SizesIn the pack
Size Picker
Use it for Fashion and shoe shops.
›Animate a size picker with a sold-out size
28ReviewsIn the pack
Review Stream
Use it for Product pages and social proof sections.
›Make a calm stream of review cards
29CartIn the pack
Shipping Progress
Use it for Carts that nudge toward free shipping.
›Fill a free-shipping bar as items are added
30OrderIn the pack
Order Status
Use it for Order confirmation and tracking pages.
›Track an order step by step
31ReceiptIn the pack
Receipt Print
Use it for Order confirmations and payment success.
›Print a receipt out of a slot
32ReviewsIn the pack
Rating Badge
Use it for Product pages and social proof sections.
›Count up a 4.9 rating with filling stars
33Social proofIn the pack
Testimonial Wall
Use it for Reviews on a product or home page.
›Make a testimonial wall with one picked
34RewardsIn the pack
Loyalty Points
Use it for Account pages and rewards feature posts.
›Make a points card that unlocks a reward
35ProductIn the pack
Product Spotlight
Use it for Product pages and launch posts.
›Make a product spotlight with typed specs
36Gift cardIn the pack
Gift Card
Use it for Gift card pages and checkout posts.
›Make a gift card that flips and copies
Like them? There's more
3 are free. All 36 are in the pack.
The full pack has every UI Motion animation with its recipe, its video slide and its website version, plus 250 prompts, 60 templates, 400 sound effects and more: 1,500+ pieces for $49 once.
One-time payment · Instant download · 14-day money-back guarantee