Skill Wiki
motion
Domain inferred from 13 atoms across the corpora.
Atom counts by kind
| Kind | Count |
|---|---|
| template | 8 |
| example | 4 |
| check | 1 |
Sample atoms
Check Animation Duration
Validates animation/transition durations fall within tasteful UI ranges (100–200ms micro, 200–400ms state, 300–600ms entrance) and flags durations > 3s as potential vestibular hazards.…
Example Framer Page Transition
Framer's marketing site uses a two-stage page transition: outgoing content fades down (opacity 1 → 0, translateY 0 → -8px) over 280ms, immediately followed by incoming content fading up (opacity 0 → 1, translateY 12px → …
Example Linear Card Hover
Linear's issue cards in the backlog/board view lift ~1.5px on hover with a subtle border-color shift from #2C2D33 to #3A3B42 and a soft new bottom shadow.…
Example Stripe Payment Success
After a successful payment, Stripe Checkout displays a 56px circle that draws itself in (~400ms), then a checkmark path strokes through (~300ms), then the words 'Payment successful' fade up (~200ms).…
Example Vercel Hero Gradient
Vercel's homepage hero uses a mesh gradient (the 'Vercel beam') that drifts very slowly behind the headline — cyan #00DFD8 and magenta #FF0080 radial-gradient blobs at ~10% alpha, animating their position over a 16-20 se…
Template Button Press
Tactile button press feedback — transform-scale + shadow pulse + color darken on :active. Asymmetric timing (fast in, slower out) sells the physicality. Works on touch and mouse equally.
Template Card Hover Lift
Card / button hover lift with shadow deepening — the Linear / Vercel micro-interaction signature. Includes active-press snap-back, focus-visible parity for keyboard, and full reduced-motion fallback.…
Template Easing Curves
Canonical easing + duration token set as CSS custom properties. Drop into :root and reference everywhere — eliminates the magic-number cubic-bezier copy-paste that plagues most codebases.…
Template Fade Stagger
Children of a list / grid fade-up in sequence using nth-child animation-delay — pure CSS, no JS. Triggered by adding .is-revealed to the parent (combine with scroll-reveal observer for on-scroll cascades).
Template Loading Spinner
SVG circle spinner with rotating arc — currentColor-aware, parameterized size, fully accessible (role=status + sr-only label). Single rotation animation, no JS, no GIF. Reduced-motion shows a static partial ring.
Template Page Transition View Transitions
Smooth page transitions using the View Transitions API (Chrome 111+, Safari 18+). Single-page apps get cross-fade for free; shared elements (e.g.…
Template Scroll Reveal Vanilla
Scroll-reveal animation using IntersectionObserver — no GSAP, no AOS, ~25 lines of JS. Adds .is-visible class once an element scrolls into view; does NOT re-trigger on scroll-out.…