Widgets
/
effects

Blur

Blurs what is behind the object (blurOn: background, frosted glass) or the object's own content (blurOn: object), uniformly or progressively: a progressive blur rises smoothly toward one edge, the way content dissolves under a header or at the end of a list.

Frosted glass

Blur blurs what shows through it from behind (blurOn: background, the default) or its own content (blurOn: object). Its color is a veil over the blur; keep it translucent so the blur shows. The Effects guide covers progressive blur, edges and curves.

LAYR

Stack(
  .config(w: 320, h: 190, clip: true, cornerRadius: 16)
  Container(
    .config(
      w: fill
      h: fill
      color: LinearGradient(.colors(ember, violet, teal))
    )
  )
  Position(
    .config(left: 20, top: 20)
    .obj(Container(.config(size: 70, color: gold, cornerRadius: 999)))
  )
  Position(
    .config(bottom: 56, left: 36, right: 36, top: 56)
    .obj(
      Blur(
        .config(
          w: fill
          h: fill
          color: panel.alpha(40%)
          cornerRadius: 12
          value: 18
        )
        .obj(
          Mid(Text(.config(color: ink, weight: semibold) .obj('Frosted glass')))
        )
      )
    )
  )
)

A progressive fade

type: progressive is clear at one side and strongest at edge, so content dissolves instead of stopping at a line.

LAYR

Stack(
  .config(w: 320, h: 170, clip: true, cornerRadius: 16)
  Column(
    .config(w: fill, gap: 8, padding: all(14))
    Text('Mixing session · Tue 10:30')
    Text('Podcast recording · Thu 14:30')
    Text('Band rehearsal · Fri 09:00')
    Text('Voice-over · Sat 11:00')
    Text('Drum tracking · Sun 16:00')
  )
  Position(
    .config(bottom: 0, left: 0, right: 0)
    .obj(
      Blur(
        .config(
          w: fill
          h: 90
          edge: bottom
          fade: canvas
          type: progressive
          value: 12
        )
      )
    )
  )
)

Config keys

Key	Type	Default	Meaning
`blurOn`	background \| object	`background`	What to blur: what shows through from behind (`background`), or the content inside (`object`).
`type`	uniform \| progressive	`uniform`	Uniform, or progressive (clear at one side, strongest at `edge`).
`value`	len	`12`	Blur radius; for a progressive blur, the radius at `edge`.
`edge`	bottom \| top \| left \| right	`bottom`	Progressive: the side where the blur is strongest.
`extent`	any	`100%`	Progressive: how far from `edge` the blur reaches, as a length or a percentage of the object.
`layers`	num	`8`	Progressive: blur layers. More is smoother and costs more to paint.
`curve`	linear \| ease \| exponential	`exponential`	Progressive: how the blur grows toward `edge`. `exponential` stays clear longest and feels most natural.
`fade`	color		Progressive: a colour the blurred edge fades into, e.g. the page background, so text over it stays readable.
`values`	any		Progressive: blur radii at the clear side and at `edge`, e.g. `(0, 25)` (instead of `value`).
`direction`	any		Progressive: from/to alignment, e.g. `(t, b)` (the older form of `edge`).
`w` (width)	len \| fill \| hug		Width: a length, `fill` (share the remaining space) or `hug` (fit content, default).
`h` (height)	len \| fill \| hug		Height: a length, `fill` or `hug` (default).
`size` (s)	size		Width and height together: `size: 200` or `size: (200, 120)`.
`minW` (minWidth)	len		Minimum width.
`maxW` (maxWidth)	len		Maximum width.
`minH` (minHeight)	len		Minimum height.
`maxH` (maxHeight)	len		Maximum height.
`aspect` (aspectRatio)	num		Aspect ratio (width / height), e.g. `16/9`.
`color` (bg, background, colorBG)	paint		Background paint: a colour or gradient.
`padding` (pad)	insets		Space inside the object.
`cornerRadius` (radius, borderRadius, corner)	radius		Corner radius: one length or `only(topLeft: 8, …)`.
`borderWidth`	len		Border width.
`borderColor`	color		Border colour.
`borderAlign`	in \| mid \| out	`in`	Where the border sits relative to the edge: `in`, `mid` or `out`.
`borderStyle`	solid \| dashed \| dotted	`solid`	Border line style.
`borderSides`	all \| top \| bottom \| left \| right \| x \| y	`all`	Which sides draw the border (inside the box).
`shadow`	shadow		Drop shadow(s): `shadow(y: 4, blur: 12, color: black.alpha(20%))`.
`clip`	bool		Clip children to the object's bounds (and corner radius).
`z`	int		Stacking order among siblings.
`margin`	insets		Space outside the object: `all(8)`, `sym(x: 8, y: 4)`, `only(top: 8)`.
`opacity`	num		Opacity from 0 to 1.
`hide` (hidden)	bool		Removes the object from layout and the accessibility tree.
`shrink`	num	`1`	Shrink priority when space runs out. Lower shrinks first; 0 never shrinks.
`flex`	num	`1`	Share of remaining space for `fill` sizes.
`cursor`	auto \| pointer \| text \| grab \| grabbing \| move \| notAllowed \| crosshair \| none		Pointer cursor.
`className` (class)	txt		Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS).

Group .border(align, color, width, style, sides): Border settings grouped: .border(align: in, color: #0d0d0d, width: 2).

Slots

.obj: one object, the default slot

Blur

#Frosted glass

#A progressive fade

#Config keys

#Slots

Frosted glass

A progressive fade

Config keys

Slots