Animació

remotion-bits

av

Animation components and utilities for Remotion video projects. Use when building Remotion compositions with text animations, gradient transitions, particle effects, 3D scenes, or staggered motion effects. Provides example bits (complete compositions) and reusable components that can be installed via jsrepo.

motion-sv

SikandarJODD

Documentation and patterns for using motion-sv, a Svelte 5 port of Motion (Framer Motion). Use this when the user wants animations, gestures, or transitions in Svelte.

frontend-design

vudovn

Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.

rendering-animate-svg

TheOrcDev

Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.

slack-gif-creator

Prat011

Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y".

Animation Systems

omer-metin

video-motion-graphics

dylantarre

Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.

Animation Principles - Advanced

dylantarre

Use when someone has strong command of animation principles and seeks deeper understanding of subtle applications, edge cases, and stylistic variations

frontend-developer

dylantarre

Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.

product-manager

dylantarre

Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.

3d-spatial

dylantarre

Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.

creative-director

dylantarre

Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.

Animation Principles - Deep Dive

dylantarre

Use when someone needs comprehensive reference material on animation principles with technical depth and extensive context

universal-fallback

dylantarre

Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.

data-visualization

dylantarre

Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.

Animation Principles - Quick Start

dylantarre

Use when someone needs a rapid overview of all 12 animation principles in under 5 minutes

page-transitions

dylantarre

Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.

filmmaker

dylantarre

Use when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative.

accessibility-advocate

dylantarre

Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.

spatial-thinking

dylantarre

Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.

animate

delphi-ai

Animation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components. Based on Emil Kowalski's "Animations on the Web" course.

game-development

dylantarre

Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.

educator-teacher

dylantarre

Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students.

physics-intuition

dylantarre

Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum.