# Kinetic

> Motion-first, animated transitions, dynamic typography, scroll-driven.

- Skill: `jdsadminllc/kinetic` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/kinetic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/kinetic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/kinetic

---

# Kinetic
## Mission
Design interfaces where motion is not decoration but the primary storytelling device — every scroll, hover, and state change drives engagement through purposeful, choreographed animation.
## Brand
### 🎨 Colors
- `#0d0d0d` — Deep black (canvas)
- `#ffffff` — Pure white (text, accents)
- `#ff3366` — Electric pink (primary motion accent)
- `#00d4ff` — Cyan (secondary motion)
- `#ffcc00` — Amber (highlight)
- `#1a1a2e` — Dark navy (alt background)
### 🔤 Typography
- **Heading:** Syncopate (geometric, wide) or Orbitron — fonts that look good in motion
- **Body:** Inter or DM Sans (clean, neutral, readable in motion)
- **Scale:** xs: 0.75rem, sm: 0.875rem, base: 1rem, lg: 1.125rem, xl: 1.25rem, 2xl: 1.5rem, 3xl: 3rem (large for impact)
### 📐 Spacing
- Flexible spacing that shifts with animation: 1rem–4rem gaps
- Section padding: 6rem vertical (room to animate), 2rem horizontal
- Card gaps: 2rem with animated offset on scroll
- Border radius: 0–8px (sharp enough for crisp motion edges)
### 🧩 Components
- **Buttons:** Magnetic hover effect (button follows cursor slightly), animated gradient border, scale pulse on click
- **Cards:** Reveal on scroll with staggered fade-up and slight rotation, parallax depth effect on hover
- **Nav:** Appears/disappears on scroll direction with smooth slide, background blur transitions
- **Hero:** Split-text animation on load (letters animate in sequence), scroll-driven parallax backgrounds, cursor-reactive elements
- **Footer:** Reveal animation on scroll into view, subtle continuous marquee or particle effect
### ♿ Accessibillity
- All animations respect prefers-reduced-motion: replace with instant transitions
- No animation that triggers vestibular disorders: avoid large parallax, excessive scaling, spinning
- Focus states animate smoothly (not abruptly) to help users track focus movement
- Scroll-driven animations must not interfere with keyboard navigation or screen reader focus order
- Minimum animation duration: 200ms, maximum: 600ms for UI transitions
### ✍️ Writing Tone
Dynamic and punchy. Verb-driven headlines. Short, rhythmic sentences. Words should carry the same energy as the motion. Sentence case labels.
## Do / Don't
### ✅ Do
- Choreograph entrance animations in sequence — stagger, don't flood
- Use scroll-driven animations (CSS scroll-timeline or Intersection Observer) for narrative flow
- Keep animations between 200–500ms for UI; longer for narrative/hero moments
- Test all animations at 60fps on mid-range mobile devices
- Provide instant-fallback static states when motion is disabled
### ❌ Don't
- Animate everything — motion is a signal; overuse dilutes its impact
- Use infinite looping animations except for deliberate loading states
- Animate layout-triggering properties (width, height, top, left) — use transform and opacity
- Start animation before the element is in viewport
- Ship without prefers-reduced-motion testing
## Quality Gates
- [ ] All animations run at 60fps on a mid-range mobile device (Moto G4 equivalent)
- [ ] prefers-reduced-motion disables all non-essential animation
- [ ] No layout-triggering properties animated (only transform + opacity)
- [ ] Entrance animations are staggered, not simultaneous — test with DevTools timeline
- [ ] Scroll-driven animations work in both scroll directions (up and down)
- [ ] Focus transitions are smooth and never teleport