AI prompts and React code that add motion interaction polish to your vibe-coded apps.
Copy-paste the prompt into Cursor, Lovable or Claude, or drop the ready-made React code straight into your app. Every purchase includes both.
Animated Emoji Reactions
A reaction bar of six emojis that come alive on hover, with click, keyboard and selected states.
Star Rating Interaction
Bouncy star rating with spring-filled stars, a sparkle burst on the fifth star, and click or keyboard input.
Voice Input Field
A chat input whose mic turns red on hover and starts a rippling recording state on tap.
Liquid Segmented Control
A three-way switch whose thumb stretches like liquid toward the segment you pick.
Thinking Orbs
Orbs that think while a model works — nine loading states for AI interfaces, tuned for chat and agent UIs.
Border Beam
A soft beam of light that rides the border of a card, button or input — the signature glow of modern AI products.
Line Icon Set
Ten one-colour line icons for app UIs, each with its own active animation on hover.
3D Game Icons
Six faux-3D game icons (crown, heart, skull, coin, diamond, star) that float on a loop.
Bot Avatars
Animated bot avatars with living faces — eighteen glossy shapes and four states for AI agents.
Liquid Metal
Liquid metal for buttons, icons, text and badges, with live reflections and cursor light.
Mute Bell Toggle
A notification bell that wobbles as its slash draws in and out, as an accessible on/off toggle.
Springy Icon Hover
Four outline icons that pop with a springy bounce on hover, all driven by the Rive file.
Lock Toggle Icon
A padlock whose shackle swings open and snaps shut, as an accessible lock toggle.
Publish Button Icon
An upload button whose arrow lifts on hover and launches off like a rocket on click.
Walking Figure Toggle
A little figure that starts and stops walking, as an accessible on/off toggle.
Delivery Scooter Icon
A courier riding a scooter on a loop who hands off a package when you click.
Star Burst Icon
A glowing star that spins slowly and jumps into a burst of light on click.
Animated Nav Icons
Five navigation icons with their own hover moves: a puffing chimney, typing chat dots, a ringing bell.
Pointer-Tracking Face
A rigged character whose eyes, glasses and head follow the cursor anywhere on the page.
Basket & Cart Icons
An animated shopping basket and cart that come alive on hover, ready for any store header.
See More Interaction
Expandable content section with smooth height transitions, progressive disclosure, and elegant reveal animations.
Web Icons Pack
Six animated web icons on tiles: download, email, wifi, refresh, lock and website.
Voice Glow
A glow that rises with your voice from the bottom of a chat input or phone screen.
Travel Icons Pack
Eight animated travel icons: car, gas, map, compass, coffee, location, walk and food.
Pixel Image Loader
A loader that becomes the image — a WebGL pixel mosaic that settles into the real photo.
Carousel Card Interaction
Smooth carousel card component with drag gestures, snap points, and fluid transition animations.
Magnetic Hover Link
Magnetic link elements that attract toward the cursor with smooth spring physics and subtle scale transforms on hover.
For Vibecoders & Solo Founders
You use AI to code because it's fast. But AI defaults to static, lifeless UI. These prompts are meticulously crafted context files that force standard LLMs to output code with agency-level motion design standards.
Get the Prompt + Code
Your download has the prompt (.md) with strict instructions on easing, state and intent, plus the ready-made React component (.tsx) and any animation files.
Drop in or Paste
Copy the component into your project, or paste the prompt into Cursor or Claude with your request. Example: "Add this to the pricing table. Follow the rules in [pasted_prompt]."
Watch it Move
The AI generates the complex Framer Motion or CSS animation logic correctly on the first shot, bypassing hours of tweaking.
Technical Details
What exactly am I buying?+
Each purchase is a download with two things: the prompt (.md), a structured instruction file your AI coding tool follows to build the animation correctly, and the ready-made React component (.tsx) that runs the live demo, plus any animation files it needs (such as a Rive .riv file). Use the code directly or let your AI tool do the wiring with the prompt.
Do I get the React code or only a prompt?+
Both. Every download includes the prompt and the exact React component behind the live demo, so you can copy the component into your project and skip the AI entirely, or paste the prompt into Cursor, Claude, Lovable or v0 and let it adapt the component to your app.
Which tools do these work with?+
They are tested heavily with Claude and Codex (via Web UI or CLI). They also perform exceptionally well in agentic environments like Lovable and Bolt.new, provided you can inject custom prompt context.
Do I need to know how to code?+
No. The prompt contains the technical knowledge and instructs your AI tool on exactly which APIs and values to use. If you do code, the included React component works on its own.
License & Refunds+
Lifetime usage for unlimited personal or commercial projects. Every purchase comes with a 14-day refund, no questions asked: email uimotionprompts@gmail.com within 14 days of buying and we'll refund you in full.