Cinematic Animation System

What it does

Designs bespoke, brand-specific motion (typography, imagery, interface, scroll, depth) that rejects default AI motion clichés.

When to use it

Use for animation direction, motion audits, cinematic heroes, product reveals, or any Framer Motion, GSAP or Three.js work.

Problems it prevents

Stops sites reaching for orbiting circles, glowing orbs and identical fade-up reveals as an automatic visual answer.

Typical workflow

1. Write the motion brief
2. Derive cues from brand, content and physics
3. Choreograph two or three signature beats
4. Verify performance and reduced-motion behaviour

Example output

A documented motion language (two or three recurring rules plus one signature moment) implemented with a calm reduced-motion fallback.

What's included

1. 01
   The complete prompt

   The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

2. 02
   Install walkthrough

   Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

3. 03
   Use notes

   How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Works well with

• SystemAdvanced Visual Effects

  Implements purposeful premium effects with SVG, masks, Canvas or WebGL, choosing the lightest technique that works.

• FocusedHover & Focus States

  Designs complete interaction feedback across mouse, keyboard, touch, high contrast and reduced motion.

• SystemAuthentic Visual Motion

  Sources and animates truthful real-world visuals without substituting AI-generated imagery for the actual product.