Initial commit: 79+ design patterns, LLM prompts, and assets

prompts/motion/00-motion-prompts.md

@@ -0,0 +1,105 @@
+---
+name: motion-prompts
+title: Motion Pattern LLM Prompts
+description: 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
+```