Skill 18 · Hyperframes Animation
Subchapter 18.23
blueprints/comparison-split.mdMarkdown3 KBView on GitHub
intent: Two paired items of equal weight shown side-by-side with mirrored 3D “book-open” tilts — the eye reads them as a balanced comparison, then a pill badge lands at each card’s inner edge to punctuate. The motion IS the symmetry: two cards arriving from opposite wings into a held spread.
roles served
comparison-split-cards): when two complementary features / capabilities of equal weight should be presented simultaneously, not sequentially — an A/B, a “X + Y together,” paired concepts the viewer must weigh side-by-side. Not for >2 items (use grid-card-assemble) or sequential steps.duration: 4–6s
shot structure (a [bg] canvas carrying two faint ambient glow blooms — [accent A] near 30%, [accent B] near 70% — so each side owns a color identity across a 50% symmetry axis; equal-width cards under one shared perspective parent)
[title line] with an [accent keyword] slides DOWN into place from just above (a short smooth settle). The downward arrival is deliberate: it forms a non-conflicting T-shape against the cards, which arrive from the sides next.[left card] from the left, [right card] from the right ~0.2s behind — each carrying a mirrored 3D rotateY tilt (left faces right, right faces left, opening like a book) and scaling ~0.85→1 as it lands. The entry overlaps the title’s tail so the whole thing reads as ONE arrival, not two beats. Each card holds [image / label / subtitle]; box-shadows fall outward from the tilt (left shadow right, right shadow left).[badge] lands at each card’s inner edge (left then right, ~0.3s apart), overlapping its card ~15% so it reads as attached, not orbiting. This is the lone overshoot in the shot — it earns the punctuation. Settles and holds.motion vocabulary: title slide-down from above; mirrored opposite-wing card entry; static book-open rotateY tilt (+tilt left, −tilt right); tilt-matched outward box-shadow; inner-edge badge spring-pop; gentle phase-opposed idle float (left vs right, never synchronized) registered as subtle jitter; dual side-glow ambient.
rule mapping
rotateY tilts + tilt-matched shadow → split-tilt-cards (the signature; keep the two-layer split so the entry x/scale and the idle never collide on one alias)gsap-effects (translate + opacity on a long-tail power3)spring-pop-entrance (overshoot register — earns the punctuation)sine-wave-loop (low-amplitude register — subtle jitter, NOT lazy breathing; left sin(t), right sin(t+π) so they never conveyor-belt)ambient-glow-bloom (un-triggered soft bloom, one per accent)camera modifier: camera-static by default — the symmetry is the subject and a move would break the balance.