factory-animation

Factory animation

Each section leads with Principle (one sentence, stack-agnostic), then Why (constraint → option → tradeoff), then Recipe (the Astro + Remotion shape we use), and Failure mode when there's one to name.

Motion is the most expensive ink on the page. factory-design sets the static vocabulary; this skill governs what's allowed to move on top of it. The default answer is "almost nothing" — and that's a feature.

Attention is a fixed budget per viewport

Principle. Every viewport hands the eye one budget of attention; each moving or high-contrast element draws against it, and decorative motion draws without informing.

Why. The eye doesn't have a separate fund for "tasteful" animation — a shifting gradient and the headline you actually want read are competing for the same fixed pool. Designers reason about each animation in isolation ("this glow is subtle, this loop is slow") and never sum the bill, so a page that's calm element-by-element is noisy in aggregate. The discipline is to treat the budget as scarce: spend it where it informs, and treat every decorative draw as a debit against the thing you wanted seen.

Recipe. Before adding any motion, name what it teaches the viewer. If the honest answer is "it makes the page feel alive," it's a debit with no credit — cut it. Budget one deliberate spend per viewport (next section), not one per component.

Figure/ground discipline — calm the ground, move the figure

Principle. The background is ground — it must recede: flat, low-contrast, static. Contrast and motion belong to the figure.

Why. This is the single highest-leverage rule in the skill, because animated or patterned backgrounds are the most common source of a noisy landing page. A shifting gradient, a drifting grid, a scanline sweep, an ambient glow — each sits behind the content and so competes with every word in front of it, everywhere, all the time. Ground that moves can never recede, so the figure can never read cleanly no matter how good it is. The fix is structural, not cosmetic: flatten the ground to a static low-contrast field and load all the contrast and motion you were tempted to spread around into the one figure that earns it.