Skip to content

v0.2.0 — The animation engine

Choose a tag to compare

@doodlewind doodlewind released this 13 Jul 15:46
· 272 commits to main since this release
eab3b00

The animation engine. The Tailwind style table learned motion —
read the deep-dive.

  • Baked keyframe timelinestheme.keyframes / theme.animation in
    pocket.config.ts (tailwind.config shape) compile into frame-precise,
    per-property segment timelines inside styles.bin; animate-<name>
    utilities apply them. Full CSS shorthand semantics: comma lists, fills,
    delays, reverse, infinite, cubic-bezier(…) with named easings baked
    to their canonical curves.
  • animate-loop-[Nms] — a style-level loop period that replays a node's
    whole choreography (delays included), the loop plain CSS can't express
    without a remount.
  • 3D transform pipelineperspective-[N] context roots,
    rotate-x/-y-[deg], translate-z-[px]; subtrees compose 3×4 matrices,
    project about the root center and painter-sort into clipped triangles.
  • Arc primitivearc-start/-sweep/-width stroke a round-capped
    annular sector from the background color; all three animatable.
  • TEX_TRI DrawList op — textured triangles in all three backends;
    2D-rotated images un-culled, textures ride 3D surfaces.
  • SVG path bakingcompiler/bake-svg.ts rasterizes <path> data
    (beziers, winding rules, transforms, fill="hole" masks) into pak
    textures.
  • Real-hardware performance (measured on a PSP over PSPLINK): baked-disc
    rounded corners, incremental taffy layout, a radius-capped disc cache and
    a pipelined CPU/GPU frame loop took the busiest demo page from 17.4 ms
    and dropped frames to a locked 60 FPS.
  • Motion Lab demo — four pages of yui540's motion studies ported
    one-to-one; now the homepage hero and the playground default.
  • Tooling: bun psplink rebuilds stale cached PRXs by input mtime.

npm: @pocketjs/framework@0.2.0 · @pocketjs/cli@0.2.0 · full changelog