Skip to content

Make the runbook scroll story shorter and let it play on its own #702

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gerardrecinto merged 2 commits into from
Oct 31, 2026
Merged

Make the runbook scroll story shorter and let it play on its own #702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6f36a9
Make the runbook scroll story shorter and let it play on its own
gerardrecinto Oct 31, 2026
30138a8
Drop the pending runbook tick when the stage leaves the screen
gerardrecinto Oct 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,9 +426,9 @@
.story-cta .primary { background: #10b981; color: #000; }
.story-cta .ghost { border: 1px solid rgb(var(--c-dark-700)); color: rgb(var(--c-fg)); background: rgb(var(--c-dark-900) / 0.6); }
/* Scripted mode: the pin track is tall and the stage sticks while scroll drives the steps. */
.js-story .story-intro { display: block; height: 150vh; padding: 0; }
.js-story .story-intro { display: block; height: 120vh; padding: 0; }
.js-story .story-intro > div { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 58rem; margin: 0 auto; padding: 5rem 1.5rem 2rem; }
.js-story .story-pin { height: 340vh; }
.js-story .story-pin { height: 250vh; }
.js-story .story-stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding-top: 5.5rem; padding-bottom: 2rem; }
.story-hint { display: none; }
.js-story .story-hint { display: flex; align-items: center; gap: 0.5rem; margin: 2rem 0 0; font: 500 0.8rem/1 'JetBrains Mono', 'JetBrains Fallback', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--c-slate-400)); transition: opacity 0.4s; }
Expand Down Expand Up @@ -3117,7 +3117,7 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
var rows = story.querySelectorAll('.story-row');
var tagged = story.querySelectorAll('[data-for]');
var hint = document.getElementById('story-hint');
var step = -1, ticking = false, timed = 0;
var step = -1, ticking = false, timed = 0, auto = -1, autoTimer = 0;
// The line also lights on a timer, so a fast scroll cannot skip it and nobody has to scroll to read it.
var timer = setTimeout(function tick() {
timed++;
Expand All @@ -3137,6 +3137,17 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
var pr = pin.getBoundingClientRect();
var t = Math.min(0.9999, Math.max(0, -pr.top / (pr.height - vh)));
var n = pr.top > vh * 0.4 ? -1 : Math.floor(t * 5);
// Once the stage is on screen the rows also play on a timer, so nobody has to keep scrolling to see the whole runbook.
// Scrolling still wins whenever the visitor is ahead of the timer.
if (pr.top > vh * 0.9) auto = -1;
if (pr.top <= vh * 0.4 && pr.bottom >= vh * 0.6) {
if (auto < 4 && !autoTimer) autoTimer = setTimeout(function () { autoTimer = 0; auto++; frame(); }, auto < 0 ? 700 : 1100);
n = Math.max(n, auto);
} else if (autoTimer) {
// Off the stage: drop a pending tick so it cannot advance the rows while nobody is looking at them.
clearTimeout(autoTimer);
autoTimer = 0;
}
if (n === step) return;
step = n;
rows.forEach(function (row, i) { row.classList.toggle('on', i <= n); });
Expand Down
9 changes: 9 additions & 0 deletions tests/homepage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,6 +363,15 @@ test.describe('Homepage', () => {
await expect(page.locator('.story-verdict .v-block')).not.toHaveClass(/show/);
});

test('the runbook rows play on their own once the stage is on screen', async ({ page }) => {
await page.goto('/', { waitUntil: 'domcontentloaded' });
const [top, vh] = await page.locator('.story-pin').evaluate((el) => [el.getBoundingClientRect().top + window.scrollY, window.innerHeight]);
// Park just inside the stage and do not scroll again.
await page.evaluate((y) => window.scrollTo(0, y), top - vh * 0.3);
await expect(page.locator('.story-row.on')).toHaveCount(5, { timeout: 8_000 });
await expect(page.locator('.story-verdict .v-allow')).toHaveClass(/show/);
});

test('a scroll hint shows at the top and goes away once the visitor scrolls', async ({ page }) => {
await page.goto('/', { waitUntil: 'domcontentloaded' });
const hint = page.locator('#story-hint');
Expand Down
Loading