Skip to content

v0.3.0

Choose a tag to compare

@arikusi arikusi released this 09 Jul 09:33

The eyes release: the preview stops lying about motion and starts catching layout and readability mistakes.

What changed

  • New output.frames: N (2 to 10): instead of the single t=0 preview, render_svg samples the CSS animations at N points in time and returns one labeled filmstrip image. nakkas evaluates the @Keyframes math itself — duration, delay, iteration count, direction, fill mode, and easing per segment (named curves, cubic-bezier, steps) — and bakes each sampled state into a static frame. Transform animations resolve transform-box: fill-box / transform-origin: center numerically from the element's geometry; elements whose origin cannot be derived keep their base state and say so in a note. SMIL is not sampled and is noted when present.
  • Frame baking rewrites CSS-only transform shorthands to SVG attribute syntax: translateX(a) becomes translate(a, 0), scaleY(a) becomes scale(1, a). Baked verbatim they are invalid in the transform attribute and resvg drops the whole transform, freezing the element. Found by the easing-comparison dogfood on its first frame.
  • Bounding-box audit: after every render the content's real bounding box (from resvg) is compared against the viewport, and anything poking past an edge produces a design note with the exact overflow in pixels.
  • Text contrast audit: text with a plain hex fill is checked against a plain hex canvas background using WCAG contrast ratios (3:1 at 24px and above, 4.5:1 below), with the failing ratio in the note. Gradient and pattern fills are skipped, not guessed.
  • 370 tests (34 new).

Dogfood

Feature-tailored run: an easing comparison card — four balls travelling the same distance in the same 3 seconds under linear, ease-in, ease-out and an overshooting cubic-bezier — rendered as a 5-frame strip. Iteration 1 caught the transform shorthand bug; iterations 2 and 3 show the curves diverging exactly as the math says, including the bezier dipping behind the start line before overshooting the end. Full record with prompt and iteration count in dogfooding.md; strip in assets/easing-frames-2026-07-09.png.