ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 06:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(lint): flag text-reflow props in gsap_non_transform_motion

Browse Source 
Extend the rule beyond positional layout props to the text-reflow props
letterSpacing / wordSpacing / fontSize. Animating them reflows text and snaps
glyph positions to the pixel grid, so a slow ease-out tail micro-stutters
exactly like left/top — measured on a real composition, a slow letterSpacing
"settle" rendered 19/30 unique frames vs 30/30 for the transform-driven
motion in the same piece. They have no transform replacement (fix: settle via
scale or hold the value), and the snap happens during browser layout, upstream
of the canvas raster, so they are never html-in-canvas-exempt. width/height
stay excluded (legit animated uses — progress bars, reveals).

Restructure the finding's message/fixHint to compose per category (positional
-> x/y; reflow -> scale/hold; roundProps -> remove) instead of a two-branch
ternary. Skill guidance (gsap-transforms-and-perf.md) broadened: "layout
property" includes reflow; letterSpacing/fontSize named as the settle-trap.

Migrate the one surfaced positive: registry/components/vignette/demo.html
title settle letterSpacing -> a subtle scale settle (render-verified 20/20
unique frames, smooth). Blast radius across the registry was this one comp,
zero false positives.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-06-29 10:36:59 -07:00
co-authored by Claude Opus 4.8
parent 58f7dc1c72
commit 082280e8de
5 changed files with 83 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/vignette/demo.html
Vendored
+6 -3
View File
@@ -181,11 +181,14 @@
tl.to(".haze-near", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.15);
tl.to(".demo-subject", { opacity: 1, scale: 1, duration: 1.0, ease: "power3.out" }, 0.1);
// Title + subtitle settle in.
// Title + subtitle settle in. Settle via scale (transform), not letterSpacing:
// animating letter-spacing reflows text and snaps glyph positions to the pixel
// grid, so a slow ease-out tail micro-stutters. letter-spacing holds at its CSS
// resting value (0.18em); the subtle scale gives the same "settle into place" feel.
tl.fromTo(
".demo-title",
{ opacity: 0, y: 18, letterSpacing: "0.32em" },
{ opacity: 1, y: 0, letterSpacing: "0.18em", duration: 1.0, ease: "power3.out" },
{ opacity: 0, y: 18, scale: 1.04 },
{ opacity: 1, y: 0, scale: 1, duration: 1.0, ease: "power3.out" },
0.6,
);
tl.to(".demo-subtitle", { opacity: 1, duration: 0.8, ease: "power3.out" }, 1.0);