Reveal that never leaves blanks

Staggered scroll reveals with guarantees: nothing on screen at load is ever hidden, stagger is capped at 5 × 60 ms, and anything you flick past, jump to or print is simply there.

Everything in this first screen is already visible: reveal-safe never animates what you can see at load. Scroll down: sets arrive in a short stagger. Flick fast to the bottom: whatever you skipped is simply there.

Prices

Women's cut + blow-dry$65
Men's cut$40
Kids cut$30
Gloss / toner$55
Root touch-up$85
Balayagefrom $220
Blow-dry$45
Bond repair$35

Recent work

Colour that lasts past week six

Every colour starts with a strand test and a price you hear before we mix anything. Reds and coppers get a bond treatment on the house.

Prices

Women's cut + blow-dry$65
Men's cut$40
Gloss / toner$55
Root touch-up$85
Balayagefrom $220

Two chairs, no rush

Maria opened the studio on Sunset in 2012. There are two chairs, one appointment per stylist at a time, and nobody watching the clock.

2214 W Sunset Blvd

Echo Park, two doors from the laundromat. Street parking on Lemoyne. Tue–Sun, from 9 am on Saturdays.

Questions

Do you take walk-ins? Yes, Tuesday to Sunday, until 30 minutes before close. Do you do vivid colour? Yes: book a free 15-minute consult first.

How to use it

Size

1.6 KB gzipped own code (JS 1.4 KB + CSS 0.3 KB; 3.8 KB raw)

Dependency

none (vanilla + native APIs)

Tag

Flow

Best for

Every preview: price rows, service lists, gallery sets, team cards

What it does

Elements below the fold get a hidden start state only after JS measured them (no flash, no CLS, no hidden hero). Items entering the viewport together stagger by DOM order, counted per batch (a 20-row list never waits 1.2 s). Items scrolled past while hidden, a #hash jump, a print, a tab coming back or a 2.5 s scroll pause all show pending items instantly. Rise is 18 px over 0.5 s (under the skill's 0.6 s cap).

When to use

Instead of a generic 'fade everything in' library (AOS-style), which is where blank screens and invisible-on-arrival content come from (motion_feel cap: stuck-hidden content).

Lists, card sets, gallery grids, section headings.

Don't

On the hero or LCP image (it would be ignored anyway when on screen at load).

Long rises or blur-ins; more than one reveal style per page.

Combine with batch 1's stagger on the same elements.

Reduced motion, no JS, accessibility

Reduced motion: does nothing at all (no hidden state is ever added).

No JS: nothing hidden (the start class is added by JS).

Hidden items are opacity-only, so screen readers and find-in-page still reach them; the failsafe shows them anyway.

Notes

WBL.reveal.refresh() after inserting content; WBL.reveal.flush() shows everything.

Copy-ready snippet

<!-- Reveal that never leaves blanks (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/reveal-safe/module.css">
<script src="/wbl/reveal-safe/module.js" defer></script>

<!-- markup: -->
<!-- one element -->
<h2 data-wbl="reveal">Prices</h2>

<!-- a set: children arrive in a short stagger (only those entering together) -->
<ul class="rows" data-wbl="reveal-group">
  <li><b>Women's cut + blow-dry</b><span class="pr">$65</span></li>
  <li><b>Men's cut</b><span class="pr">$40</span></li>
  <li><b>Gloss / toner</b><span class="pr">$55</span></li>
</ul>