neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
106 lines
3.1 KiB
Markdown
106 lines
3.1 KiB
Markdown
---
|
||
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
|
||
```
|