This one teaches you to compose layouts and scenes around the principle that the eye can only process one focal point at a time. It's built on animation theory but applies directly to UI design, data viz, and presentation work. The silhouette test is the core idea: if your design doesn't read as a clear black shape, the staging fails. You get practical techniques like contrast hierarchies, negative space principles, and motion differentials to control attention. Honestly most useful when you're building something where user focus actually matters, like onboarding flows or dashboard updates where you need to direct attention sequentially rather than dumping everything at once.

skills.sh installs
581
GitHub stars
146
last updated
Aug 21, 2026

Install

$ npx -y skills add dylantarre/animation-principles --skill staging-mastery --agent claude-code

Installs into .claude/skills of the current project.

Files

Staging Mastery

The Clarity Principle

Staging is the presentation of an idea so that it is unmistakably clear. Borrowed from theater, this principle addresses animation's core challenge: the audience has limited time to comprehend each moment. Poor staging creates confusion; masterful staging creates effortless understanding.

Core Theory

One Idea Per Moment: The eye cannot process competing focal points simultaneously. Every frame should have exactly one primary point of interest. Secondary elements support, never compete.

Silhouette Test: An action should be readable in pure silhouette. If the pose isn't clear as a black shape against white, the staging fails. This test remains relevant across all visual media.

The Staging Toolkit

Contrast: Important elements differ from surroundings (size, color, movement, detail level) Isolation: Negative space around focal points Leading lines: Compositional elements pointing toward the subject Depth positioning: Foreground/background separation clarifies spatial relationships Motion differential: Still backgrounds make moving subjects pop; static subjects stand out against motion

Sponsors

Details

Repository
github.com/dylantarre/animation-principles
Category
Design & UI/UX
First seen
Jun 3, 2026

More from dylantarre/animation-principles

All 144
1dylantarre avatargesture-responsesdylantarre/animation-principlesUse when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.579skills.sh installs
2dylantarre avatarentrance-animationsdylantarre/animation-principlesUse when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.572skills.sh installs
3dylantarre avatarattention-grabbersdylantarre/animation-principlesUse when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.565skills.sh installs
4dylantarre avatarloaders-spinnersdylantarre/animation-principlesUse when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status554skills.sh installs
5dylantarre avatarforms-inputsdylantarre/animation-principlesUse when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback553skills.sh installs
6dylantarre avatarsocial-mediadylantarre/animation-principlesUse when designing animations for social platforms, messaging apps, content sharing, or community features551skills.sh installs