dylantarre/animation-principles
144 skills56.4k installs9.1k starsGitHub
Install
npx skills add https://github.com/dylantarre/animation-principlesSkills in this repo
1Mobile TouchApply Disney s 12 animation principles to mobile gestures haptics and native app motion Principle Mobile Implementation Squash Stretch Rubber banding bounce on scroll limits Anticipation Peek before reveal long press preview Staging Sheet presentations focus states Straight Ahead Pose to Pose Gesture driven vs preset transitions Follow Through Overlapping Momentum scrolling trailing elements Slow In Slow Out iOS spring animations Material easing Arc Swipe to dismiss curves card throws Secondary Action Haptic pulse with visual feedback Timing Touch response 100ms transitions 250 350ms Exaggeration Bounce amplitude haptic intensity Solid Drawing Respect safe areas consistent anchors Appeal 60fps minimum gesture continuity Squash Stretch Implement rubber band effect at scroll boundaries Pull to refresh should stretch content naturally Buttons compress on touch Anticipation Long press shows preview before full action Drag threshold provides visual hint before item lifts Swipe shows edge of destination content Staging Use sheet presentations to maintain context Dim and scale background during modal focus Hero transitions connect views meaningfully2.1kinstalls2Video Motion GraphicsThe video-motion-graphics skill is designed for create After Effects and Premiere motion graphics, titles, and explainer compositions. Video Motion Graphics Apply Disney's 12 animation principles to After Effects, Premiere Pro, and video motion design. Shape layers deform more naturally than pre-comps for organic squash. Invoke when the user creates After Effects compositions, video titles, or motion graphics.1.5kinstalls3Framer Motionframer-motion is an animation-principles skill that maps all 12 Disney animation principles—squash and stretch, anticipation, staging, and others—to Framer Motion's declarative React API with ready-to-paste JSX examples. It activates when implementing motion.div variants, transition timing, and choreographed sequences in Cursor or Claude. Developers reach for framer-motion when they want principled UI motion instead of arbitrary CSS keyframes or one-off tween snippets. The skill bridges animation theory and Framer Motion props like animate, variants, initial, and transition times arrays.1.4kinstalls4Motion Designermotion-designer is a dylantarre/animation-principles skill for visual motion systems, animation specifications, and meaningful UI transitions. The guide maps Disney's 12 principles—squash and stretch, anticipation, staging, and related craft rules—to interface work such as button recoil before action, volume-preserving squash on impact, and brand-forward mascot motion. Developers and designers invoke motion-designer when drafting CSS, Framer Motion, or design-handoff specs that must communicate state changes clearly instead of adding decorative easing. The skill emphasizes purposeful movement that delights while staying readable across components and marketing surfaces.1.1kinstalls5Micro Interactionsmicro-interactions is a Claude Code skill from dylantarre/animation-principles that maps Disney's 12 animation principles to interface micro-moments. The skill covers squash and stretch on button press, anticipation in hover hints, staging for focus, follow-through in ripples, and related patterns for toggles, form validation, loading indicators, and notification badges. Developers reach for micro-interactions when ordinary UI elements need polished, purposeful motion without commissioning a full motion-design pass. It triggers when designing small feedback moments rather than page transitions or brand campaigns.1kinstalls6Web Motion Designweb-motion-design is a skill from dylantarre/animation-principles that translates Disney's 12 animation principles into practical CSS, JavaScript, and React or Vue motion patterns. It guides squash-and-stretch via transform scale, anticipation cues, staggered child animations, easing curves, and motion hierarchy for buttons, modals, and page transitions. Developers reach for web-motion-design when micro-interactions feel random or disjointed and a product needs a deliberate motion language across components instead of one-off animation snippets.775installs7Scroll AnimationsScroll Animations is a skill from dylantarre/animation-principles that applies Disney's 12 principles to scroll-triggered UI motion. It guides agents to stage reveals in reading order, define hidden and revealed poses interpolated by scroll position, and start anticipation animations at 10-20% element visibility. Developers reach for Scroll Animations when building parallax sections, sticky headers, progress indicators, or any scroll-linked reveal instead of writing ad hoc Intersection Observer logic. The skill encodes squash-and-stretch, staging, and pose-to-pose patterns so scroll motion feels intentional rather than generic fade-ins.732installs8Game Designergame-designer is an animation-for-game-feel skill in dylantarre/animation-principles that translates Disney’s 12 principles into actionable gameplay guidance. It explains how squash and stretch sell impact weight, how anticipation frames telegraph attacks, and how follow-through and easing make platformers and action games readable under pressure. Developers use it when tuning hit reactions, ability wind-ups, collectible bounces, and other juice that turns stiff collisions into satisfying feedback loops. The skill fits engine-agnostic design reviews inside a coding agent when polish work focuses on player satisfaction rather than netcode or level layout alone.726installs9After Effectsafter-effects is an agent skill from dylantarre/animation-principles that implements all 12 Disney animation principles inside Adobe After Effects. The skill provides timeline structures, keyframe timing, Easy Ease guidance, and expression snippets such as automatic squash-and-stretch scale formulas for interface and character motion. Developers and motion designers reach for after-effects when web or product animations need anticipation, follow-through, staging, and squash-stretch timing that can be replicated in CSS, Lottie, or Rive pipelines. It bridges classic animation craft with After Effects tooling rather than generating static mockups or generic CSS transitions alone.593installs10Filmmakerfilmmaker is a role-persona skill in dylantarre/animation-principles, a marketplace of 144 Claude Code skills across 12 categories, that teaches cinematic animation craft for narrative web motion. It reframes each of Disney's 12 principles—squash and stretch, anticipation, staging, straight ahead versus pose to pose, follow through, slow in and slow out, arc, secondary action, timing, exaggeration, solid drawing, and appeal—for storytelling shots, emotional beats, and cut logic rather than character rigs. Guidance covers establishing shots, tension build-ups, 180-degree continuity, three-beat comedy timing, and a cinematic checklist ensuring every frame advances story or character. Reach for filmmaker when building launch films, scroll-driven brand stories, hero animations with emotional arcs, or marketing embeds where motion must feel directed—not merely decorative.567installs11Saas Productivitysaas-productivity is a dylantarre/animation-principles skill for designing restrained, professional motion in business tools, project management apps, collaboration software, and productivity SaaS. It maps Disney's 12 principles—such as squash and stretch, anticipation, and timing—to concrete UI patterns like subtle checkbox squash on task completion, button compression for tactile feedback, brief anticipation before save confirmations, and drag-initiation cues. The guidance prioritizes minimal motion that enhances focus and reduces friction rather than decorative animation. Developers reach for saas-productivity when state changes, loading indicators, and confirmations in dense dashboards need motion that feels fast and clear. It complements frontend implementation skills by giving motion rationale for tables, modals, and multi-step workflows common in B2B software.521installs123d Spatial3d-spatial is a Claude Code skill from dylantarre/animation-principles, a marketplace collection of 144 skills teaching Disney's 12 Principles of Animation across tools and contexts. The 3d-spatial skill adapts those principles to three-dimensional work in Blender, Unity 3D, Unreal Engine, Cinema 4D, and VR or AR applications. Quick-reference tables map squash and stretch to lattice deformers, anticipation to IK wind-ups, staging to camera angles and depth, and follow-through to bone chains and physics simulation. Developers and motion designers reach for it when building depth, parallax, and physically grounded spatial motion in web interfaces, games, or immersive apps—not for flat CSS-only micro-interactions without Z-axis consideration. Install with npx skills add https://github.com/dylantarre/animation-principles --skill 3d-spatial.516installs13Gsap Greensockgsap-greensock is an agent skill in the dylantarre/animation-principles repository that translates all 12 Disney animation principles into copy-paste GSAP JavaScript for timelines, tweens, easing, stagger, and motionPath arcs. Each principle section ships runnable snippets—squash-and-stretch via scaleX/scaleY, anticipation through sequenced timeline segments, follow-through with "<" and "-=0.4" overlap, and arcs via motionPath keyframes—plus a master-timeline pattern composing anticipation, main action, and follow-through sub-timelines. Developers reach for gsap-greensock when building marketing sites, games, or product UIs that need characterful motion beyond basic CSS transitions and already know what squash, staging, and exaggeration should look like visually. The reference documents 30+ built-in GSAP easing functions and six core API features. Install with npx skills add dylantarre/animation-principles --skill gsap-greensock.504installs14Css Nativecss-native is a skill from dylantarre/animation-principles that maps all 12 Disney animation principles to pure CSS implementations. Each principle includes copy-ready @keyframes and class examples—squash-and-stretch scale transforms, anticipation wind-up translateY offsets, staging compositions, and additional motion patterns using transitions and transforms only. Developers invoke it when polishing micro-interactions, hero animations, or scroll-driven effects without adding GSAP, Framer Motion, or similar dependencies. The skill favors native CSS animations, view transitions, and scroll-timeline features for performant, accessible motion in web apps and marketing sites. Use css-native when JavaScript animation weight is undesirable but professional motion quality is still required.490installs15Fitness Wellnessfitness-wellness is a Design & UI/UX skill from dylantarre/animation-principles that translates Disney's 12 principles into motion for fitness apps, wellness platforms, workout trackers, and meditation experiences. The skill prescribes energetic squash on workout buttons, progress ring pulses on achievement, countdown anticipation before timers, and staging for goal completion so motion motivates users without causing fatigue or distraction. Developers reach for fitness-wellness when building health app interfaces where animation must celebrate activity and support habits while remaining accessible during extended sessions. Concrete examples include ready-set-go timer sequences, activity icon bounce on completion, and suspenseful goal-approach staging patterns.480installs16E Commerce Retaile-commerce-retail is a Design & UI/UX skill from dylantarre/animation-principles that maps Disney's 12 principles of animation onto shopping experiences. The skill prescribes motion for add-to-cart squash and stretch, buy-button anticipation, sale-tag staging, and checkout feedback so animations increase clarity and conversion without distracting shoppers. Developers reach for e-commerce-retail when designing animations for product catalogs, cart flows, promotional banners, or retail mobile apps where motion must feel premium and trustworthy. Each principle includes concrete UI examples—quantity badge stretch, image zoom anticipation, and sale pulse patterns—ready to translate into CSS, React Spring, or Framer Motion implementations.467installs17Anime Jsanime-js is a Claude Code skill from dylantarre/animation-principles that teaches implementation of all 12 Disney animation principles using the Anime.js library. The skill provides concrete JavaScript patterns for squash and stretch, anticipation, staging, and remaining principles through anime() calls, anime.timeline() sequences, staggers, and SVG or DOM property tweens. Developers reach for anime-js when building marketing sites, landing pages, or dashboards that need polished motion without adopting a heavier React animation framework like Framer Motion. Each principle includes copy-ready code snippets with easing, duration, and transform targets suitable for vanilla or lightly frameworked frontends.450installs18Page Transitionspage-transitions is a skill from dylantarre/animation-principles for implementing navigation animation in web and mobile applications. It maps Disney's 12 animation principles—squash and stretch, anticipation, staging, follow through, slow in and slow out, and others—to concrete page transition patterns including shared element bridges, elastic enter effects, exit-before-enter sequencing, and content settle choreography. Developers reach for it when implementing route changes, modal open and close animation, or view transitions that need motion continuity instead of hard cuts. The quick-reference table ties each principle to a specific transition technique for SPAs and native navigation stacks.445installs19Educator Teachereducator-teacher is a Claude Code skill from dylantarre/animation-principles that applies Disney's 12 animation principles to educational content and teaching interfaces. The skill maps principles like squash and stretch, anticipation, staging, and follow-through to lesson flows where abstract concepts become tangible—balls squashing on impact for physics, hearts stretching for biology emotion connections, and staged reveals for step-by-step tutorials. Developers use it when creating educational content, explaining concepts through motion, or teaching animation principles to students inside docs, courses, and interactive tutorials. It reinforces visual hierarchy and recall by pacing motion to concept difficulty rather than decorative flair. Reach for educator-teacher when building onboarding walkthroughs, concept diagrams with motion, or course modules that need memorable, pedagogically sound UI animation patterns.426installs20Emotional Narrativeemotional-narrative is an animation-principles skill from dylantarre/animation-principles for developers and designers who need motion that conveys feeling, not just movement. The skill applies a storyteller mental model—anticipation as breath before confession, pauses as punctuation—and maps the 12 animation principles through an emotional lens so walk cycles, transitions, and hero moments communicate confidence, defeat, joy, or tension. Developers reach for emotional-narrative when building landing pages, campaign stories, or product UI where motion must support narrative beats from intro through climax to resolution fade. It bridges motion design and UX by asking what the audience should feel at each frame.424installs21Game Developmentgame-development is a game animation skill for Claude Code that maps Disney's 12 animation principles to interactive game implementations in Unity, Unreal, and other engines. The skill covers squash and stretch for impact frames, anticipation for wind-up and charge cues, follow-through for capes and hair, and hit-stop for combat feedback across characters, HUD elements, and player response loops. Its quick-reference tables tie each principle to concrete engine patterns such as procedural versus keyframed animation and camera staging for readability. Use game-development when implementing movement, combat feedback, or UI motion and you want principled game feel instead of arbitrary tween values.422installs22Presentationspresentations is a motion design skill for Claude Code that adapts Disney's 12 animation principles to slide decks built in Keynote, PowerPoint, and Google Slides. The skill maps each principle to presentation techniques such as elastic scaling for emphasis, pre-reveal anticipation builds, staggered element entrances, and slow-in/slow-out easing for readable transitions. It helps developers and technical presenters structure pitch flows and narrative screens where motion reinforces story beats instead of distracting from content. Use presentations when creating or refining deck animations for product launches, investor pitches, or conference talks that need purposeful, audience-oriented motion.421installs23Healthcare Medicalhealthcare-medical is a Claude Code skill from dylantarre/animation-principles that adapts Disney's 12 animation principles for medical apps, patient portals, telehealth, and health tracking interfaces. The skill prioritizes calming, trustworthy motion: minimal playful squash on health metrics, gentle expand-contract for guided breathing exercises, subtle heart-rate pulse matching real rhythm, and thoughtful anticipation pauses before revealing sensitive test results. Developers reach for it when designing animations for medical apps where errors, distraction, or flashy effects can harm trust or patient safety. Appointment booking gets brief preparation before confirmation; test results use deliberate pacing to reduce anxiety. Use healthcare-medical when building clinical dashboards, patient-facing portals, or device UIs that need accessible, low-distraction motion grounded in established animation principles.416installs24Lottie Bodymovinlottie-bodymovin is a frontend animation skill from dylantarre/animation-principles that maps Disney's 12 animation principles—squash and stretch, anticipation, staging, and more—to Lottie (Bodymovin) workflows. It documents After Effects composition frame ranges, scale expressions, and runtime JavaScript controls such as lottie.setSpeed for timing adjustments. Developers reach for lottie-bodymovin when integrating designer-authored vector animations for icons, loaders, onboarding stories, and marketing moments in React, React Native, or web apps. The skill bridges motion design exports and production playback APIs so engineers can ship polished micro-interactions without rebuilding animations in code. It assumes Bodymovin-compatible AE layers and focuses on principle-driven motion quality rather than generic Lottie installation steps.416installs25Elegance Sophisticationelegance-sophistication is a Dylan Tarre animation-principles agent skill for creating luxury-grade UI motion using Disney animation principles adapted to web interfaces. Elegance means motion noticed for quality, not quantity—restrained timing between 300–500ms, squash and stretch limited to 0–5%, and anticipation held to 100–150ms. The skill maps all 12 Disney principles to sophistication constraints: extended ease-in-out curves like cubic-bezier(0.4, 0, 0.2, 1), graceful follow-through without bounce, sweeping arcs, and minimal secondary action. Developers reach for elegance-sophistication when building luxury brand sites, fashion, jewelry, executive dashboards, fine dining, or boutique hotel experiences where white space and calm pacing signal quality. It provides a timing table for fades, slides, scales, and reveals, three CSS custom-property easing tokens, and an elegant-reveal keyframe example at 500ms. Design principles emphasize that every animation must earn its place and restraint demonstrates mastery.393installs26Creative Directorcreative-director is a dylantarre/animation-principles role skill for setting animation vision before implementation begins. The SKILL.md walks all 12 Disney principles—squash and stretch, anticipation, staging, follow-through, easing, arcs, secondary action, timing, exaggeration, solid drawing, and appeal—with creative-direction prompts and vision questions for each. It covers leadership responsibilities including motion mood boards, review checkpoints, do/don't reference guides, team guidance, and stakeholder communication that defends craft time. A four-item review checklist asks whether motion matches the established language, serves user needs, meets craft standards, and merits the director's name. Developers and design leads reach for creative-director when motion feels inconsistent across screens, before picking GSAP, Framer Motion, Rive, or Lottie implementations, or when a product needs a shared motion spec engineers can follow.384installs27Travel Hospitalitytravel-hospitality is a Design & UI/UX skill from dylantarre/animation-principles that applies Disney's 12 animation principles to travel booking, hospitality apps, tourism platforms, and vacation planning experiences. The skill maps principles to concrete UI patterns such as satisfying booking-button squash, bouncing map pins, airplane stretch during flight animations, search-button anticipation before results, and dramatic booking-confirmation pauses. Developers reach for travel-hospitality when frontend motion must inspire wanderlust and reduce checkout anxiety across search, gallery browsing, map interaction, and itinerary selection flows in travel products.383installs28Hover Interactionshover-interactions is a UI animation skill from dylantarre/animation-principles focused on mouse hover effects for buttons, cards, links, and images. It maps Disney's 12 principles—squash and stretch, anticipation, staging, and pose-to-pose transitions—to pointer devices with restrained scale ranges like 1.02–1.05 for card lift. Developers reach for hover-interactions when hover states must preview clicks, highlight interactive elements, and avoid distracting motion on marketing sites or dashboards. The skill defines precise rest and hover poses with smooth transitions so affordances read clearly on desktop without breaking touch-first layouts.382installs29Accessible Motionaccessible-motion is a frontend animation skill from dylantarre/animation-principles that applies Disney's 12 animation principles while ensuring accessibility for users with vestibular disorders, motion sensitivity, and cognitive disabilities. The skill maps each principle to accessible implementations—opacity and color changes instead of squash and stretch, state indication without motion-based anticipation, focus management for staging, and instant state changes where motion would trigger discomfort. Developers reach for accessible-motion when implementing reduced-motion alternatives, vestibular-safe transitions, or WCAG-compliant timing and pause controls in React, Vue, or plain CSS applications before shipping animated UI components.379installs30Dramatic 2000ms Plusdramatic-2000ms-plus is a Design & UI/UX skill from dylantarre/animation-principles for building extended animation sequences over 2000ms where motion is part of the product story. The skill applies Disney principles at dramatic scale, including 40%+ squash and stretch deformation, 400-600ms anticipation build-ups, and full cinematic staging for hero intros and premium onboarding spectacles. Developers reach for dramatic-2000ms-plus when a frontend moment needs brand-defining weight beyond standard UI transitions, while still weighing Core Web Vitals impact and reserving long sequences for scenes where animation carries narrative intent.377installs31Education Learningeducation-learning is a dylantarre/animation-principles skill for educational platforms, e-learning apps, tutoring tools, and skill-building experiences. It maps Disney's 12 principles—squash and stretch, anticipation, staging, and related techniques—to concrete UI patterns such as answer-button feedback, quiz reveals, next-lesson transitions, achievement badges, and submit-answer moments. Developers use it when motion must reinforce comprehension and celebrate progress instead of adding decorative noise in edtech dashboards or lesson players. The skill helps teams balance encouraging micro-interactions with readability for learners navigating quizzes, mascots, and progress states.377installs32Carousels Sliderscarousels-sliders is an animation-principles skill for implementing carousel and slider motion on marketing and product galleries. It maps Disney's 12 principles to horizontal scrolling UI: squash and stretch during fast swipes, 5–10px anticipation shifts before slide changes, staging that centers and emphasizes the active slide, and reduced-motion fallbacks that avoid disorienting autoplay. Developers reach for carousels-sliders when animating carousels, sliders, image galleries, or horizontally scrolling content where smooth navigation and clear hierarchy matter. The skill focuses on motion craft—momentum perception, button depression cues, opacity and scale staging—not carousel library selection. Use it alongside your chosen slider framework when polish, accessibility, and tactile swipe feedback separate production UI from default component behavior.375installs33Data Visualizationdata-visualization is a frontend animation skill from dylantarre/animation-principles that translates Disney's 12 animation principles into concrete patterns for charts, graphs, dashboards, and information displays. The skill prescribes implementations such as bar overshoot for squash and stretch, brief pauses before data loads for anticipation, sequential reveal for staging, and staggered element entry for follow-through. Developers reach for data-visualization when metric transitions, tooltip reveals, or streaming versus snapshot updates need motion that clarifies change rather than distracting from the numbers. The quick-reference table ties each of the 12 principles to a data-viz technique, giving agents actionable guidance during dashboard and reporting UI work.375installs34Physics Intuitionphysics-intuition is an animation-principles skill that trains developers to think like physicists when designing interface motion. The mental model starts with object mass: feathers and bowling balls move differently, and UI elements should communicate weight through squash, stretch, anticipation, and follow-through. physics-intuition covers falling objects, collisions, jumps, and any interaction where believable momentum and easing build user trust. Developers reach for physics-intuition when transitions feel floaty, unresponsive, or mechanically wrong in web CSS, React motion libraries, or native app animations. The skill connects Disney's 12 principles to real-world physics constraints rather than arbitrary duration curves.373installs35Transition Sequencestransition-sequences is an animation-principles skill that applies Disney's 12 animation principles to choreographed multi-step motion across page transitions, onboarding flows, wizard steps, and complex reveals. The skill plans keyframes per step, uses anticipation pauses before motion begins, stages the most important element first or last, and lets each sequence element squash and stretch independently for organic flow. Developers reach for transition-sequences when route changes, panel swaps, or wizard steps feel disjointed and users lose spatial context. The module lives in dylantarre/animation-principles beside loading-states and character-appeal, focusing on linked sequences rather than isolated spinners or character personality. Use it when building React Router transitions, onboarding wizards, or dashboard panel choreography where motion must read as one continuous gesture instead of hard cuts.373installs36Rhythm Pacingrhythm-pacing is a skill from dylantarre/animation-principles that frames UI animation as visual music—beats, measures, crescendos, and rests applied to onboarding flows, modals, page sections, and choreographed sequences. Before animating, the skill asks what the tempo is and where the beats land, favoring patterns like fast-fast-slow and action-rest-action so elements appear in readable order instead of all at once. Developers reach for rhythm-pacing when multi-step UI motion feels chaotic or when dance, action, or comedic timing needs deliberate pacing. It connects Disney timing principles to musical flow for scene composition. Use when animation needs rhythmic composition over time rather than single hero moments.372installs37Notifications Toastsnotifications-toasts is a UI animation skill from dylantarre/animation-principles for toasts, alerts, snackbars, and system messages. It applies Disney's 12 principles so notifications compress on entrance, stage in consistent locations, and contract to 95% scale for 100ms before auto-dismiss to signal departure. Developers reach for notifications-toasts when success or error banners need motion that grabs attention yet stays non-disruptive across dashboards and forms. The skill targets enter, dwell, and exit timing so alerts inform users without shifting layout or obscuring primary tasks.367installs38Figma Prototypingfigma-prototyping is a skill from dylantarre/animation-principles that teaches agents to build motion-rich Figma prototypes using Smart Animate, frame states, and easing timings tied to Disney's 12 animation principles. The published SKILL.md walks through concrete frame setups—for example squash-and-stretch with 100x100 to 120x80 circles over 150ms—and multi-frame anticipation sequences before action states. Developers and designers use it when they need to prototype component states, page transitions, and micro-interactions before choosing CSS, Framer Motion, React Spring, or native transition APIs. It reduces rework by locking motion intent, duration, and easing in Figma rather than debating implementation details in pull requests. The skill is especially useful when handoff must specify frame deltas, interaction triggers, and Smart Animate connections engineers can mirror in code.366installs39Motion Onemotion-one is a frontend animation skill that maps all 12 Disney animation principles to Motion One APIs built on the Web Animations API. Examples include squash-and-stretch with animate scale transforms, anticipation via timeline sequences, and scroll-linked motion for lean sites, browser extensions, and islands. The skill favors the motion package imports such as animate and timeline over heavier animation libraries. Developers reach for motion-one when they want performant, principle-driven UI motion on lightweight pages that cannot absorb GSAP-sized dependencies.362installs40Navigation Menusnavigation-menus is a frontend animation skill from dylantarre/animation-principles for developers animating navigation bars, menus, sidebars, and wayfinding elements. It applies Disney's 12 principles: menu items compress on click, hamburger icon lines squash during X transformation, dropdown triggers anticipate with lift or highlight, and active items stay visually staged above page content. The skill covers drawers, mega-menus, tabs, and mobile hamburger flows with staggered reveals and accessible motion. Use it when navigation transitions feel abrupt or confusing. Reach for navigation-menus when polishing site or app shells—not single buttons, which buttons-ctas covers.360installs41Character Appealcharacter-appeal is an animation-principles skill that teaches developers to evaluate character likability, clarity, and personality before animating or shipping game, mascot, or narrative UI figures. The skill frames appeal as magnetic presence—not prettiness—asking why anyone would want to watch or follow a character, whether hero, villain, or sidekick. It guides silhouette, expression, movement intent, and empathy cues so figures demand attention and feel uniquely themselves in dashboards, onboarding mascots, or game casts. Developers reach for character-appeal when a protagonist, villain, or brand mascot feels flat, generic, or hard to read at a glance. The skill pairs with sibling animation-principles modules for loading states and transition sequences but stays focused on casting-level personality rather than timing curves or route choreography.359installs42Loading Statesloading-states is an animation-principles skill that applies Disney's 12 animation principles to spinners, progress bars, skeleton screens, and shimmer effects while dashboards, searches, and saves wait on network responses. The skill prescribes immediate loading feedback on action, skeleton layouts that match final content staging, and subtle squash-and-stretch pulse on progress indicators around 0.98–1.02 scale so waits feel alive rather than frozen. Developers reach for loading-states when users anxiety spikes during slow API calls or blank panels before data arrives. The module sits in the dylantarre/animation-principles repo alongside character-appeal and transition-sequences, giving concrete motion guidance instead of generic spinner placement advice. Use it when implementing React, Vue, or mobile loading UI where perceived performance and spatial staging matter as much as raw latency.359installs43Rive Animationsrive-animations is a Claude Code agent skill from dylantarre/animation-principles that teaches developers to implement all 12 Disney animation principles using Rive state machines and interactive vector animations. The skill documents Rive Editor workflows—bones for squash and stretch with inverse scaleX and scaleY keyframes, Idle to Anticipate to Action state machine transitions, and JavaScript runtime triggers such as rive.play and stateMachineInputs from web or mobile frontends. Developers reach for rive-animations when loaders, icons, or UI chrome need lightweight interactive motion with runtime control instead of heavy video or frame sequences. The skill pairs principle-by-principle guidance with concrete Rive setup steps and code snippets for React and hybrid mobile targets. Use it while integrating @rive-app runtime packages and tuning performance for production UI.359installs44Buttons Ctasbuttons-ctas is a frontend animation skill from dylantarre/animation-principles for developers animating buttons, CTAs, and clickable actions. It maps Disney's 12 principles to practical CSS patterns: squash and stretch via scale(0.95) on press, anticipation with translateY(-2px) hover lift, and staging that keeps primary CTAs visually dominant through size, contrast, and motion emphasis. Use it when interfaces feel flat or unresponsive and micro-interactions need consistent tactile feedback across loading and success states. The skill triggers when animating buttons or action elements in Claude Code or Cursor. Reach for buttons-ctas when improving conversion clarity on web or app CTAs without building a full motion design system from scratch.356installs45Playfulness Funplayfulness-fun is a Claude Code agent skill from dylantarre/animation-principles that guides developers in creating animations that entertain, surprise, and make interactions genuinely enjoyable. The skill maps Disney animation principles to playful UI motion—generous squash and stretch at 25-40% exaggeration, rubbery cartoon physics, and anticipation wind-ups of 150-250ms for comic timing. Developers reach for playfulness-fun when a product needs brand personality through bouncy easing, surprise micro-rewards, playful hover states, and lighthearted feedback on buttons, loaders, and empty states. The skill warns against sacrificing usability for gimmicks, favoring motion that invites interaction rather than distracts. Use it while implementing CSS, JavaScript, or motion-library transitions where the emotional goal is whimsy and engagement.355installs46Fintech Bankingfintech-banking is an animation-principles skill for financial product interfaces where motion must reinforce trust instead of playfulness. The guidance adapts all 12 Disney principles—squash and stretch, anticipation, staging, follow-through, and others—to banking-specific patterns such as restrained number counters, brief pauses before transaction processing, balance reveal timing, and security-checkpoint emphasis. Developers reach for fintech-banking when animating payment confirmations, investment dashboards, or account management UIs where flashy motion would undermine perceived security. The skill prioritizes gravitas, predictable feedback, and compliance-friendly subtlety over decorative transitions.354installs47Frontend Developerfrontend-developer is a dylantarre/animation-principles guide for coding UI motion with performance, accessibility, and maintainable components. It translates Disney's 12 principles—such as squash and stretch via transform scale, anticipation states before actions, and elastic feedback—into practical web and mobile patterns. Developers reach for frontend-developer when implementing animations in code, building UI transitions, or needing concrete guidance instead of abstract design theory. The skill triggers on animation implementation tasks and favors transform-based motion over layout-thrashing properties for production applications.354installs48Gesture Responsesgesture-responses is a design skill from dylantarre/animation-principles that applies Disney's 12 principles to direct manipulation UI. It specifies scale ranges for press states (0.95–0.97 squash), ripple expansion from tap points, immediate anticipation on press, and pose-to-pose transitions between rest, pressed, and released states. Developers use gesture-responses when building mobile apps, tablet interfaces, or trackpad-driven web UIs where drag feedback, swipe responses, long-press cues, and tap ripples must confirm intent without adding perceptible delay. The skill emphasizes physics-respecting motion that originates from the interaction point and stays responsive across touch and pointer input modalities.352installs49Gaming Entertainmentgaming-entertainment is a design skill from dylantarre/animation-principles that maps Disney's 12 principles—squash and stretch, anticipation, staging, and more—to game and entertainment interfaces. It prescribes concrete motion patterns for button presses, achievement unlocks, loot-box reveals, play-button wind-ups, and level-start countdowns so reward loops feel responsive and emotionally engaging. Developers reach for gaming-entertainment when building gaming apps, streaming platforms, entertainment portals, or interactive media where menus, badges, and character UI must feel energetic while staying readable on constrained devices. The skill emphasizes performance-aware motion choices so flashy feedback does not tank frame rates or obscure critical HUD information.351installs50Brand Marketingbrand-marketing is a skill from dylantarre/animation-principles that maps Disney's 12 animation principles—squash and stretch, anticipation, staging, follow-through, and more—to commercial motion for ads, logo reveals, and product-led growth UI. The quick-reference table ties each principle to brand implementations like product bounce, reveal suspense, hero-shot staging, and overlapping logo settles. Developers reach for brand-marketing when building launch hero animations, promo loops, or shareable UI moments that must reinforce brand story rather than feel generic. Use it alongside CSS, Framer Motion, or Remotion work when motion needs deliberate marketing impact. Trigger when the task mentions brand identity animation, commercials, or advertising motion content.350installs51Accessibility AdvocateAccessibility-advocate equips agents to argue for and enforce inclusive animation choices, including reduced motion, safe timing, readable focus behavior, and WCAG-aligned interaction patterns during UI review.348installs52Icons Badgesicons-badges is an animation skill from dylantarre/animation-principles focused on small UI elements—icons, badges, avatars, and status indicators. The skill maps Disney's 12 animation principles to practical micro-interactions: squash and stretch on likes, anticipation before bell rings, staging for active icons, and bounce patterns for notification counts. Developers reach for icons-badges when static icons feel lifeless but full-page motion would harm usability. It gives timing, easing, and scale recipes—such as 50ms anticipation scales—that agents can translate into CSS, Framer Motion, or React Spring implementations.345installs53Modals DialogsModal and dialog animation principles: coordinated backdrop and content timing, scale/fade choreography, mobile sheet behavior, and symmetric dismiss motion so overlays feel intentional and easy to parse.344installs54Ux ResearcherPositions the ux-researcher skill within animation-principles to study how users interpret animated transitions and micro-interactions, producing research-backed recommendations on when motion clarifies tasks versus when it distracts or slows completion.341installs55Joy DelightTeaches how to embed joy and delight into product UI through motion that rewards completion, reduces anxiety, and humanizes otherwise transactional flows. Balances whimsy with task focus, defines when delight helps versus harms, and pairs animation choices with tone, frequency caps, and accessibility so premium feel does not sacrifice performance or trust.339installs56Micro 100 200msGuides engineers to keep micro-interactions between 100 and 200 milliseconds so UI feedback feels snappy without disappearing too fast. Covers when shorter or longer durations hurt usability and how to standardize timing across a design system.339installs57Spatial Thinkingspatial-thinking is a Design & UI/UX agent skill from dylantarre/animation-principles that teaches a sculptor-in-time mental model for UI motion. Before animating, the skill asks where elements live in 3D space and how they move through it across time—treating animation as four dimensions: depth, width, height, plus time. It applies when motion involves perspective, volume, camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships on a 2D screen. Developers reach for spatial-thinking when CSS transforms, Framer Motion sequences, or page transitions feel flat, disorienting, or physically inconsistent. The skill encodes Disney-inspired spatial discipline into concrete layout and motion decisions rather than generic easing tweaks.339installs58Attention DirectionApplies attention-direction principles so interface motion deliberately guides users toward priority actions—using timing, trajectory, and emphasis to clarify what changed and what to do next in SaaS, mobile, and ecommerce UIs.338installs59Universal Emotionuniversal-emotion is a Design & UI/UX agent skill from dylantarre/animation-principles that systematizes emotional outcomes in interface animation. It provides a framework for mapping Disney's 12 principles to any emotional goal through systematic analysis across energy, valence, arousal, and dominance spectrums. Developers define a target emotion, then translate that intent into specific motion parameters rather than guessing easing curves. The skill fits toast notifications, form validation feedback, loading states, onboarding delight moments, and urgency cues that must read clearly across cultures and accessibility contexts. universal-emotion bridges product intent and concrete animation specs so motion communicates feeling consistently in production UI.337installs60Calm RelaxationFocuses on calm and relaxation in UI animation: gentle timing, soft easing, muted amplitude, and breathing-room transitions that lower cognitive load and support wellness, reading, or long-session productivity experiences.335installs61Enterprise B2bProvides animation principles tuned for enterprise B2B software: understated timing, functional feedback, and stability-first motion that supports complex dashboards and workflows without consumer-style flair.334installs62React SpringCovers implementing interface animation in React with react-spring, including hooks, animated elements, and spring configurations. Guides developers through layout transitions, modals, and list motion while keeping updates declarative and performant.334installs63Entrance AnimationsCovers patterns for introducing UI elements on first paint or mount—fade, slide, scale, and stagger—so layouts feel intentional and guided while respecting performance budgets, focus order, and users who prefer reduced motion.333installs64Performance OptimizationTeaches how to diagnose and fix animation performance bottlenecks in web and mobile UIs. Emphasizes compositor-only properties, requestAnimationFrame discipline, lazy activation, debounced scroll handlers, and accessibility-safe reduced-motion paths without sacrificing perceived quality.333installs65Brand ConsistencyEnsures UI animation reflects consistent brand identity by standardizing easing, duration, and motion personality across components and pages—helping SaaS, ecommerce, and content products feel cohesive rather than stitched from unrelated micro-interactions.332installs66Solid Drawing MasteryApplies the solid drawing principle to interface animation so elements retain weight, depth, and believable form during movement. Covers transform origins, perspective parents, arc-based paths, and spatial consistency for SaaS components, mobile gestures, and game-like UI depth effects.332installs67Appeal MasteryFocuses on mastering the appeal animation principle for designing engaging characters, mascots, icons, and UI personalities with strong silhouettes, expressive proportions, and emotional resonance that attract users across products and games.331installs68Attention GrabbersShows how to use motion as an attention grabber in interfaces: timed emphasis, stagger, contrast, and focal animation that surfaces the right element at the right moment without cheap distraction or motion sickness.331installs69Naturalistic MotionSkill from dylantarre/animation-principles for naturalistic-motion: guides developers and designers applying believable motion—timing curves, overlap, drag physics, and staged transitions—to product interfaces so interactions feel intentional, premium, and consistent across components and pages.330installs70Arc MasteryApplies the arc animation principle to digital UI: curved motion paths for elements entering, exiting, or being manipulated so movement reads organic, guided, and physically plausible instead of robotic.329installs71Animator TraditionalThe animator-traditional skill brings classical animation craft to Claude: keyframe planning, spacing charts, arcs, and performance beats rooted in hand-drawn tradition, then adapts them for sprites, SVG, and rigged pipelines so digital characters and illustrations move with weight and personality.326installs72Anticipation PayoffTeaches how to land anticipation with a clear payoff: the rewarding second beat after priming, including follow-through, overshoot, settle, and state confirmation so interactions feel complete and credible.326installs73Staging MasteryCovers staging mastery: directing attention through deliberate composition, timing order, and visual hierarchy so animated interfaces communicate intent clearly and avoid chaotic competing motion.326installs74Timing MasteryTeaches mastery of animation timing: how delays, staggers, durations, and easing curves work together to guide attention and communicate hierarchy. Provides practical rules for making multi-step UI motion feel coordinated rather than chaotic.326installs75Attention ManagementCovers attention-management tactics that keep animated interfaces readable—sequencing transitions, capping concurrent motion, and prioritizing primary tasks so dense SaaS, agent, and mobile experiences do not feel chaotic or distracting.325installs76Excitement EnergyTeaches how to inject excitement and energy into UI through purposeful motion—springs, celebrations, and upbeat pacing for wins and milestones—while keeping game, mobile, and SaaS experiences legible and purposeful rather than gratuitously flashy.325installs77Forms InputsCovers motion patterns for forms and inputs—including validation reveals, focus transitions, and submit states—so agents build clearer, accessible data entry experiences with minimal distraction and stable layouts.325installs78Social MediaFocuses animation craft on social distribution needs: punchy openers, seamless loops, readable overlays, and format variants for reels, stories, and ads. Helps agents tailor motion length, branding, and compression for growth campaigns across content products and promotional SaaS launches.325installs79Cards ContainersCovers cards and containers animation patterns: staggered grid reveals, hover elevation, expand-collapse choreography, and layout-preserving transitions that keep structured content scannable while adding premium motion polish.324installs80Squash Stretch MasteryTeaches mastery of squash-and-stretch, a core animation principle that preserves perceived volume while deforming shapes to communicate weight, impact, and elasticity in digital interfaces.324installs81Urgency ActionSkill from dylantarre/animation-principles for applying the urgency-action animation principle to web and app UI: when to accelerate motion, how to direct attention to primary actions, and how to keep transitions purposeful across SaaS, mobile, and content surfaces.324installs82Animation Principles Universal ReferenceServes as a universal reference compendium of core animation principles for fast lookup during design and implementation, helping teams maintain consistent motion vocabulary and quality checks across web, mobile, and illustrative work.323installs83Brand StrategistActs as a brand strategist for interface motion: translating positioning, tone, and audience expectations into animation principles, constraints, and a coherent motion language that product and marketing surfaces can share.323installs84Slow In Out MasteryTeaches slow-in slow-out easing mastery: start and end transitions gently, tune cubic-bezier or spring parameters, and eliminate linear mechanical motion. Agents apply consistent curves across buttons, modals, and list items so SaaS and mobile UIs feel polished, physical, and trustworthy rather than abrupt or floaty.321installs85Accordions DropdownsApplies animation principles to accordions and dropdowns—defining easing, duration, stagger, and accessible open/close behavior so collapsible UI feels responsive, readable, and consistent across frameworks.319installs86Animation Principles ExpertDelivers expert-level animation principles guidance for sophisticated motion systems, choreographed UI sequences, and performance-conscious implementations where professional animation judgment separates polished products from generic transitions.319installs87Anticipation MasteryGuides engineers and designers to master anticipation in interface motion: subtle pre-movement, scale, opacity, or offset shifts that telegraph the next UI state before the main transition executes.319installs88Loaders SpinnersCovers principles for loaders and spinners that make waiting understandable and calm. Compares indeterminate spinners, determinate bars, and skeleton screens; defines loop cadence, size, and placement; and ties motion to real async milestones so users know work is happening, layouts stay stable, and reduced-motion users still receive clear status.319installs89Timing Principle MasteryProvides deep mastery of the animation timing principle—how spacing, rhythm, and pacing convey weight, emotion, and priority—so builders choreograph entrances, emphasis, and transitions with professional motion craft.319installs90Universal PatternsDocuments universal animation patterns from the animation-principles skill set so frontend builders implement repeatable transitions—entrances, exits, feedback loops, and loading states—with consistent timing, easing, and semantic intent.319installs91Animation Principles Teaching OthersTeaches how to explain core animation principles to collaborators and coding agents, turning subjective motion opinions into shared standards, examples, and review language for SaaS, mobile, and content products.318installs92Power ConfidenceCovers animation techniques that project power and confidence in product interfaces. Focuses on strong anticipation, minimal hesitation, grounded motion arcs, and typography or button treatments that feel authoritative for SaaS, mobile, and ecommerce conversion surfaces.318installs93Animation Principles MasterThe animation-principles master skill elevates Claude to architect full motion systems: unified timing language, narrative page flows, advanced Disney principles, and cross-component choreography that makes SaaS, games, or editorial sites feel cinematic yet performant and accessible.317installs94Animation Principles Quick StartAnimation principles quick start provides a fast, opinionated motion starter kit for prototypes and MVPs, emphasizing clear state changes, lightweight transitions, and demo-ready polish without deep animation tooling.317installs95Implementation DebuggingPractical debugging playbook for animation implementation failures: how to reproduce stutter, incorrect timing, z-index clashes, and framework-specific motion bugs, then narrow root cause and patch frontend code confidently.317installs96Orchestrated SequencesGuides agents through orchestrating complex UI animation sequences using staging, timing offsets, and coordinated motion across multiple elements. Covers planning scene beats, chaining micro-interactions, avoiding visual chaos, and aligning motion with user attention for polished SaaS, mobile, and content experiences.317installs97Timing CalibrationFocuses on calibrating animation timing—durations, delays, stagger, and easing—so interface motion feels intentional, readable, and performant across buttons, transitions, and feedback states in production UIs.317installs98Lists GridsAnimation guidance for lists and grids: staggered item appearance, smooth filtering and sorting, reorder feedback, and performance-safe transitions so dense collections feel orderly rather than chaotic or laggy.316installs99PopmotionDocuments how to build interface motion with the Popmotion library using springs, tweens, and composable actions. Helps frontend developers replace brittle custom animation loops with predictable, physics-based movement in web applications.316installs100Emotional DisconnectHelps agents spot and correct animations that emotionally disconnect from message, severity, or brand voice—such as playful motion on failures—so interface feedback feels coherent, respectful, and trustworthy.315installs101Responsive AdaptiveTeaches responsive-adaptive animation: scale durations and complexity by viewport, prefer subtle motion on small screens, and align transform origins with layout shifts. Helps agents avoid desktop-only flourishes that feel sluggish or broken on mobile while preserving brand polish across SaaS dashboards and marketing sites.315installs102Technical ConstraintsGuides technical constraints for web and app animation: performance budgets, accessibility preferences, compositor limits, hydration safety, and device tiers so motion stays smooth and inclusive.315installs103Animation Principles RefresherAnimation principles refresher reorients practitioners on essential UI motion heuristics—timing, easing, hierarchy, and accessibility—so returning frontend work stays consistent, inclusive, and aligned with product polish goals.314installs104Continuous InfiniteGuides implementation of never-ending ambient UI motion—background gradients, subtle drift, and decorative loops—using performant keyframes and transforms so motion feels alive without jank, layout shift, or excessive repaint cost during long user sessions.314installs105Continuous LoopsTeaches how to craft repeating UI animation cycles—spinners, pulses, and auto-playing sequences—with invisible loop boundaries, tuned easing, and controllable timing so motion feels continuous rather than abruptly snapping back to frame zero on every iteration.314installs106Problem DiagnosisProvides a disciplined workflow for finding why UI animations fail in production. Agents learn to reproduce issues, inspect compositor and layout timelines, separate CSS from JS drivers, check reduced-motion overrides, and document fixes to prevent recurring motion defects.314installs107State ChangesGuides animating UI state changes across loading, success, error, empty, and disabled modes so transitions explain system status. Covers skeleton handoffs, checkmark confirmations, shake or fade errors, and content swaps that reduce cognitive load in dashboards, forms, and agent-facing tools connected to APIs.314installs108Universal IndustrySurfaces universal animation industry knowledge from dylantarre/animation-principles so designers and engineers share a common motion vocabulary grounded in professional standards instead of ad hoc decorative effects.314installs109Exit AnimationsDefines how UI elements leave the screen—fade, collapse, slide-out, and scale-away—coordinating unmount timing and layout so dismissals feel deliberate, maintain spatial context, and avoid jarring reflow when items are removed.313installs110Large 500 800msSpecifies animation timing principles for large interface elements that need longer durations than icons or buttons. Explains why 500–800ms keeps big moves legible, how to combine transforms and fades, when to stagger nested content, and how to prevent heavy transitions from feeling slow or blocking input on modals, drawers, and full-section reveals.313installs111Medium 300 500msMedium 300–500ms animation timing rules: appropriate use for panel slides, expand/collapse, and cross-state transitions, plus easing choices that communicate cause-and-effect without slowing routine tasks.313installs112Straight Ahead Pose MasteryTeaches mastery of straight-ahead versus pose-to-pose animation methods from classic principles, helping builders select and execute the right motion authoring workflow for web and product UI animations.313installs113User Feedback ClarityFocuses the animation-principles library on user-feedback clarity: selecting motion that confirms submissions, highlights validation, signals progress, and prevents doubt during async operations without sacrificing speed or accessibility.313installs114Animation Principles Absolute BeginnerAnimation principles absolute beginner teaches first-time implementers core UI motion fundamentals—timing, easing, hierarchy, and feedback—so frontend work stays purposeful, readable, and easy to extend later.312installs115Animation Principles Deep DiveOffers an in-depth exploration of foundational animation principles—timing, spacing, staging, arcs, and follow-through—tailored for applying Disney-inspired motion craft to modern web UI, product micro-interactions, and marketing animations.312installs116Animation Principles TroubleshootingGuides systematic diagnosis of broken, janky, or inaccessible UI animations in live apps—covering performance bottlenecks, keyframe conflicts, layout shift, and prefers-reduced-motion failures across web and extension surfaces.312installs117Comfort SafetyApplies comfort-and-safety animation rules so shipped interfaces respect reduced motion, avoid vestibular and seizure risks, and provide calm fallbacks—critical for accessible SaaS, mobile, and extension releases subject to compliance review.312installs118Friendliness ApproachabilityFrom dylantarre/animation-principles, teaches how to use animation timing, easing, and feedback patterns that make digital products feel friendly and approachable rather than cold, stiff, or intimidating to new users.312installs119Professionalism CredibilityExplains how animation choices affect perceived professionalism and trust on marketing and product surfaces. Helps teams avoid flashy motion that undermines credibility and adopt restrained, intentional transitions that reinforce brand quality.312installs120Animation Principles IntermediateThe animation-principles intermediate skill bridges theory and UI work: it guides Claude to choreograph multi-element transitions, apply Disney-inspired staging and follow-through, and keep motion purposeful so interfaces communicate state changes clearly without overwhelming users.311installs121Animation Principles NoviceTeaches novice-level animation principles for digital products: timing, easing, visual hierarchy, and purposeful motion so agents can add clear, polished micro-interactions during frontend and content UI work.311installs122Product ManagerFrames animation decisions for product managers: when motion improves comprehension versus when it is decoration, how to prioritize by user impact, and how to scope motion work so teams ship credible UX without endless polish cycles.311installs123Small 200 300msSpecifies small 200–300ms animation windows for everyday UI feedback: hovers, presses, toggles, and badge updates. Keeps SaaS, extension, and mobile interfaces responsive while still communicating state change, preventing both sluggish interactions and sub-perceptual cuts that confuse users.311installs124Trust ReliabilityFocuses on trust and reliability in motion design: animations must accurately reflect system status, avoid deceptive feedback, and maintain consistent behavior so users feel confident during waits and errors.311installs125Universal ElementsCatalogs universal UI elements and their recommended animation treatments—modals, drawers, buttons, loaders, and page transitions. Helps teams apply consistent motion vocabulary so interfaces feel cohesive and users learn interaction patterns quickly.311installs126Universal ToolExplains how to apply core animation principles as a universal toolkit across design and development environments—Figma, CSS, motion libraries, and agent workflows—keeping timing, easing, and sequence quality consistent end to end.311installs127Animation Principles AdvancedAnimation principles advanced covers choreographed transitions, spatial continuity, physics-based easing, and performance-conscious motion architecture for teams shipping premium, systematized interface animation.310installs128Exaggeration MasteryDeepens exaggeration beyond basic emphasis into a coherent motion personality—balancing spectacle with usability—so branded hero moments, celebrations, and transitions feel memorable yet controlled across marketing and product surfaces.310installs129Follow Through OverlappingImplements classic follow-through and overlapping action for UI—staggering child elements behind parent motion, adding elastic settle, and layering timing offsets—so transitions feel organic, weighted, and premium rather than mechanically synchronized.310installs130Deliberate 1200 2000msDefines a deliberate 1200–2000 millisecond timing band for animations that teach, orient, or narrate, helping agents avoid snappy motion when users must read and understand new interface context.309installs131Feedback IndicatorsFocuses on motion that confirms user input—button presses, loading states, success checkmarks, and error shakes—so every interaction communicates outcome immediately, reinforcing affordance and reducing uncertainty during forms and commerce flows.309installs132Universal PractitionerTrains a universal animation practitioner mindset: applying foundational motion principles across web and mobile products with repeatable critique habits, shared vocabulary, and consistent craft from prototype through polish.309installs133Exaggerated ClarityApplies animation exaggeration as a clarity tool—amplifying distance, timing, and emphasis so users instantly grasp what changed, which element is active, and what action succeeded, especially on information-dense or mobile interfaces.308installs134Secondary Action MasteryTeaches mastery of Disney-style secondary action for digital UI. Guides agents to add supportive motion—trailing elements, ambient shifts, and reactive details—that amplifies primary interactions in SaaS tools, content readers, and mobile flows without visual clutter.308installs135Universal FallbackDefines universal fallback strategies for animation: when advanced motion is unavailable, interfaces still communicate change through safe opacity, transform, or instant state transitions without broken UX.308installs136Universal SolutionsDelivers universal animation solutions: proven, reusable motion patterns for emphasis, feedback, navigation, and state change that scale across products while staying on-brand and easy to implement.308installs137Instant 0 100msTiming principles for instant 0–100ms UI feedback: when to use near-immediate transitions for presses, hovers, and toggles, which properties to animate, and how to keep micro-interactions crisp without visible lag.306installs138Accessibility IssuesAccessibility-issues focuses on finding animation-related accessibility defects in web and mobile UIs, producing reproducible issue reports and remediation guidance for vestibular, cognitive, and assistive-technology risks.304installs139Media PublishingDelivers animation principles for media and publishing sites—article reveals, hero media, reading chrome, and editorial navigation—with motion that elevates storytelling while preserving legibility, speed, and content-first hierarchy.304installs140Ux FrictionFocuses on detecting and easing UX friction through animation-aware prototyping—spotting hesitation, unclear feedback, and jarring transitions early so teams fix motion-related usability issues before full frontend implementation.304installs141Slow 800 1200msDefines when slow 800–1200ms animation is appropriate: large positional changes, full-screen takeovers, and hero entrances where users must follow spatial continuity. Warns against using long durations on repeated micro-interactions and pairs timing with easing so motion feels intentional on marketing and app shell transitions.303installs142Motion SicknessAccessibility-focused motion guidance for motion sickness and vestibular sensitivity: detect reduced-motion preferences, cap parallax and zoom, supply static alternatives, and validate overlays so animated products remain inclusive at ship time.302installs143Universal MindsetTeaches the universal animation mindset from dylantarre/animation-principles, helping teams treat motion as intentional communication that guides attention, confirms actions, and reinforces brand without overwhelming users.302installs144Universal TimingCovers universal timing for digital motion: choosing durations, delays, stagger, and easing so interactions feel snappy or deliberate by intent, maintaining rhythmic consistency across breakpoints and input types.301installs