Beyond Vibe Coding: Design and Build Fun Micro Animations
Follow these steps to get set up and start animating. Your agent can handle the commands.
- Level
- Beginner-friendly
- Reading time
- 3 minutes
- Built with
- Next.js, React, Motion, Claude Code
On this page
We're starting with Hopscotch, a made-up weekend-plans app for friend groups. The site already works. You'll add animations to make it feel alive.
This follows the starter README, with prompts you can copy into your agent.
Open your coding agent
Download Claude Desktop, install it, and sign in. Open its Code area.
Already using another coding agent? You can use that too, as long as it can edit files and run commands locally on your computer.
Create a workshop folder
Create a new, empty folder called animations-workshop using Finder on Mac or File Explorer on Windows.
Open that folder in Claude Code Desktop (or your coding agent) and start a session.
Ask your agent to install Git and Node
Git downloads the starter. Node.js 22.13.0 or newer runs it. npm, which comes with Node, installs what the project needs. This Node minimum is required by Motion Studio, which is included in the starter.
Copy this prompt into your agent:
Help me get this computer ready for the animations workshop. I'm a beginner and want to do this without opening a terminal myself. Detect my operating system and check whether Git, Node.js, and npm are available on this computer. The starter needs Node.js 22.13.0 or newer. Install Git if it is missing. If Node is missing or older than 22.13.0, install the current Node.js LTS release (22.13.0 or newer), including npm. Use the official installers or a standard package manager for my operating system. Keep any existing Node installation that is already version 22.13.0 or newer, along with working Git and npm installations. Run git --version, node --version, and npm --version yourself. Confirm the active Node version is 22.13.0 or newer, and tell me all three versions when everything is ready. If I need to approve an installer, enter my password, or restart the app, walk me through the clicks. If you can't perform an installation, give me the official download link and simple installer steps. Leave the workshop folder empty for the next step.
Follow any installer or permission prompts your agent shows. If it asks you to restart your coding app, reopen the same folder and ask it to check again.
Ask your agent to open the starter
Once the tools are ready, send this prompt in the same session:
Clone https://github.com/Product-Builders-Club/beyond-vibe-coding-animations.git directly into this folder (not into a new subfolder), then install the dependencies with npm. When that's done, start the dev server and show me the site.
Your agent will download the project, install its dependencies, and start the site. Follow any command approvals it shows. Motion and Motion Studio are already included.
Try the site
Open the links your agent gives you. Usually they're:
- Landing page: the Hopscotch homepage.
- Plans app: the interactive app.
If it uses a different port, use your agent's links instead.
On the plans page, switch tabs, open the menu, create a new plan, and try the like, vote, and RSVP buttons. Everything should work, but it won't animate yet.
Keep the development server running while you build. Your agent can manage it for you.
Add your first animation
Pick something you want to bring to life. Tell your agent what triggers it, what moves, and how it should feel.
Try this prompt:
On the Hopscotch landing page, use Motion to fade the feature cards in and move them up slightly when they first enter the viewport. Stagger the cards gently. Keep the existing design and behavior, and respect the user's reduced-motion preference.
Look at the result in your browser. Ask for adjustments: "Make it quicker," "Use a smaller movement," or "Start each card a little later."
Animate the hero with Motion Studio
After the feature cards, try a page-load animation you can edit in Motion Studio:
Animate the hero on the Hopscotch landing page with Motion: a quick, playful entrance on page load where the copy fades up in a stagger and the art pops and springs into place. Keep the existing design. Make it editable as one timeline in Motion Studio: - Put all the hero animations in one component using useAnimate, with one effect that makes a separate animate() call per element. Target each element by a readable class. - Use plain number values only: no shared constants, math or sequences. Set up Motion Studio (already installed): wrap next.config.ts with withMotionStudio from "motion-studio/next", run "npx motion-studio serve" alongside the dev server, and show me the hero with Studio open.
Then try an interaction in the plans app: a sliding tab indicator, a menu that opens smoothly, or a little feedback when someone RSVPs. Test the interaction after each change.
Ask for help if something gets stuck
Copy the error message into your agent, or describe what you see:
I'm stuck setting up the Hopscotch animation starter. Check that Git, Node, and npm are ready, that this is the correct project folder, and that the development server is running. Fix the setup issue and give me the working links for the landing page and /plans. Explain any steps I need to do in plain language.
You can also show a mentor what's happening.
Keep the starter README and Motion docs handy as you build.