Effects

Atmospheric, non-functional treatments that give the brand its depth — ported faithfully from the EPM Labs DS. Each is theme-aware and pointer-events:none, so it never blocks input.

Decorative effects

Hero Grid

A dot grid for hero / full-bleed sections. It renders in a ::before so the fade mask clips only the pattern, not the content — the grid dissolves into the canvas below.

Learn to play well.

The grid fades behind the content, not over it.

<section class="sg-hero-grid">
  <div> … your hero content … </div>
</section>

Noise Grain

A fixed, full-viewport grain film at z-index:9999. It adds tactile texture to flat gradients and solid fills. Drop one in <body> per page; the .webp texture swaps per theme.

Opacity exaggerated (×5) so it reads in this small frame

<body>
  <div class="sg-noise-overlay"></div>
  <!-- rest of the page -->
</body>

Property	Default	Notes
background-image	background-noise.webp	Swaps to light-background-noise.webp in the light theme
--epmlabs-noise-size	200px 200px · 256px 256px	Tile size — dark uses 200, light 256
--epmlabs-noise-opacity	0.034	Global opacity — intentionally barely-there

Glow

A brand box-shadow halo for a single featured surface — the “pick me” card. Pairs well with --gradient.

Be first in line

Gradient border + glow — the premium/featured treatment.

<div class="sg-card sg-card--gradient sg-glow"> … </div>

Hero Grid on the top hero of a page — one per page, full-bleed.
Noise Grain once, page-level; never per-section (that reads as a heavy pattern, not grain).
Glow on a single featured card. More than one and none of them feels featured.

Web

sg-hero-grid · sg-noise-overlay · sg-glow

CSS decorations in components.css.

Flutter (planned)

StoaHeroGrid · grain via a paint layer

Reimplemented with CustomPaint / a shader on the shared brandGradient + glowBrand tokens; the grain is a low-opacity texture in a Stack.