AI CSS Animations

Business Motion Film Kit

Premium SaaS-style commercials that sell a real business outcome: storyboard first, deterministic HTML and GSAP motion with selective three.js, and a critic gauntlet where the builder never grades its own work.

By echris6 @echris6 Sep 27, 2026

Type
skill
Made with
Claude Code
Built in
GSAP
Topics
Product UI · 3D · Explainer

The skill

Make short (15–40s) commercials that look like premium SaaS launch films but sell a real business outcome: explain a service, earn a quote request, follow up on a quote, or refresh an ad. The visuals can be ambitious; the claims must be true.

[…]

## Non-negotiables

1. **Truth.** Never invent testimonials, ratings, completed jobs, diagnoses, savings, warranties or confirmed appointments. A concept film says it is a concept ("Fictional brand · Concept film · AI-generated imagery"). A client film uses the client's approved footage and facts.
2. **Business purpose on mute.** A first-time viewer must be able to say what the business does and what to do next, with the sound off, by the end.
3. **Independent judging.** The builder never grades its own work. Every component and every full cut goes to a fresh critic that sees only the render, the brief and the references (`references/gauntlet.md`).
4. **Deterministic motion.** Every animated state is a pure function of timeline time: no free-running `requestAnimationFrame`, `Date.now()`, unseeded randomness or physics history. Seek to any frame and get the same pixels.
5. **"No bugs" is not "good".** Clean, smooth and error-free versions still get rejected for being basic, empty or slow. Measure (`scripts/`) and judge creatively.

From echris6's repo, under the MIT license.

Similar prompts