--- name: animation-systems-ae1e51b8eede description: Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance. --- # Animation Systems (Stripe × Linear × Apple × Vercel) This skill helps you ship **tasteful, product-grade motion**. Not “more animation.” **Better animation**: clarity, hierarchy, feedback, and delight—without jank. --- ## The goals (why motion exists) Use animation to: 1) **Explain hierarchy** (what matters) 2) **Confirm action** (feedback) 3) **Guide attention** (where to look next) 4) **Maintain continuity** (spatial relationships) 5) **Add polish** (craft signals) If an animation doesn’t serve one of these, delete it. --- ## The Stripe/Linear/Apple/Vercel style (shared traits) ### 1) Restraint - Fewer animations, better chosen. - One strong hero moment; the rest is supporting motion. ### 2) Clear choreography - Primary element moves first. - Secondary elements follow with small stagger. - Motion establishes a “reading order.” ### 3) Physical but not cartoony - Use easing that feels **human** (soft acceleration + gentle settle). - Avoid bouncy defaults for serious product UI. ### 4) Texture + depth (subtle) - Small parallax, soft shadows, blur fades, light beams. - Avoid heavy 3D unless it’s the hero. --- ## Motion primitives (build these first) Think in primitives you can reuse everywhere. ### A) Fade + rise (default entrance) Use for: text blocks, cards, modals. - Opacity: 0 → 1 - Y: 12–24px → 0 - Duration: 300–700ms depending on size ### B) Scale + fade (micro emphasis) Use for: popovers, toasts, selected states. - Scale: 0.98 → 1 - Opacity: 0 → 1 ### C) Slide (navigation) Use for: drawers, step transitions. - Use transform translate; avoid animating layout. ### D) Morph / shared element (high craft) Use for: tab indicators, expanding cards. - Requires consistent geometry + measured layout. --- ## Defaults (practical numbers) Use these as a starting system. ### Durations (rule of thumb) - Micro (hover/press): **120–200ms** - UI state change (toggle, select): **180–260ms** - Small transitions (popover, toast): **220–320ms** - Page section entrance: **400–800ms** - Hero sequences: **800–1600ms** (with internal beats) ### Easing (safe set) Pick a small set and reuse. - UI: **ease-out** with gentle settle - Emphasis: slightly stronger ease - Entering: ease-out - Exiting: ease-in (faster) If implementing: - Use your animation library’s “power2.out / expo.out” equivalents. - Avoid elastic/bounce unless brand is playful. ### Stagger - 40–90ms per element (text lines/cards) - Use smaller stagger on mobile --- ## Choreography patterns ### 1) “Hero → supporting elements” - Hero visual animates in first. - Headline appears next. - CTA appears last. ### 2) “Section reveal on scroll” - Trigger when section is ~20–30% visible. - Animate once (don’t replay on tiny scroll). ### 3) “Hover: lift + glow” - Y: -2 to -6px - Shadow: subtle increase - Optional: border/gradient glow ### 4) “Focus ring + micro shift” - For form fields: focus ring + tiny scale/translate for responsiveness. --- ## Performance rules (non‑negotiable) ### Animate the right properties Prefer: - `transform` (translate/scale/rotate) - `opacity` Avoid (unless necessary): - width/height/top/left - expensive filters on large areas ### Respect the GPU - Clamp device pixel ratio in heavy canvases (1–2) - Keep blur subtle and small - Avoid many simultaneous animated shadows ### Reduce reflows - Don’t measure layout every frame. - For scroll effects, use a library that batches reads/writes. --- ## Accessibility: Reduced Motion Always support `prefers-reduced-motion`. Policy: - Keep content visible. - Replace motion with **instant state** + subtle opacity. - Disable scroll-scrub/pin. Ask the user: - “Do you want a reduced-motion mode that disables all non-essential motion?” --- ## Implementation guidance (library-agnostic) ### For simple sites - CSS transitions for small hovers/toggles. - Use a single motion library (GSAP or Framer Motion) for complex sequences. ### For product sites - Create a motion token set: - durations - easing curves - standard offsets (8/16/24px) - stagger defaults ### For hero moments - Use timelines (or keyframes) with labeled beats. - Lock camera/scene movement first, then layer text. --- ## What to ask the user - What’s the brand lane: Stripe (polished), Linear (minimal), Apple (cinematic), Vercel (developer/product)? - What are the key moments? (hero, scroll story, hover cards, nav transitions) - Any performance constraints? (mobile, low-end devices) - Reduced motion requirements? --- ## Output format (when asked to “add Stripe/Linear-style animation”) Return: 1) Motion goals (what we’re trying to communicate) 2) Motion tokens (durations + easing + offsets) 3) A choreography plan (timeline beats) 4) Implementation notes (perf + reduced motion) 5) A small code recipe (CSS or GSAP/Framer depending on stack) --- Source attribution: MengTo Original project: https://github.com/MengTo/Skills License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License Copyright (c) 2026 Gabriel Moreira Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: MengTo Original project: https://github.com/MengTo/Skills Attribution basis: Upstream repository explicitly recorded in package mirror path Fields of work: Design, Development & Engineering Roles: Frontend Developer, Product Designer, UX Designer Specialties: Design, Frontend Tools: Tool not specified Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: e6748a9168f7c0cfe7dfc56270a30fcbe95b5727de58f20c947c175a7468853f