motion-and-storytelling — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited motion-and-storytelling (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Animation and motion are not decoration — they are communication. When applied with the same discipline as typography or colour, they tell the user what is happening, where to look, and what the product feels like to use. The source material — Disney's 12 principles, cinematic language, comic book conventions — is centuries of accumulated knowledge about how to communicate through movement and sequence.
The key word is subtlety. In UI, motion should be felt, not watched.
Objects compress on impact and extend on acceleration. In UI: a button that scales down slightly on press and springs back communicates physicality and responsiveness.
button:active { transform: scale(0.96); }
button { transition: transform 80ms ease-out; }Use sparingly — reserved for primary CTAs and satisfying confirmations.
A small preparatory movement before the main action. In UI: a menu item shifting slightly before opening, or a loading indicator appearing before a transition begins, prepares the user for what is coming.
Present one idea clearly at a time. In UI: entrance animations should direct attention to the new content, not compete with existing content. When a modal opens, the rest of the page dims — that is staging.
Pose to pose — defining start and end states and letting the system interpolate — is the CSS/JS approach. Define clear initial and final states; let transition or a spring physics library handle the in-between.
Elements don't all stop at the same time. In UI: staggered list item entrances (each item enters 40–60ms after the previous) feel more natural than all items appearing simultaneously.
.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }Nothing in nature starts or stops instantly. Use easing curves, not linear transitions.
| Easing | Use for |
|---|---|
ease-out (fast start, slow end) | Elements entering the screen — feels natural arrival |
ease-in (slow start, fast end) | Elements leaving the screen — feels intentional exit |
ease-in-out | Elements moving between positions on screen |
| Spring physics | Interactive elements that respond to touch/drag |
Never use linear for UI motion — it reads as mechanical and unfinished.
Natural movement follows arcs, not straight lines. Tooltips and popovers that scale from their origin point (rather than fading uniformly) follow this principle. transform-origin matters.
A supporting motion that reinforces the main action. In UI: an icon inside a button that shifts slightly when the button is pressed. A checkmark that draws itself after a form submission. These details reward attention without demanding it.
Duration is meaning. Fast = responsive, energetic. Slow = weighty, important.
| Duration | Use for |
|---|---|
| 80–120ms | Micro-interactions (button press, hover) |
| 150–250ms | Component transitions (dropdown open, tooltip) |
| 250–400ms | Page-level transitions, modal entrance |
| 400–600ms | Hero animations, onboarding sequences |
| > 600ms | Almost always too long — the user is waiting |
A small, deliberate overstatement makes an action feel satisfying. In UI: a success checkmark that overshoots slightly before settling, or a notification badge that pops just slightly larger than its final size. The exaggeration is 10–15%, not theatrical.
Respect the depth and layering of the interface. Elements should move in ways consistent with their perceived layer — a bottom sheet slides up from below because it lives below the content, not from the side. A tooltip appears near its trigger, not across the screen.
The overall motion should feel right for the brand. A playful consumer app can use bouncier, springier motion. A financial tool uses precise, controlled transitions. Appeal is not decoration — it is brand personality expressed through time.
Content that enters the viewport has more impact when it arrives, rather than simply existing. Scroll-triggered entrance animations — a section fading up as the user scrolls into it — borrow from cinematic reveals. The key: the content drives in from a meaningful direction (below, because that's where the user is scrolling from).
@keyframes fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}Background elements moving slower than foreground elements creates depth. In web: a hero background image moving at 50% scroll speed while content moves at 100% creates a sense of layers. Use subtly — aggressive parallax causes motion sickness.
The first frame of a section sets the scene before detail appears. A hero with a strong image and large type, followed by supporting details appearing after a brief delay, is a cinematic opening. The user's eye is directed to the subject before reading begins.
Comics tell stories through a sequence of static frames that imply motion between them. In UI: step indicators, onboarding carousels, and progress flows use the same logic — each "panel" is a moment in a sequence, and the user's eye moves between them.
Emphasis lines, radial gradients, and directional blur suggest motion and energy without actual animation. A button with a subtle directional gradient implies it is pointing somewhere. A loading indicator with trailing opacity implies direction.
In comics, the size, weight, and style of lettering communicates emotion — a shout is set in large bold caps, a whisper in thin small italics. In UI: oversized display type for a hero carries energy; small muted caption text recedes. This is micro-typography as emotional register, not just hierarchy.
In comics, the reader's imagination fills the space between panels. In UI, transitions are the gutter — what happens between states. A smooth transition lets the user's brain construct a coherent mental model. A jarring jump forces them to re-orient.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}width, height, padding, top, left) — they cause reflow. Animate transform and opacity only — they run on the GPU.prefers-reduced-motion disable or reduce all animations?ease-out (enter), ease-in (exit), or ease-in-out (reposition)?transform and opacity animated (not layout properties)?~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.