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
