From 0cebcbd1efe4c33c54beef8813d287269f5ba280 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 21 May 2026 01:29:15 -0700 Subject: [PATCH] skill: add reveal-animation safety rule (must enhance, not gate visibility) Class-triggered visibility transitions pause on hidden tabs and headless renderers. The italian-restaurant smoke produced a build where 2 sections shipped opacity:0 because the CSS transition never advanced past currentTime=0 (timeline paused). Added one-liner under Motion to prevent the antipattern: reveals must enhance an already-visible default, never gate content visibility on a class-triggered transition. Co-Authored-By: Claude Opus 4.7 (1M context) --- skill/SKILL.md | 1 + 1 file changed, 1 insertion(+) diff --git a/skill/SKILL.md b/skill/SKILL.md index 35d153904..32906ff60 100644 --- a/skill/SKILL.md +++ b/skill/SKILL.md @@ -65,6 +65,7 @@ Two hard typographic ceilings you currently miss: - Use libraries for more advanced motion needs (e.g. motion, gsap, anime.js, lenis etc) - Reduced motion is not optional. Every animation needs a `@media (prefers-reduced-motion: reduce)` alternative: typically a crossfade or instant transition. - Sibling stagger on a list (cards, list items) is legitimate. Whole-section fade-on-scroll on every scrolled section is not a list; it's the saturated AI motion reflex. +- Reveal animations must enhance an already-visible default. Don't gate content visibility on a class-triggered transition; transitions pause on hidden tabs and headless renderers, so the reveal never fires and the section ships blank. - Premium motion materials are not just transform/opacity. Blur, backdrop-filter, clip-path, mask, and shadow/glow are part of the palette when they materially improve the effect and stay smooth. #### Interaction