Skip to content

arikusi/nakkas

v0.3.0 Feature

This release adds 4 notable features for engineering teams evaluating rollout.

Published 17d MCP Developer Tools
✓ No known CVEs patched
Read the diff → Tool health → What is this tool? →

✓ No known CVEs patched in this version

Topics

ai animation css-animation generative-art mcp mcp-server
+4 more
modelcontextprotocol svg typescript vector

Summary

AI summary

Adds multi‑frame filmstrip rendering of CSS animations with layout and contrast audits.

Changes in this release

Feature Medium

Adds configurable frame sampling (2‑10 frames) for CSS animations in render_svg.

Adds configurable frame sampling (2‑10 frames) for CSS animations in render_svg.

Source: llm_adapter@2026-07-16

Confidence: high

Feature Medium

Adds bounding‑box audit that notes overflow in pixels after each render.

Adds bounding‑box audit that notes overflow in pixels after each render.

Source: llm_adapter@2026-07-16

Confidence: high

Feature Medium

Adds WCAG contrast audit for plain hex text fills (3:1 at ≥24px, 4.5:1 below).

Adds WCAG contrast audit for plain hex text fills (3:1 at ≥24px, 4.5:1 below).

Source: llm_adapter@2026-07-16

Confidence: high

Performance Low

Adds 34 new tests, increasing test suite to 370.

Adds 34 new tests, increasing test suite to 370.

Source: llm_adapter@2026-07-16

Confidence: high

Bugfix Medium

Fixes transform shorthand conversion to valid SVG syntax during frame baking.

Fixes transform shorthand conversion to valid SVG syntax during frame baking.

Source: llm_adapter@2026-07-16

Confidence: high

Full changelog

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.

Weekly OSS security release digest.

The CVE patches and breaking changes that affected production tools this week. One email, every Sunday.

No spam, unsubscribe anytime.

Share this release

Track arikusi/nakkas

Get notified when new releases ship.

Sign up free

About arikusi/nakkas

MCP server that turns AI into an SVG artist. One rendering engine with JSON config, AI controls all design parameters. CSS @keyframes + SMIL animations, 16+ element types, parametric curves, filters, gradients, PNG preview.

All releases →

Beta — feedback welcome: [email protected]