/p/untitled-otvlq958v11 variable0 runs
- Prompt
- Public
- v1
Adding Motion Modal to React Project
Created 16 Oct 2026 · Updated 3d ago
Help to add motion animation to a React project
existing_prompt
---
## Additional requirement: motion and animation layer
Add a polished, calm motion system to this React app. Do not change existing business logic, routes, or data flow. Only add motion to the UI.
### 1. Install dependencies
Detect the package manager from the lockfile (pnpm / yarn / npm / bun) and use it.
```bash
npm install motion
npm install @radix-ui/react-dialog
npm install -D tw-animate-css # Tailwind v4; for Tailwind v3 use: tailwindcss-animate
```
- Skip any package already installed. Check `package.json` first.
- Tailwind v4: add `@import "tw-animate-css";` to the global CSS.
- Tailwind v3: add `require("tailwindcss-animate")` to `plugins` in `tailwind.config`.
- Import from `"motion/react"` (not `framer-motion`).
- If the project uses Next.js App Router, add `"use client"` to every file that uses `motion`.
### 2. Shared motion tokens
Create `src/lib/motion.ts`:
```ts
export const ease = [0.22, 1, 0.36, 1] as const; // ease-out
export const dur = { fast: 0.15, base: 0.25, slow: 0.4 };
export const fadeScale = {
initial: { opacity: 0, scale: 0.95 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.97 },
transition: { duration: dur.base, ease },
};
export const fadeUp = {
initial: { opacity: 0, y: 12 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: 8 },
transition: { duration: dur.base, ease },
};
export const stagger = {
animate: { transition: { staggerChildren: 0.06, delayChildren: 0.05 } },
};
export const spring = { type: "spring", stiffness: 380, damping: 30 } as const;
```
### 3. Patterns to implement
1. **Modal / dialog**
- Use Radix `Dialog` with `forceMount` inside `AnimatePresence`.
- Overlay: fade to `bg-black/40`.
- Card: `fadeScale`.
- Keep focus trap, Escape to close, and `aria-*` from Radix.
2. **Drawer / side panel**
- Slide in from the right (`x: "100%" → 0`) with the spring token.
- Dim the backdrop. Exit is the reverse.
3. **Staggered entrance** (home / dashboard / list pages)
- Parent uses the `stagger` variants. Each child uses `fadeUp`.
4. **Page / route transitions**
- Wrap route content in `AnimatePresence mode="wait"`. Use a soft cross-fade (opacity only, 0.2s).
5. **Selectable tiles** (use-case picker)
- `whileHover={{ y: -2 }}`, `whileTap={{ scale: 0.98 }}`.
- The selected tile gets a ring and a check badge that scales in (`fadeScale`).
- The Continue button animates from disabled to enabled (opacity and background color, 0.2s).
6. **Expand / collapse in place** (cards, forms, accordions)
- Use the `layout` prop (and `layoutId` for shared elements). Animate height with `layout`, not manual px values.
7. **Floating decorative elements** (optional, hero only)
- Slow looping `y` and `rotate` (±6px, ±2deg, 6–9s, `repeat: Infinity`, `ease: "easeInOut"`), with different delays per element.
8. **Success / completion state**
- Icon `scale: 0 → 1` with the spring token, then a short `fadeUp` on the text.
### 4. Rules
- Respect reduced motion. Wrap the app in `<MotionConfig reducedMotion="user">`.
- Animate only `opacity` and `transform` (x, y, scale, rotate). Never animate width, height, top or left. Use `layout` instead.
- Keep durations between 150 and 400 ms for UI, except decorative loops.
- No bounce on dialogs or forms. Springs are only for drawers, badges and tiles.
- Don't add `motion` to more than ~3 levels of nested components per screen. Keep it calm.
- Keep the existing design system, colors, fonts and spacing. This change adds motion only.
- Reuse the tokens from `src/lib/motion.ts`. Don't hardcode timings in components.
### 5. Verification
- Run the type check, lint and build commands from `package.json`. All must pass.
- Start the dev server and check each pattern in the browser. Confirm there are no layout shifts, no console warnings, and that exit animations play (no instant unmounts).
- Toggle "Reduce motion" in OS settings and confirm animations are minimal.
- Report: packages added, files created or changed, and any pattern skipped with the reason.
Run it with a free account
Create a free account to run this prompt, fill in its variables and fork it.
Comments
Sign in to leave a comment.