74 lines
4.4 KiB
Markdown
74 lines
4.4 KiB
Markdown
# 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)` |
|