Transforms & visual effects

Every node accepts visual transforms. They run after layout, so the box keeps its laid-out size — only the painted pixels change.

Rotation & scale

Photo("./logo.png").rotate(15)        // degrees
Column(...).scale(1.1)                // uniform
Column(...).scale(1.1, 0.9)           // x, y

Translation

Column(...).translateX(8).translateY(-4)

Opacity & blur

Column(...).opacity(0.6)
Column(...).blur(8)            // pixels

Rounded corners & squircle

Column(...).rounded(12)
Column(...).rounded(12, 12, 0, 0)     // top-left, top-right, bottom-right, bottom-left
Column(...).rounded(12).borderSmoothing(0.6)   // squircle (figma-style)

borderSmoothing ranges from 0.0 (sharp CSS-style corners) to 1.0 (full squircle).

The site you are reading globally disables shadows for visual consistency. Sone itself supports .shadow("0 4px 12px rgba(0,0,0,0.15)") on any node — see the API reference for full CSS box-shadow syntax.

Page-break behavior

In multi-page documents, control how a node interacts with page boundaries:

Column(...).pageBreak("before")   // start on a new page
Column(...).pageBreak("avoid")    // try to keep on one page
Column(...).pageBreak("after")    // force a break after this node

See Page break for details.