v0.2.14

Transforms and filters

• Layers. rotate-*, scale-*, translate-*, skew-*, transform, and the filters (blur-*, grayscale, brightness-*, hue-rotate-*, …, and backdrop-blur-*) work: the element's cells paint into a box of their own that the browser transforms or filters at pixel precision, while the layout stays on the grid, as a transform never moves a box's layout in CSS. origin-* and percentage translates resolve against the element's box, nested transforms compose, and an element resting at an identity (scale-100, rotate-0) returns to the grid.
• The pointer follows. Text selection, word and paragraph gestures, and hover land on the glyph under the pointer through the transform, and a button inside a scaled dialog is clickable where it shows. Selection and copy read the grid, so copied text is the text as laid out.
• Stacking and covering. Layers stack in paint order with z-*, and whatever paints later covers a layer's cells, so a modal's overlay covers a tilted sticker as it covers everything else.
• Clipping after the transform. An overflow-hidden or scrolling ancestor clips the transformed result, as CSS does: a card scaled on hover in a scrolling list is cut at the list's edge, and a drawer sliding in from a shell's edge stays hidden past it.
• Smooth transitions. transition-transform (and transitions of translate, rotate, scale, filter) follow the browser's own easing every frame, with one layout when they settle. A transition starting from the identity — a dialog closing from scale-100, a delayed one — animates from its first frame.

Animations

• CSS animations play. animate-spin, animate-pulse, animate-ping, animate-bounce, and your own @keyframes (enter and exit keyframes included) run on the grid: a transform keyframe moves the element's layer every frame, a color, border-color, or opacity keyframe repaints the cells with no layout in between, and anything else re-lays-out per frame. The value is always the browser's, so timing, easing, delay, direction, fill mode, and iteration count all apply; a paused animation holds its frame, and an ending one lands exactly on its end state.
• Background keyframes read as they are. A background-color keyframe shows the animated color directly, with no synthesized fade on top.

Host

• A <mono-wind> nested inside another is unsupported: the inner one warns once and is laid out as plain content of the outer, where it used to bring the page down.

Playground

• The sample's box keeps a taller minimum height.

Full changelog: v0.2.13...v0.2.14