4.4 KiB
Site update v4 — sticky scroll fix + hero shrink + move-up
Two issues from v3, two targeted fixes. Everything lands in protected/.
Files to replace
| File | What changed |
|---|---|
protected/index.html |
Hero fonts reduced ~13% (title, lede, eyebrow, hero-foot margin); hero block pulled further up |
protected/bifrost.js |
Sticky-scroll rewritten to use wheelMultiplier attenuation; treasure-map stops added as individual sticky targets |
protected/timeline.js |
No change from v3 — copy only if you want to re-ship it alongside the others |
The fix
Why v3's sticky scroll didn't work
v3 multiplied Lenis's .velocity property once per scroll event. Lenis overwrites that value from the next wheel input before it ever gets consumed by the scroll loop — so the damping had no perceptible effect. No amount of tuning the DAMP_FACTOR would have helped.
The new approach
Instead of reacting to the scroll after the fact, we attenuate wheel input at the source. Lenis reads options.wheelMultiplier every time a wheel event fires. When the viewport center passes a sticky target, we drop it from 1.0 to 0.35 — a 65% reduction. The user's wheel still works, but each flick of the wheel now moves the page 35% as far as before. When the zone is exited, the multiplier snaps back to 1.0.
This produces a tactile, immediate resistance. Power users can still scroll fast (more wheel strokes); casual users get a natural "hold" on each scene.
Treasure-map stops
v3's sticky targets were scenes only — the whole bifrost-meaning section (the treasure map) was one target. Since it's ~300vh tall, "center of section" was only briefly aligned with viewport center, and users flew past the individual stops.
v4 adds each .map-stop element as its own sticky target. The intro card, Community, Advisory Council, and Pilot Projects — each dwells in the viewport as the user reaches it.
Hero fonts + move up
#page-overview #hero now has overview-specific sizing that runs ~13% smaller than the base hero tokens:
| Element | Before | After |
|---|---|---|
.hero-title |
var(--step-hero) → clamp(2.4rem, 6.2vw, 5.4rem) |
clamp(2.1rem, 5.4vw, 4.7rem) |
.hero-lede |
var(--step-lg) → clamp(1.35rem, 3vw, 2.2rem) |
clamp(1.15rem, 2.6vw, 1.9rem) |
.eyebrow |
var(--step-sm) → clamp(0.85rem, 1vw, 0.95rem) |
0.74rem |
.hero-wrap padding-top |
clamp(3rem, 8vh, 6rem) |
clamp(1.75rem, 4.5vh, 3rem) |
.eyebrow margin-bottom |
clamp(1.4rem, 4vh, 2.4rem) |
clamp(0.9rem, 2.5vh, 1.6rem) |
.hero-lede margin-top |
clamp(1.5rem, 4vh, 2.5rem) |
clamp(1rem, 2.5vh, 1.6rem) |
.hero-foot margin-top |
clamp(2rem, 5vh, 3.5rem) |
clamp(1.25rem, 3.5vh, 2.25rem) |
Line-heights tightened to match (1.02 → 1.0 on the title). Together these keep the hero block compact and clear of the dot-nav + S2 cards below.
These overrides are scoped to #page-overview #hero only — the timeline and other pages are unaffected.
Spot-check after deploy
- Overview → scroll through hero. Text sits clearly in upper third of viewport. Visible space below "Supported by" + arrow.
- Hero block does NOT overlap the S2 cards below it on scroll; cards drop in cleanly.
- Scroll into S5 treasure map. Each stop (Community, Advisory Council, Pilot Projects) slows the scroll as it passes the viewport center — you feel a real hold, not just a brief damping.
- Scrolling fast still works — the wheel is slower, not locked. Determined scrolling passes through.
- S2 (stack) scrubs at normal speed (not damped — pinned scene is exempt).
- Hero, Words, Bifrost, Join scenes each also feel sticky as they hit center.
Tuning knobs
If the stickiness is too strong or too weak after deploy:
| What | In bifrost.js |
Change |
|---|---|---|
| Less sticky (weaker hold) | STICKY_WHEEL_MULT = 0.35 |
→ 0.55 or 0.65 |
| More sticky (stronger hold) | STICKY_WHEEL_MULT = 0.35 |
→ 0.20 or 0.15 |
| Wider trigger zone | STICKY_ZONE_VH = 0.18 |
→ 0.25 |
| Narrower trigger zone | STICKY_ZONE_VH = 0.18 |
→ 0.12 |
If the hero text is still too large or still bleeds into the icons below:
| What | In index.html |
Change |
|---|---|---|
| Smaller hero title | clamp(2.1rem, 5.4vw, 4.7rem) |
e.g. clamp(1.9rem, 4.8vw, 4.2rem) |
| Pull up more | padding-top: clamp(1.75rem, 4.5vh, 3rem) |
e.g. clamp(1rem, 3vh, 2rem) |