Smooth scroll (Lenis)
Lenis smooth wheel scrolling for desktop only, with defaults that keep phones native: no touch hijack, anchors with header offset, paused under modals, instant jumps for keyboard focus.
Lenis 1.3.26 · MIT · 5.5 KB
WBL Code Library
20 copy-ready modules for preview sites: half make the page flow smoothly, half show off the business in the first phone screen. Each one is a folder with a live demo, its own JS and CSS, and a README.
- 40.6 KB of our code for all 20, gzipped
- Dependencies: Lenis + AutoAnimate (both MIT, vendored); everything else vanilla
- Transform/opacity only · reduced motion · 0 CLS · 375 px
View transitions
Native page and section transitions: a card's photo morphs into the next page's hero (and back), and same-page switches cross-fade with a shared-photo morph. No library.
No dependency
Scroll scenes (CSS scroll-driven)
Reading progress bar, image parallax bands and soft fade-ups, driven by native CSS scroll timelines (off the main thread), with a tiny JS fallback for older browsers.
No dependency
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.
No dependency
Blur-up image loading
A tiny blurred version of each photo (a 20 px JPEG, ~0.7 KB inlined) sits in a box of the right shape until the real photo has decoded, then the photo fades in. No grey boxes, no pop, no layout shift.
No dependency
Font swap without layout shift
Web fonts that arrive without moving a single line: a local font resized to the web font's exact footprint shows first, then swaps invisibly. With an overlay proof and an in-browser calculator for new fonts.
No dependency
Sticky book bar
The phone's bottom bar (Call + "From $40 · Book a visit"): there from the first screen, slides away while reading down, back on any scroll up, a pause, the page end or keyboard focus; steps aside for the form and the keyboard.
No dependency
Smooth FAQ accordion
Native <details> FAQ that glides open and shut: pure CSS where the browser can animate to height:auto, a 1 KB Web Animations fallback elsewhere, one-open-at-a-time groups, and FAQPage schema from the page.
No dependency
Menu tabs with height glide
Long price lists become category tabs (Cuts / Colour / Finish) whose panel glides to its new height while rows slide in and out. Printed-menu rows with dotted leaders and mono prices.
AutoAnimate 0.10.0 · MIT · 3.2 KB
Business card strip
Rating with count, a live Open now · closes 7 pm, and the street with Get directions, packed under the hero headline so the first phone screen answers "good? open? where?".
No dependency
Walk-in card
A bold live status tile from real hours: Walk-ins welcome now · last walk-in 6:30 pm, flipping to "book ahead" near closing and to the next opening when closed.
No dependency
Service picker
Fresha-style menu rows with duration, price and a (+). A running "Your visit" total, and on phones a sticky From $X · Book bar that becomes "2 services · 1 h 45 min · $110".
No dependency
Photo review cards
Reviews as photo + quote cards on a native swipe track: the next card peeks, buttons and a "2 / 6" counter on the side, the rating with count on top. Never autoplays.
No dependency
Before / after slider
Drag anywhere on the photo (or use the arrow keys) to wipe between before and after. Built on a real range input, so keyboards and screen readers get it for free.
No dependency
Team cards
"Ask for Maria" staff cards: portrait under one shared brand tint (so mismatched phone photos read as a set), role, a one-line quote from a real review, and Book with Maria.
No dependency
Gallery lightbox
An editorial gallery (one lead photo + supporting crops, captions) that opens into a full-screen viewer you swipe through, with arrows, keys, a counter and the caption.
No dependency
Rating line under the CTA
"★★★★★ 4.9 · 212 Google reviews" as one quiet linked line right under the hero button, with stars that fill exactly (4.7 = 94%). CSS only.
No dependency
Visit block
The last screen done right: Apple-style hours with today in bold and a live status, holiday closures, the address with a landmark, Get directions, Copy address, and a map that loads only when tapped.
No dependency
Gift card picker
A mock of the shop's own branded gift card that updates as you pick $25 / $50 / $100 / Other, add a name and choose text or email. The button says "Buy a $50 gift card".
No dependency
Trust strip
Licensed (with the number linking to the state lookup), insured, years in business that update themselves, and the rating: four facts on hairlines, not icon cards.
No dependency
Dropping a module into a site
- Copy
modules/<name>/to the site as/wbl/<name>/. - Paste the copied snippet: the head lines (one
wbl-jsline per page, shared by every module) and the markup. - Bridge the colours once:
:root{--wbl-accent:var(--a);--wbl-ink:var(--ink);--wbl-paper:var(--bg)}.
Every demo uses sample data for a fictional salon ("Juniper Hair Studio") and Pexels placeholder photos. On a client site, use only their real hours, prices, reviews and photos.
Earlier libraries: batch 1 (15 vanilla effects) · batch 2 (GSAP) · batch 3 (the GSAP shelf).