Random Scatter Field

A decorative scatter of drifting dots behind a hero/card — position, size, and animation delay all drawn natively by the browser's own new random() CSS math function, not JavaScript's Math.random(). Real, current (2026), sourced this run via WebSearch aggregation (this routine's usual Firecrawl-based direct-fetch workaround for primary docs was unavailable again today — see the honesty note below): WebKit's own blog post 'WebKit Features for Safari 26.2' is the primary source found, confirming random() shipped in that release alongside sibling-index()/sibling-count() (already in this catalog's sibling-index-stagger-grid entry, independent corroboration that this catalog's sourcing on that earlier entry was accurate) — its own example, random(0, 100, 2), draws an even number from 0 to 100. A second WebKit post, 'WebKit Features for Safari 26.5', confirms the spec is still actively moving: named/cached random values changed from per-element-by-default to global-by-default after 26.2 shipped, with an element-scoped keyword added to opt back into per-element randomness. Cross-checked against the W3C's own CSS Values and Units Module Level 5 draft (which uses a differently-named per-element keyword) and MDN's reference page (title/support-summary confirmed via search — MDN marks it explicitly NOT Baseline, 'limited availability', because it doesn't work in most widely-used browsers) — multiple independent sources agree only Safari (26.2+) ships any form of random() in a stable release; Chrome/Chromium and Firefox have NOT shipped it (one low-quality aggregator's claim of 'Chrome/Firefox preview builds' support was checked against chromestatus-style sources and could not be corroborated, so it is explicitly not asserted here). **Because the named-value caching keyword itself disagrees across sources (per-element vs. element-scoped) and could still change before wider implementation, this demo deliberately uses only the uncontested, WebKit-blog-confirmed basic three-argument form — random(min, max, step) — called as a fresh, independently-evaluated expression in its own dedicated nth-child rule per dot, never the disputed named/shared-cache syntax**, so nothing here rests on a detail still in flux. A genuinely useful property beyond 'it's new': because this evaluates natively in the browser's own layout engine rather than in JavaScript during render, it sidesteps the classic React/Next.js server-vs-client hydration-mismatch warning that hand-rolled Math.random() decorative positioning causes in this very stack — a real, concrete win for a codebase already careful about SSR. Checked for overlap before building: grepped this whole catalog for 'random(' outside of the unrelated Math.random() call already used inside the existing Scramble Text component's JS — zero matches; genuinely new ground, no existing entry draws any native CSS random value. **Honest, safe fallback — verified in this run's own pinned Chromium (141.0.7390.37), which does not implement random() in any form, exactly as expected from the Safari-only shipping status above:** `@supports not (top: random(0%, 1%, 1%))` applies a fixed, hand-placed (non-random, clearly deterministic) scatter layout instead, so a non-supporting browser still shows a full, intentional-looking dot field rather than a pile of dots stacked at 0,0 or an empty box. Zero JS, zero WebGL, zero scroll-jacking — this is as light as any CSS-only entry in this catalog, and the fit-check below notes it would suit the (still-missing, see this log's standing day-3 finding) DIY $999 catalog doc too, not just Apex Motion. (Vanilla example: live iframe preview + HTML/CSS tabs.)

<div class="rsf-wrap">
  <span class="rsf-dot"></span><span class="rsf-dot"></span><span class="rsf-dot"></span>
  <span class="rsf-dot"></span><span class="rsf-dot"></span><span class="rsf-dot"></span>
  <span class="rsf-dot"></span><span class="rsf-dot"></span><span class="rsf-dot"></span>
  <span class="rsf-dot"></span><span class="rsf-dot"></span><span class="rsf-dot"></span>
  <span class="rsf-dot"></span><span class="rsf-dot"></span>
  <p class="rsf-label">random() CSS — no JS, no hydration mismatch</p>
</div>