Effects & motion

The effects are the identity: a neon tube glow called bloom, static grain, scanlines and corner brackets for HUD frames. Use them as accents on a few elements, not as texture for every surface. The examples use the CSS utility classes; the Tailwind equivalents are on Utilities & variants.

Bloom glow

Glow is a colored shadow built from --sb-glow-color, which defaults to the primary intent. Its strength is --sb-glow-strength: 1 on dark flavors, 0.35 on Daybreak, where a full glow would smudge.

sb-glow-sm –sb-glow-sm

sb-glow –sb-glow-md

sb-glow-lg –sb-glow-lg

sb-glow-ion

sb-glow-acid

sb-glow-danger

Pick a color with .sb-glow-<accent> (all twelve) or .sb-glow-<intent> (primary, secondary, info, success, warning, danger), or set --sb-glow-color yourself. The glow tokens are declared on every element, so changing the color on an element rebuilds its own glow. Components already glow on hover and focus in their intent color.

Text glow follows the accent

or any color you pick

Static Bloom

.sb-text-glow applies --sb-text-glow. .sb-gradient-text clips --sb-gradient-bloom (135°, plasma to ultraviolet) to the glyphs; combined with .sb-text-glow it switches to a drop shadow so the gradient stays crisp.

Surface effects

sb-static grain, boosted here

sb-scanlines –sb-scanlines

sb-brackets HUD corner ticks

All three coolant brackets

Class	Effect	Tune with
.sb-static	Grain from --sb-noise (an inline SVG noise), in ::after	--sb-static-opacity (default 0.09 on dark flavors, 0.05 on Daybreak)
.sb-scanlines	Horizontal lines from --sb-scanlines, as a background	the shadow ink and flavor; lines are 3px apart
.sb-brackets	Four L-shaped corner ticks with a soft glow, in ::before	--sb-brackets-color, --sb-brackets-size (12px), --sb-brackets-width (1.5px), --sb-brackets-inset

The three use different slots (::before, ::after, background), so they combine on one element.

Glass

.sb-glass is --sb-glass (base at 88%) with a 12px backdrop blur and a hairline border, for panels over game imagery. How legible its text stays depends on the flavor and the scene: in Blackout, HUD text keeps 4.5:1 over bright, dark and neon scenes, while accent-colored text in the other flavors can dip below it (measurements).

sb-glass panels over game imagery

Status no brackets

Blur tokens: --sb-blur-sm 4px, --sb-blur-md 12px, --sb-blur-lg 24px.

Motion

Motion answers an interaction or a state change. Durations and easings are tokens:

Duration	Value	Easing	Curve
--sb-duration-instant	75ms	--sb-ease-standard	cubic-bezier(0.2, 0, 0, 1)
--sb-duration-fast	150ms	--sb-ease-out	cubic-bezier(0.16, 1, 0.3, 1)
--sb-duration-base	220ms	--sb-ease-in	cubic-bezier(0.7, 0, 0.84, 0)
--sb-duration-slow	350ms	--sb-ease-emphasized	cubic-bezier(0.3, 0, 0, 1.15)
--sb-duration-slower	500ms

Hover and color changes use fast with standard; entrances use base with out, exits fast with in. Keyframes ship as sb-fade-in, sb-fade-out, sb-zoom-in, sb-zoom-out, sb-slide-in-from-{top,bottom,left,right}, sb-spin, and the decorative loops sb-pulse-glow, sb-flicker, sb-glitch, sb-scan and sb-shimmer.

sb-pulse-glow alarms, live states

sb-flicker a failing neon tube

Reduced motion

Under prefers-reduced-motion: reduce, the duration tokens drop to 0.01ms and every animation and transition jumps to its end state, so animationend and transitionend still fire. Add .sb-motion-essential to an element whose motion carries meaning, such as a spinner for pending work. The Tailwind theme’s animate-* utilities set animation: none under the same query.