wow-design-wiki/prompts/motion/00-motion-prompts.md

name, title, description

name	title	description
motion-prompts	Motion Pattern LLM Prompts	Ready-to-use prompts for generating animations with wiki patterns.

Motion Pattern Prompts

1. Staggered Reveal

Create a staggered reveal animation:
- 3 elements (cards, items, headings)
- Each appears with opacity: 0 → 1, translateY(30px) → 0
- Delay between each: 0.08s (80ms)
- Duration: 0.6s
- Easing: ease-out
- Trigger: IntersectionObserver when element enters viewport
- Use CSS transitions, not JS animation
- Add data-stagger-index attribute to each element

2. Magnetic Button

Create a magnetic button effect:
- Button with padding 16px 32px
- Follow cursor within 80px radius
- Strength: 0.2
- Use requestAnimationFrame for smooth movement
- Reset on mouseleave
- Only apply on devices with pointer: fine
- Easing: cubic-bezier(0.25, 0.1, 0.25, 1)

3. Animated Gradient

Create an animated gradient background:
- 3 gradient orbs (indigo, pink, cyan)
- Each: 400x400px, border-radius: 50%
- Blur: 100px
- Float animation: 20s infinite
- Different delays: 0s, -7s, -14s
- Opacity: 0.3
- Position: absolute, full-height section
- Use CSS keyframes, not JS

4. Hover Micro-interactions

Create hover micro-interactions:
- Cards: translateY(-4px), box-shadow on hover
- Buttons: scale(1.02), color shift
- Links: underline animation (width 0 → 100%)
- All: transition 0.3s ease-out
- No hover effects on touch devices
- Use will-change for performance

5. Parallax Scroll

Create a parallax scroll effect:
- Background layer: yPercent: 30
- Midground layer: yPercent: 50
- Foreground layer: yPercent: 80
- Use GSAP ScrollTrigger with scrub: 1
- Start: "top bottom", end: "bottom top"
- Fallback: CSS only for non-GSAP sites
- Respect prefers-reduced-motion

6. Page Transitions

Create smooth page transitions:
- Fade overlay: black background, opacity 0 → 1, duration 300ms
- Content swap during transition
- Exit: opacity 1 → 0, duration 300ms
- Use CSS transitions, not JS animation
- Trigger: link click
- Only apply on desktop (pointer: fine)
- Respect prefers-reduced-motion

7. Procedural Pattern Generation

Create a procedural pattern generation system:
- Canvas 2D rendering at 1920×1080, export at 4× resolution (7680×4320)
- Grid-based placement: 20px grid, occupancy grid for collision detection
- BFS proximity map: calculate distance from each grid cell to title elements
- Seeded RNG (mulberry32): deterministic layout — same seed = same result
- 7 animation types: dots (stagger fade), capsule (center grow), circle (pie-fill),
  arrow (slide up), square (scale 1.6→1), stripes (stagger slide), cross (scale)
- 3-phase timeline: Phase 1 (title reveal) → Phase 2 (pattern reveal) → Phase 3 (dots pulse)
- Phase 2+3 loop: cycle = 4 × durationMs
- Color pairs: algorithmic bg/fg generation from luminance (darken/mix)
- SVG pattern convention: 40×40, white=bg, black=fg, runtime colorize
- Export: 3 PNG layers (titles, patterns, dots) at 24fps, ZIP archive
- Parameters: density (1-20), proximity (1-20), stagger (0-5)
- Easing: easeOutCubic default, 7 easing types