Utilities & variants

The theme adds the Static Bloom effects as Tailwind utilities. Every example on this page is rendered with the real utilities; switch the flavor in the header to see them follow it. The class-only equivalents for plain HTML (.sb-glow, .sb-brackets, …) are on Effects & motion.

Glow

glow-sm, glow and glow-lg set a box shadow from --sb-glow-sm, --sb-glow-md and --sb-glow-lg. The color comes from --sb-glow-color, which defaults to the primary intent. Pick another color with glow-<color>: any semantic key (glow-danger), any raw key (glow-sb-ion), or the short raw form (glow-ion).

glow-sm

glow

glow-lg

glow glow-ion

glow glow-acid

glow glow-danger

<button class="rounded-md bg-primary px-4 py-2 text-on-primary glow-sm">Connect</button>
<div class="rounded-lg border border-sb-ion/60 glow glow-ion">…</div>

Its strength, --sb-glow-strength, is 1 on dark flavors and 0.35 on Daybreak, where a full glow would smudge. Glow is an effect, not elevation: it sets box-shadow, so it replaces a shadow-* on the same element.

Text glow

text-glow adds --sb-text-glow. It shares --sb-glow-color with glow, so text-glow-<color> picks its color the same way.

text-primary text-glow

text-sb-ion text-glow text-glow-ion

ONLINE · text-success text-glow text-glow-success

Keep text glow for short labels and headings; body text stays crisp without it.

Bloom gradient

bg-bloom paints --sb-gradient-bloom (135°, plasma to ultraviolet). text-bloom clips the same gradient to the glyphs and makes the text color transparent, so do not combine it with a text-* color.

text-bloom

bg-bloom with text-on-primary

Grain, scanlines and brackets

Utility	Paints
static	The --sb-noise grain (an inline SVG). Also keeps Tailwind’s position: static
scanlines	--sb-scanlines: a 1px line every 3px in the flavor’s shadow ink
brackets	Four 8px corner brackets, 1px thick, in currentColor

All three, like bg-bloom, set background-image, so only one of them applies per element. Put each effect on its own layer:

static, on its own layer

scanlines

brackets in text-sb-coolant

<!-- Grain on a decorative layer: both children share one grid cell. -->
<div class="grid overflow-hidden rounded-lg bg-panel">
  <div class="static col-start-1 row-start-1 opacity-20 mix-blend-overlay" aria-hidden="true"></div>
  <div class="col-start-1 row-start-1 p-5">…</div>
</div>

Caution

static also sets position: static, and it wins over relative or absolute on the same element. Put the grain on a child that does not need positioning, as above.

Glass

glass fills an element with --sb-glass (base at 88%) and blurs what is behind it by --sb-blur-md, for panels over game imagery (here a busy stand-in). How legible text stays depends on the flavor and the scene: see HUD legibility.

glass

glass with brackets

glass replaces an earlier bg-* color or backdrop-blur-* when classes are merged with cn().

Animations

The decorative loops, rendered with the animation utilities from the theme:

animate-pulse-glow

animate-flicker

animate-glitch

animate-shimmer

<div class="rounded-lg border border-danger/60 glow-danger animate-pulse-glow">Wanted</div>
<div class="bg-bloom bg-size-[200%_100%] animate-shimmer">Loading</div>

animate-shimmer slides the background, so give it an image larger than the element. With prefers-reduced-motion: reduce, every animate-* utility stops; check this page with reduced motion turned on in your system settings and the tiles stand still.

Variants

Variant	Applies when
dark:, light:	the element or an ancestor has data-theme="dark" / "light"
dusk:, midnight:, blackout:, daybreak:	the element or an ancestor has that data-flavor

The line below shows one sentence per flavor, and only the current one is visible. Switch the flavor in the header:

dusk: Plum ink, the softest dark.midnight: Saturated indigo, the default.blackout: Near-black steel for the HUD.daybreak: Pale dawn, the light flavor.

<span class="hidden dusk:inline">…</span>
<div class="bg-panel blackout:bg-canvas-sunken">…</div>

The variants match ancestors, and a nested scope does not cancel an outer one. This Daybreak scope sits inside the page: on a dark page both badges show, on Daybreak only light: does.

dark: matcheslight: matches

Prefer semantic utilities (bg-canvas, text-fg, border-line): they resolve in the nearest scope, nested or not. Keep variants for changes the tokens cannot express, such as a different shadow or layout per flavor. The variants read attributes only, so set data-theme together with data-flavor; the flavor runtimes and SbProvider do this for you.