
emotional-narrative
Use when animation needs to convey feeling, tell a story, or connect emotionally—character moments, dramatic beats, or any motion that should make the audience care.
- Installs
- 625
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/dylantarre/animation-principles --skill emotional-narrative- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads emotional-narrative automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Emotional Narrative
Think like a storyteller who draws. Every movement is a sentence. Every pause is punctuation. You're not animating shapes—you're animating feelings.
Core Mental Model
Before animating anything, ask: What does the audience need to feel right now?
The same walk cycle can convey confidence, defeat, nervousness, or joy. Motion is emotion made visible.
The 12 Principles Through Emotion
Anticipation — The breath before the confession. Anticipation isn't just physical preparation; it's emotional setup. The audience leans in because they sense something is coming.
Staging — Direct the emotional spotlight. What matters most in this moment? Everything else recedes. A character's clenched fist tells the story; the background is just context.
Timing — Emotion lives in duration. A quick glance says curiosity. A lingering look says longing. The same motion, different timing, completely different feeling.
Exaggeration — Amplify truth, not falsehood. A sad character doesn't just frown—their whole body sinks. Exaggeration makes internal states external and readable.
Appeal — Characters must be emotionally accessible. We connect with vulnerability, desire, struggle. Even villains need appeal—we must find them fascinating to watch.
Secondary Action — Supporting emotions. A character says they're fine while their hands fidget. Secondary action can reinforce or contradict primary emotion, adding depth.
Follow Through & Overlapping Action — Emotional momentum. Feelings don't stop on a dime. After a shock, the body keeps processing. After joy, the smile lingers.
Slow In & Slow Out — Emotional transitions. We don't snap from happy to sad. Ease into new emotions. Let the audience travel with the character.
Arcs — Emotional gestures flow. A reaching hand follows a yearning arc. Angular, broken motion reads as distress or mechanical coldness.
Squash & Stretch — Emotional elasticity. Joyful characters feel bouncy. Depressed characters feel heavy and compressed. The body reflects the inner state.
Straight Ahead & Pose to Pose — Spontaneous emotion (straight ahead) vs. crafted emotional beats (pose to pose). Use both. Plan the key emotional moments, discover the transitions.
Solid Drawing — Emotional consistency. A character's design language should support their emotional role. Round shapes comfort; sharp shapes threaten.
Practical Application
When motion feels "empty" or "mechanical":
- Clarify: What is this character feeling?
- Find the gesture that embodies that emotion
- Use timing to give the audience space to feel
- Add subtle secondary actions that reveal inner state
When emotion feels "melodramatic":
- Pull back exaggeration slightly
- Add contradicting secondary action (complexity)
- Trust stillness—sometimes less movement is more feeling
- Check that timing allows breathing room
The Golden Rule
Motion without emotion is just movement. Every frame should serve the story. Ask not "What happens?" but "What does this mean?"
FAQ
What does the emotional-narrative skill do?
Use when animation needs to convey feeling, tell a story, or connect emotionally—character moments, dramatic beats, or any motion that should make the audience care.
How do I install emotional-narrative?
Run npx skills add https://github.com/dylantarre/animation-principles --skill emotional-narrative in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/emotional-narrative/ (personal) or .claude/skills/emotional-narrative/ (project).
Which AI agents can use emotional-narrative?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is emotional-narrative safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains emotional-narrative?
It is published by dylantarre in dylantarre/animation-principles. It has 625 recorded installs.
More from dylantarre/animation-principles
video-motion-graphics
dylantarre/animation-principles
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
mobile-touch
dylantarre/animation-principles
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
framer-motion
dylantarre/animation-principles
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
motion-designer
dylantarre/animation-principles
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
micro-interactions
dylantarre/animation-principles
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
web-motion-design
dylantarre/animation-principles
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.