The $35K Motion Site Stack for Claude Code — 5 repos + setup

motion-stack-setup.md

The $35K Motion Site Stack for Claude Code — 5 repos + setup

The exact stack that makes Claude Code build premium motion websites — scroll animations, page transitions, landing pages that feel expensive.

The 5 repos

#	Repo	What it gives Claude
1	GSAP	The animation engine behind most award-winning sites (26k+ ⭐, now 100% free incl. all plugins)
2	React Bits	130+ animated, interactive React components — copy-paste ready (43k+ ⭐)
3	Magic UI	150+ animated components & effects for design engineers (21k+ ⭐)
4	Motion	Spring-physics animation for React & vanilla JS — the modern framer-motion (32k+ ⭐)
5	Claude Design Skills	Claude Code skills that teach it to actually USE all of the above properly

Setup (5 minutes)

1. Install the Claude Design Skills into your project:

   cd your-project
   git clone https://github.com/freshtechbro/ClaudeDesignSkills .claude/skills/design

   (or copy the skill folders you want into .claude/skills/)

2. Add the animation libraries Claude should build with:

   npm install gsap motion

   React Bits & Magic UI are copy-paste component libraries — no install needed. Claude pulls the component code from their docs/repo when you reference them.

3. Tell Claude about the stack once — add this to your project's CLAUDE.md:

   ## Animation stack
   - Animations: GSAP (timelines, scroll) + Motion (springs, micro-interactions)
   - Components: prefer React Bits / Magic UI patterns before writing from scratch
   - Every section animates in; no static hero sections.
   

4. Restart Claude Code in the project so the skills load.

5. Prompt it like a creative director, not a dev:

   Build the hero section. Premium motion-agency feel:
   staggered entrance, scroll-triggered reveals, one signature interaction.
   Use the animation stack from CLAUDE.md.
   

Why this combo works

• GSAP + Motion cover every animation primitive (timelines, scroll, springs).
• React Bits + Magic UI give Claude proven visual patterns to adapt instead of inventing bland ones.
• The Design Skills stop Claude from defaulting to boring — they encode taste.

---

Built by @buildwith.conrad — I build one Claude workflow worth stealing every week.