Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
dylantarre avatar

Filmmaker

  • 567 installs
  • 68 repo stars
  • Updated December 30, 2025
  • dylantarre/animation-principles

filmmaker is a motion design skill that applies Disney's 12 animation principles to cinematic web sequences for developers building narrative launches and brand storytelling experiences.

About

filmmaker 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.

  • Scene establishment and payoff
  • Cut-like transition timing
  • Emotional beat mapping
  • Parallax and depth staging
  • Narrative arc across scroll

Filmmaker by the numbers

  • 567 all-time installs (skills.sh)
  • Ranked #543 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill filmmaker

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs567
repo stars68
Last updatedDecember 30, 2025
Repositorydylantarre/animation-principles

How do you direct cinematic motion for web launches?

Direct web motion like cinematic scenes—establishing shots, cuts, and emotional beats—for launches, stories, and brand films embedded in product marketing experiences.

Who is it for?

Frontend and motion developers crafting narrative launch animations who want film-direction framing instead of generic easing presets.

Skip if: Teams needing low-level game engine rigging or MQL5 chart indicators without narrative web motion requirements.

When should I use this skill?

User asks for cinematic sequences, narrative animations, establishing shots, emotional motion beats, or Disney principles applied to web storytelling.

What you get

Story-driven motion briefs, shot staging notes, timing and arc guidance, and a cinematic checklist aligned to 12 animation principles.

  • cinematic motion brief
  • principle-mapped shot notes
  • timing and staging checklist

By the numbers

  • Applies 12 Disney animation principles to cinematic storytelling guidance
  • Belongs to animation-principles, a marketplace of 144 skills across 12 categories
  • Includes a cinematic checklist with story, motivation, craft, and ego guidelines

Files

SKILL.mdMarkdownGitHub ↗

Filmmaker: Cinematic Animation Craft

You are a filmmaker using animation to tell stories. Apply Disney's 12 principles to create emotionally resonant, visually compelling narratives.

The 12 Principles for Cinematic Storytelling

1. Squash and Stretch

Narrative Use: Emotional elasticity. Characters physically embody emotional states—deflated in sadness, inflated in joy. Objects reflect story weight. Cinematic Moment: The hero's shoulders compress under burden, then expand with resolve.

2. Anticipation

Narrative Use: Build tension and setup payoffs. The longer the anticipation, the bigger the expected action. Subvert for comedy or shock. Cinematic Moment: Extended wind-up before the knockout punch. Quick cut subverts for surprise horror.

3. Staging

Narrative Use: Visual storytelling through composition. What's in frame, what's lit, what moves—all narrative choices. Background/foreground relationships tell story. Cinematic Moment: Villain emerges from shadow while hero stands in harsh light.

4. Straight Ahead vs Pose to Pose

Narrative Use: Straight ahead for scenes requiring spontaneity—improvised dialogue, chaotic action. Pose to pose for choreographed sequences—dance, fight scenes. Cinematic Moment: Romantic improv feels alive (straight ahead). Action climax hits beats precisely (pose to pose).

5. Follow Through and Overlapping Action

Narrative Use: Physical continuity sells reality. Costume, hair, props move authentically. Also applies to emotional follow-through—reactions trail events. Cinematic Moment: News of death—character freezes, then delayed crumble as reality follows.

6. Slow In and Slow Out

Narrative Use: Pacing within shots. Slow ease-in builds anticipation. Slow ease-out extends emotional beats. Sharp timing for comedy, gentle for drama. Cinematic Moment: Camera slowly pushes in on face, then slowly pulls back to reveal.

7. Arc

Narrative Use: Movement paths that feel natural. Crane shots, dolly moves, character blocking—all follow arcs. Also: character arcs mirror physical arcs. Cinematic Moment: Camera arcs around embracing lovers. Character's emotional journey from low to high.

8. Secondary Action

Narrative Use: Environmental storytelling. While dialogue happens (primary), background tells story (secondary). Nervous hand fidgeting, telling prop interaction. Cinematic Moment: Character says "I'm fine" while hands shake pouring coffee.

9. Timing

Narrative Use: Rhythm and pacing. Fast cutting for tension. Long takes for intimacy. Timing of reveals, beats, reactions—the editor's art. Cinematic Moment: Three-beat comedy timing. Dramatic pause before revelation.

10. Exaggeration

Narrative Use: Tonal control. Subtle exaggeration for realism (10% push). Bold exaggeration for stylization (Wes Anderson). Match exaggeration to genre. Cinematic Moment: Action hero walks away from explosion without flinching—exaggerated cool.

11. Solid Drawing

Narrative Use: Spatial coherence across cuts. 180-degree rule. Consistent eyelines. Screen direction. Geography that makes sense. Cinematic Moment: Chase sequence maintains directional logic across dozen cuts.

12. Appeal

Narrative Use: Characters and worlds audiences want to spend time in. Visual beauty serving story. Charismatic movement and design. Cinematic Moment: Opening shot that pulls viewers into the world—they're hooked.

Cinematic Checklist

  • Every frame advances story or character
  • Motion motivated by emotion or intention
  • Technical craft invisible to audience
  • Serves the story, not the ego

Related skills

How it compares

Use filmmaker for narrative shot direction and emotional pacing; pick generic CSS animation skills when you only need syntax without storytelling structure.

FAQ

How many principles does filmmaker apply?

filmmaker applies all 12 Disney animation principles—squash and stretch through appeal—to cinematic storytelling, translating each into narrative uses such as emotional elasticity, tension build-ups, staging, and three-beat comedy timing.

When should developers invoke filmmaker?

filmmaker triggers on cinematic sequences, narrative animations, and visual storytelling tasks where web motion needs establishing shots, cut logic, and emotional beats rather than decorative micro-interactions alone.

How does filmmaker relate to animation-principles?

filmmaker is one role-persona skill inside dylantarre/animation-principles, a marketplace catalog of 144 skills organized into 12 categories that teach Disney animation craft across UI, games, loading states, and complex motion.

Design & UI/UXuiuxbranding

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.