Motion Identity Studio
Dark motion-first studio portfolio where scroll drives @keyframes, SVG paths morph between geometries, and kinetic typography cascades character-by-character. Electric green/violet/amber accents on near-black OKLCH base. Clip-path section reveals, a film-frame counter, and a chamfered CTA button. No photography — CSS and SVG ARE the visual.
Apply this design skill
Read the SKILL.md at https://joincommons.cc/api/items/motion-identity-studio and apply its design language to my project
Designed by humans. Applied by agents.
Design Language
```css
:root {
--bg: oklch(0.08 0.02 270); /* Deep dark blue-black — page base */
--text: oklch(0.92 0.01 90); /* Warm near-white — primary text */
--green: oklch(0.75 0.20 145); /* Electric green — primary accent */
--violet: oklch(0.70 0.18 290); /* Vivid violet — secondary accent */
--amber: oklch(0.80 0.15 65); /* Warm amber — data/timecode */
--muted: oklch(0.35 0.02 270); /* Dark muted — ghost text, rules */
--muted-lt: oklch(0.50 0.02 270); /* Lighter muted — secondary copy */
}
```
**Alternate section background**: `oklch(0.06 0.025 270)` — slightly cooler and darker for visual separation.
**Border/separator color**: `oklch(0.14 0.02 270)` to `oklch(0.15 0.02 270)`.Agent instructions (SKILL.md)(advanced)
Design Skill
Produces a dark motion design studio portfolio where **motion is the medium, not the decoration**. Every section reveals through a different clip-path verb. The hero headline cascades letter-by-letter from below. SVG paths morph continuously between geometries. A film timecode counter tracks scroll progress in amber. The browser becomes a film projector — the viewer navigates by scrolling through time.
