Embellishments

Every decoration the code can draw. A theme picks a type, a slot it is offered on, and values from each choice's own list — nothing else is expressible, which is what makes this safe to hand to an editor.

Adding one is a code change: an entry in EffectRegistry and a case in effects.js. No migration, no data-model change. The page budget is 6 cost units; each card shows what it spends.

falling-logos

canvas · cost 3

The pick logo, falling at assorted sizes. Uses the nav-logo image slot, so a theme that swapped the mark drops the swapped one.

slots: page · hero · banner
density: light · medium · heavy
size: small · mixed · large
spin: none · slow · tumble
settle: off · ledges · surfaces · both
linger: brief · slow · forever

Assignment row for this

{
  "effect_type": "falling-logos",
  "slot": "page",
  "params": {
    "density": "medium",
    "size": "mixed",
    "spin": "tumble",
    "settle": "surfaces",
    "linger": "brief"
  }
}

garland

dom · cost 1

A swag of pine along the slot's top edge.

slots: nav · banner · section-frame
palette: evergreen · autumn · gold
berries: on · off

Assignment row for this

{
  "effect_type": "garland",
  "slot": "nav",
  "params": {
    "palette": "evergreen",
    "berries": "on"
  }
}

leaves

canvas · cost 2

Tumbling leaves that stick where they land, then fade so the pile never becomes a carpet.

slots: page · hero · banner · section-frame
density: light · medium · heavy
drift: still · breeze · gusty
settle: off · ledges · surfaces · both
palette: autumn · spring · evergreen
linger: slow · forever · brief

Assignment row for this

{
  "effect_type": "leaves",
  "slot": "page",
  "params": {
    "density": "medium",
    "drift": "breeze",
    "settle": "surfaces",
    "palette": "autumn",
    "linger": "slow"
  }
}

snow

canvas · cost 2

Falling snow. Can gather on ledges and inside cut-out photographs, and by default the drift stays — piling up is what snow is for.

slots: page · hero · banner · section-frame
density: light · medium · heavy
drift: still · breeze · gusty
settle: off · ledges · surfaces · both
tint: band-text · white · gold · primary · secondary
linger: forever · slow · brief

Assignment row for this

{
  "effect_type": "snow",
  "slot": "page",
  "params": {
    "density": "medium",
    "drift": "breeze",
    "settle": "surfaces",
    "tint": "band-text",
    "linger": "forever"
  }
}

sparkle

canvas · cost 1

Occasional glints, fading in and out in place.

slots: hero · banner · card
density: light · medium
tint: band-text · white · gold · primary · secondary

Assignment row for this

{
  "effect_type": "sparkle",
  "slot": "hero",
  "params": {
    "density": "medium",
    "tint": "primary"
  }
}

string-lights

dom · cost 1

A cable of bulbs draped across the top of the slot.

slots: nav · banner · hero · section-frame
palette: warm-white · multicolour · red-green · gold
bulb: small · medium · large
droop: shallow · deep
twinkle: on · off

Assignment row for this

{
  "effect_type": "string-lights",
  "slot": "nav",
  "params": {
    "palette": "multicolour",
    "bulb": "medium",
    "droop": "deep",
    "twinkle": "on"
  }
}

Slots

The surfaces the markup offers. An assignment names one of these — never a CSS selector — which is why decorating somewhere the design did not invite is impossible rather than discouraged.

page
nav
banner
hero
section-frame
card