diff --git a/README.md b/README.md index 90104da..f7c21e3 100644 --- a/README.md +++ b/README.md @@ -39,13 +39,13 @@ npm run test:browser # インストール済みChromeを使う場合：CHROME_PATH=/path/to/chrome npm run test:browser ``` -Bookの閲覧テストはJavaScript無効、ランディングのテストは有効にして実行します。スクリーンショットは`site/test-results/`に保存され、ランディングは6場面をデスクトップ／モバイルで記録します。サブパスbuildの検証時は同じ`SITE_BASE`を設定してください。テスト用previewは`127.0.0.1:4322`を使用し、4321のdev serverとは別に起動します。 +Bookの閲覧テストはJavaScript無効、ランディングのテストは有効にして実行します。スクリーンショットは`site/test-results/`に保存され、ランディングは動きが重なる途中フレームをデスクトップ／モバイルで記録し、移動・縮小・幹伸長の同時進行と、移動中のSVG／罫線の接続位置を検証します。サブパスbuildの検証時は同じ`SITE_BASE`を設定してください。テスト用previewは`127.0.0.1:4322`を使用し、4321のdev serverとは別に起動します。 ### ランディング -トップはSVGのルートマークから始まります。コンテの2はホバー専用の「Tap」表現で、ポインタを離すと消え、待っていても本編には進みません。クリック・ホイール／タッチスクロール・キー入力のいずれか一回で、3〜6を約6.9秒で最後まで再生します。ホバーは再生の前提ではなく、追加入力で段階を進めたり、再生を重ねたりもしません。Escapeまたは画面右下のスキップで直ちにデモへ移れます。ブラウザの修飾キー付きショートカットは妨げません。 +トップはSVGのルートマークから始まります。コンテの2はホバー専用の「Tap」表現で、ポインタを離すと消え、待っていても本編には進みません。クリック・ホイール／タッチスクロール・キー入力のいずれか一回で、全体を約3.9秒で最後まで再生します。ホバーは再生の前提ではなく、追加入力で段階を進めたり、再生を重ねたりもしません。Escapeまたは画面右下のスキップで直ちにデモへ移れます。ブラウザの修飾キー付きショートカットは妨げません。 -コンテ4では、大きなルートを左へ移し、円周の上端から右の接線へ文字を流しながら、ルートの直下へ縦の幹を伸ばします。円の半径・曲率は変えません。幹を伸ばす区間を見せてからルートと幹を縮小・移動し、縦幹全体を同じ列の`├`・`│`・`└`へ引き継いで、右へ枝を展開します。主幹は連続したまま保ち、枝先とラベルにglitchを適用します。 +ルートは中間位置で停止せず、一つの弧状の軌道でツリーへ移動します。円周文字の上端接線への流出、ルートの縮小、直下への幹伸長を重ね、着地を待たずに右向きの枝とパネルのglitchを始めます。円の半径・曲率は変えません。移動中の枝もルートと同じ座標変換に乗せ、縦幹全体を`├`・`│`・`└`へずれなく引き継ぎます。主幹は連続したまま保ち、枝先とラベルにglitchを適用します。ページのヘッダーや周辺要素も末尾の収束に重ねて現れます。 ツリーとパネルはASCII glitchから確定した文字・罫線へ収束します。ノイズは局所的なセル置換を10Hzで更新し、全画面の点滅は使いません。空白・改行・日本語は保持し、完了／スキップ時には元の文字列を完全に復元します。 diff --git a/site/src/scripts/landing.ts b/site/src/scripts/landing.ts index b2e74e5..5761c18 100644 --- a/site/src/scripts/landing.ts +++ b/site/src/scripts/landing.ts @@ -18,18 +18,22 @@ function bezier(x1: number, y1: number, x2: number, y2: number) { }; } const timing = { - // Mass leaves the centre horizontally; a longer deceleration seats the root. - travel: bezier(.58, 0, .22, 1), + // One acceleration and one landing, with no intermediate resting pose. + travel: bezier(.42, 0, .32, 1), // Typography accelerates along a fixed track, not a deforming circle. release: bezier(.55, 0, .3, 1), - scale: bezier(.42, 0, .18, 1), + scale: bezier(.6, 0, .2, 1), // The leading edge slows as it reaches a branch/node connection. trace: bezier(.22, .3, .25, 1), }; const mix = (a: number, b: number, value: number) => a + (b - a) * value; -// Scene 2 is an independent hover affordance. Playback begins at scene 3. -const playbackOffset = 620; -const duration = 7500 - playbackOffset; +// Overlapping cues on one clock, not a sequence of completed storyboard poses. +// Hover is independent; every playback starts this same continuous flow. +const flow = { + duration: 3900, release: 560, grow: 1320, converge: 1900, + handoff: 2460, branch: 2320, stagger: 55, + textPanel: 2520, callPanel: 2700, panelDuration: 900, +}; const orbitRadius = 180; const circumference = 2 * Math.PI * orbitRadius; // The clockwise circle ends at its top, tangent to a rightward straight line. @@ -81,9 +85,9 @@ export function initLanding() { const panel = element.closest('.ascii-panel'); const row = element.closest('.node-row'); const index = rows.indexOf(row as HTMLElement); - const start = panel ? (panel.classList.contains('call-panel') ? 6500 : 6320) - : 5450 + Math.max(0, index - 1) * 85; - return { element, text: element.textContent ?? '', start, duration: panel ? 850 : 580, seed }; + const start = panel ? (panel.classList.contains('call-panel') ? flow.callPanel : flow.textPanel) + : flow.branch + Math.max(0, index - 1) * flow.stagger; + return { element, text: element.textContent ?? '', start, duration: panel ? flow.panelDuration : 580, seed }; }); let lastGlitchFrame = -1; @@ -97,8 +101,8 @@ export function initLanding() { target.element.textContent = glitchText(target.text, value, frame, target.seed); } panels.forEach((panel) => { - const start = panel.classList.contains('call-panel') ? 6500 : 6320; - panel.toggleAttribute('data-glitching', time >= start && time < start + 850); + const start = panel.classList.contains('call-panel') ? flow.callPanel : flow.textPanel; + panel.toggleAttribute('data-glitching', time >= start && time < start + flow.panelDuration); }); } @@ -201,6 +205,8 @@ export function initLanding() { delete stage.dataset.hover; restoreGlitch(); root.style.removeProperty('transform'); + rows.slice(1).forEach((row) => { row.style.removeProperty('transform'); }); + html.style.removeProperty('--landing-chrome'); trunk.style.opacity = '0'; root.setAttribute('aria-label', 'ルート /'); invitation.style.removeProperty('opacity'); @@ -225,85 +231,91 @@ export function initLanding() { select(objects.indexOf(selected), keyboardStarted || document.activeElement === skip || document.activeElement === root); } - // One clock owns all phases. Inputs cannot advance, restart, or stack timelines. + // One trajectory carries the root AND emerging branches, so growth can begin + // before docking without disconnecting the SVG trunk from the text grid. function render(time: number) { const target = slot.getBoundingClientRect(); - const lastBranchTarget = lastRootBranch.getBoundingClientRect(); + const treeTarget = tree.getBoundingClientRect(); // offsetWidth rounds fractional mono cells and would shift the SVG axis. const endX = target.left + parseFloat(getComputedStyle(root).width) / 2; const endY = target.bottom - root.offsetHeight / 2; + const travel = timing.travel(progress(time, 0, 3000)); + const remaining = 1 - travel; + const startX = innerWidth / 2, startY = innerHeight / 2; + const centreX = remaining ** 3 * startX + + 3 * remaining ** 2 * travel * (startX - Math.min(180, innerWidth * .2)) + + 3 * remaining * travel ** 2 * (endX + Math.min(96, innerWidth * .12)) + travel ** 3 * endX; + const centreY = remaining ** 3 * startY + + 3 * remaining ** 2 * travel * (startY + Math.min(48, innerHeight * .08)) + + 3 * remaining * travel ** 2 * (endY + Math.min(90, innerHeight * .12)) + travel ** 3 * endY; + const scale = mix(7.2, 1, timing.scale(progress(time, 350, 2650))); + const dx = centreX - endX, dy = centreY - endY; + root.style.transform = `translate3d(${dx}px, ${dy}px, 0) scale(${scale})`; + rows.slice(1).forEach((row) => { + // offsetTop stays in layout coordinates, unaffected by last frame's transform. + const x = dx + (scale - 1) * (treeTarget.left - endX); + const y = dy + (scale - 1) * (treeTarget.top + row.offsetTop - endY); + row.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`; + }); + + // Growth overlaps the moving/shrinking root. It crosses the old circle only + // after the lower letters have passed, then converges on the moving grid. + const extension = timing.trace(progress(time, flow.grow, 1000)); + const converge = timing.travel(progress(time, flow.converge, 560)); + const longLength = Math.max(0, innerHeight * .4 - root.offsetHeight * 7.2 / 2 - 8); + const lineStartY = centreY + root.offsetHeight * scale / 2 + 8 * (1 - converge); + const finalLength = lastRootBranch.offsetTop + lastRootBranch.offsetHeight / 2 - slot.offsetTop - slot.offsetHeight; + const tipY = lineStartY + mix(longLength * extension, finalLength * scale, converge); + const handoff = progress(time, flow.handoff, 280); + trunk.setAttribute('d', `M${centreX} ${lineStartY} V${tipY}`); + trunk.style.strokeWidth = String(mix(10, scale, converge)); + const ink = [[32, 142], [34, 152], [31, 134]].map(([from, to]) => Math.round(mix(from, to, converge))); + trunk.style.stroke = `rgb(${ink.join(',')})`; + trunk.style.opacity = String(progress(time, flow.grow, 100) * (1 - handoff)); + invitation.style.opacity = String(1 - progress(time, 0, 220)); + + // Keep the circle centred on the moving root until the narrow viewport + // needs room for its trailing letters; its radius is never scaled or warped. const orbitScale = parseFloat(getComputedStyle(orbit).width) / 600; const radius = orbitRadius * orbitScale; - const stagedX = Math.max(innerWidth * .3, radius + 16); - const shiftedX = mix(innerWidth / 2, stagedX, timing.travel(progress(time, 2320, 980))); - // First slide the large composition left and grow its trunk. Only after - // that readable beat do we dock and shrink it into the terminal grid. - const dock = timing.travel(progress(time, 4100, 1350)); - const remaining = 1 - dock; - const centreX = remaining ** 3 * shiftedX - + 3 * remaining ** 2 * dock * mix(shiftedX, endX, .3) - + 3 * remaining * dock ** 2 * endX + dock ** 3 * endX; - const centreY = remaining ** 3 * innerHeight / 2 - + 3 * remaining ** 2 * dock * innerHeight / 2 - + 3 * remaining * dock ** 2 * mix(endY, innerHeight / 2, .2) + dock ** 3 * endY; - const scale = mix(7.2, 1, timing.scale(progress(time, 4100, 1350))); - root.style.transform = `translate3d(${centreX - endX}px, ${centreY - endY}px, 0) scale(${scale})`; - - // Let the last letters clear the circle's lower arc before drawing through it. - const extension = timing.trace(progress(time, 3040, 820)); - // The trunk grows down from the root, independently of the rightward text. - // Keep its head below the slash throughout scaling, then match the entire - // first column of ├ / │ / └ rather than shrinking into a horizontal elbow. - const largeStart = root.offsetHeight * 7.2 / 2 + 8; - const longLength = Math.max(0, innerHeight * .9 - innerHeight / 2 - largeStart); - const startY = centreY + root.offsetHeight * scale / 2 + 8 * remaining; - const finalLength = lastBranchTarget.top + lastBranchTarget.height / 2 - target.bottom; - const tipY = startY + mix(longLength * extension, finalLength, dock); - const handoff = progress(time, 5480, 140); - trunk.setAttribute('d', `M${centreX} ${startY} V${tipY}`); - trunk.style.strokeWidth = String(mix(10, 1, dock)); - const ink = [[32, 142], [34, 152], [31, 134]].map(([from, to]) => Math.round(mix(from, to, dock))); - trunk.style.stroke = `rgb(${ink.join(',')})`; - trunk.style.opacity = time < 3040 ? '0' : String(1 - handoff); - invitation.style.opacity = String(1 - progress(time, playbackOffset, 280)); - - const release = timing.release(progress(time, 2460, 1640)); + const drift = 120 * (1 - Math.exp(-time / 600)); + const release = timing.release(progress(time, flow.release, 1620)); const exitLength = innerWidth / orbitScale + circumference; - orbitPath.setAttribute('d', circularTrack + (time >= 2460 ? ` H${exitLength}` : '')); - orbit.style.opacity = String(progress(time, 620, 480)); - // Rotation comes to rest before release. The exit is always horizontal - // at the circle's top, never the expanding-radius curve used previously. - const turn = mix(-36, 0, progress(time, 620, 1700)); - orbit.style.transform = `translate(calc(-50% + ${centreX - innerWidth / 2}px), calc(-50% + ${centreY - innerHeight / 2}px)) rotate(${turn}deg)`; - textPath.setAttribute('startOffset', String(12 + release * (circumference + exitLength))); - // Preserve the continuous spine during the handoff; only the arms glitch. + orbitPath.setAttribute('d', circularTrack + (time >= flow.release ? ` H${exitLength}` : '')); + orbit.style.opacity = String(progress(time, 0, 300)); + const orbitX = Math.max(radius + 16, centreX); + const orbitY = centreY; + const turn = mix(-28, 0, timing.trace(progress(time, 0, flow.release))); + orbit.style.transform = `translate(calc(-50% + ${orbitX - startX}px), calc(-50% + ${orbitY - startY}px)) rotate(${turn}deg)`; + textPath.setAttribute('startOffset', String(12 + drift + release * (circumference + exitLength))); + spines.forEach((wire) => { wire.style.opacity = String(handoff); }); branches.forEach((wire, index) => { - const value = timing.trace(progress(time, 5450 + index * 85, 520)); + const value = timing.trace(progress(time, flow.branch + index * flow.stagger, 520)); wire.style.opacity = String(clamp(value * 4)); wire.style.clipPath = `inset(0 ${(1 - value) * 100}% 0 0)`; }); nodes.slice(1).forEach((node, index) => { - // Labels resolve where the growing line arrives; they do not slide in. - node.style.opacity = String(progress(time, 5790 + index * 85, 220)); + node.style.opacity = String(progress(time, flow.branch + 180 + index * flow.stagger, 220)); }); reveals.forEach((element, index) => { const isPanel = element.classList.contains('ascii-panel'); - const start = isPanel ? 6320 + (element.classList.contains('call-panel') ? 180 : 0) : 5980 + index * 55; - const value = progress(time, start, isPanel ? 850 : 380); - // Noise resolves into the panel, not a wipe or a sliding card. + const start = isPanel ? (element.classList.contains('call-panel') ? flow.callPanel : flow.textPanel) : 2540 + index * 35; + const value = progress(time, start, isPanel ? flow.panelDuration : 420); element.style.opacity = String(isPanel ? clamp(value * 6) : value); }); + html.style.setProperty('--landing-chrome', String(progress(time, 3000, 600))); renderGlitch(time); - stage.dataset.phase = time < 2460 ? 'orbit' : time < 3040 ? 'unfold' : time < 4100 ? 'extend' : time < 6320 ? 'tree' : 'panels'; + // A diagnostic label, not a playback gate or a storyboard step. + stage.dataset.phase = 'flow'; } function tick(now: number) { if (state !== 'playing') return; const time = now - startTime; - if (time >= duration) return finish(); + if (time >= flow.duration) return finish(); try { - render(time + playbackOffset); + render(time); frame = requestAnimationFrame(tick); } catch { // Fail open: the document and demo are more important than the animation. @@ -319,7 +331,7 @@ export function initLanding() { html.dataset.landing = 'playing'; delete stage.dataset.hover; startTime = performance.now(); - render(playbackOffset); + render(0); root.style.willChange = 'transform'; frame = requestAnimationFrame(tick); } diff --git a/site/src/styles/landing.css b/site/src/styles/landing.css index 98003e9..994c714 100644 --- a/site/src/styles/landing.css +++ b/site/src/styles/landing.css @@ -34,6 +34,7 @@ html[data-landing] .landing-page .site-header { opacity: 0; } .demo-tree { position: relative; } .node-row { position: relative; padding-left: 1ch; height: var(--row); display: flex; align-items: center; white-space: nowrap; } .node-row[hidden] { display: none; } +.node-row:not(.root-slot) { transform-origin: 0 0; } .node-row.root-slot { padding: 0; height: calc(3 * var(--row)); align-items: end; } /* These are real Unicode box-drawing characters, not SVG paths or borders. Scale only their vertical ink to cover the leading between mono baselines. */ @@ -114,6 +115,7 @@ html[data-landing] .landing-page .site-header { opacity: 0; } html[data-landing] { overflow: hidden; } html[data-landing] .landing { touch-action: none; } html[data-landing] .landing-page .site-header, html[data-landing] .landing-page .site-footer, html[data-landing] .landing-page main > :not(.landing) { visibility: hidden; } +html[data-landing="playing"] .landing-page :is(.site-header, .site-footer), html[data-landing="playing"] .landing-page main > :not(.landing) { visibility: visible; opacity: var(--landing-chrome, 0); transition: none; } html[data-landing] [data-reveal], html[data-landing] .demo-node:not(.root-mark), html[data-landing] :is(.branch-spine, .branch-arm) { opacity: 0; } html[data-landing] .root-mark { color: var(--ink); } html[data-landing="boot"] .root-mark { position: fixed; left: calc(50vw - 1.5ch); top: calc(50svh - var(--row) / 2); transform: scale(7.2); } diff --git a/site/tests/browser/landing.spec.ts b/site/tests/browser/landing.spec.ts index dc83613..7fcdf05 100644 --- a/site/tests/browser/landing.spec.ts +++ b/site/tests/browser/landing.spec.ts @@ -34,7 +34,7 @@ for (const trigger of ['click', 'wheel', 'key']) { }); } -test('storyboard phases retain one root and ignore repeated triggers', async ({ page }, testInfo) => { +test('continuous motion overlaps growth, travel and reveal without intermediate stops', async ({ page }, testInfo) => { await page.clock.install({ time: new Date('2026-01-01T00:00:00Z') }); await page.clock.pauseAt(new Date('2026-01-01T00:00:01Z')); await armed(page); @@ -58,19 +58,26 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({ await expect(page.locator(stage)).not.toHaveAttribute('data-hover'); await expect(page.locator('.tap-stream-a')).toHaveCSS('opacity', '0'); await root.click(); - await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit'); + await expect(page.locator(stage)).toHaveAttribute('data-phase', 'flow'); await expect(page.locator(stage)).not.toHaveAttribute('data-hover'); - await page.clock.runFor(1150); - await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit'); + await page.clock.runFor(420); const arcLength = await page.locator('#welcome-orbit').evaluate((path) => (path as SVGPathElement).getTotalLength()); const circlePath = await page.locator('#welcome-orbit').getAttribute('d'); await page.screenshot({ path: testInfo.outputPath('03-orbit.png') }); await page.mouse.wheel(0, 180); await page.keyboard.press('ArrowDown'); await page.mouse.click(20, 20); - await page.clock.runFor(1330); // Scene 4: early trunk growth, before docking. - await expect(page.locator(stage)).toHaveAttribute('data-phase', 'extend'); - expect(await page.locator('#welcome-orbit').getAttribute('d')).toMatch(new RegExp(`^${circlePath} H`)); + // No parked pose between orbit, release and growth: every sample keeps moving. + let previous = (await root.boundingBox())!; + for (let i = 0; i < 10; i++) { + await page.clock.runFor(100); + const current = (await root.boundingBox())!; + expect(Math.hypot(current.x - previous.x, current.y - previous.y)).toBeGreaterThan(.1); + expect(current.height).toBeLessThan(previous.height); + previous = current; + } + await expect(page.locator(stage)).toHaveAttribute('data-phase', 'flow'); + expect(await page.locator('#welcome-orbit').getAttribute('d')).toMatch(new RegExp('^' + circlePath + ' H')); const tangent = await page.locator('#welcome-orbit').evaluate((element, length) => { const path = element as SVGPathElement; const first = path.getPointAtLength(length + 40); @@ -80,42 +87,34 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({ expect(tangent.dx).toBeCloseTo(40, 1); expect(tangent.dy).toBeCloseTo(0, 1); expect(tangent.y).toBeCloseTo(-180, 1); - // The trunk must not cut through letters still on the bottom of the circle. expect(Number(await page.locator('.orbit textPath').getAttribute('startOffset'))).toBeGreaterThan(arcLength / 2 + 100); const earlyLength = await page.locator('.trunk-line').evaluate((path) => (path as SVGPathElement).getTotalLength()); + const earlyRoot = (await root.boundingBox())!; expect(earlyLength).toBeGreaterThan(10); - await page.screenshot({ path: testInfo.outputPath('04-unfold.png') }); - await page.clock.runFor(700); // Let the downward trunk finish extending. - await expect(page.locator(stage)).toHaveAttribute('data-phase', 'extend'); + await page.screenshot({ path: testInfo.outputPath('04-release-growth.png') }); + await page.clock.runFor(260); const extendedLength = await page.locator('.trunk-line').evaluate((path) => (path as SVGPathElement).getTotalLength()); + const extendedRoot = (await root.boundingBox())!; expect(extendedLength).toBeGreaterThan(earlyLength * 1.4); - expect(extendedLength).toBeGreaterThan(page.viewportSize()!.height * .18); - await expect(page.locator('.trunk-line')).toHaveCSS('stroke-width', '10px'); - const extendedRoot = await root.boundingBox(); - expect(extendedRoot!.height).toBeCloseTo(initial!.height, 0); - expect(extendedRoot!.y).toBeCloseTo(initial!.y, 0); + expect(extendedLength).toBeGreaterThan(page.viewportSize()!.height * .15); + // The trunk grows WHILE the root travels and shrinks, never after a hold. + expect(extendedRoot.height).toBeLessThan(earlyRoot.height - 5); + expect(extendedRoot.x + extendedRoot.width / 2).toBeLessThan(earlyRoot.x + earlyRoot.width / 2 - 2); await expect(page.locator('.demo-node:not(.root-mark)').first()).toHaveCSS('opacity', '0'); - const trunkGeometry = () => page.evaluate(() => { + const extended = await page.evaluate(() => { const path = document.querySelector('.trunk-line')!; const start = path.getPointAtLength(0).matrixTransform(path.getScreenCTM()!); const tip = path.getPointAtLength(path.getTotalLength()).matrixTransform(path.getScreenCTM()!); const root = document.querySelector('.root-mark')!.getBoundingClientRect(); return { dx: tip.x - start.x, dy: tip.y - start.y, axis: start.x - (root.left + root.width / 2), gap: start.y - root.bottom, bottom: tip.y }; }); - const extended = await trunkGeometry(); expect(Math.abs(extended.dx)).toBeLessThan(.1); expect(Math.abs(extended.axis)).toBeLessThan(.1); expect(extended.dy).toBeGreaterThan(0); expect(extended.gap).toBeCloseTo(8, 0); - expect(extended.bottom).toBeLessThan(page.viewportSize()!.height * .91); - await page.screenshot({ path: testInfo.outputPath('04-trunk.png') }); - await page.clock.runFor(850); - const docking = await trunkGeometry(); - expect(Math.abs(docking.dx)).toBeLessThan(.1); - expect(Math.abs(docking.axis)).toBeLessThan(.1); - expect(docking.gap).toBeGreaterThanOrEqual(0); - await page.screenshot({ path: testInfo.outputPath('05-docking.png') }); - await page.clock.runFor(850); // SVG/box-drawing handoff, with neither removed. + expect(extended.bottom).toBeLessThan(page.viewportSize()!.height); + await page.screenshot({ path: testInfo.outputPath('04-travelling-trunk.png') }); + await page.clock.runFor(920); // 2600ms: moving tree, SVG handoff AND panel onset. const handoff = await page.evaluate(() => { const path = document.querySelector('.trunk-line')!; const start = path.getPointAtLength(0).matrixTransform(path.getScreenCTM()!); @@ -127,6 +126,8 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({ end: Math.hypot(tip.x - (last.left + last.width / 2), tip.y - (last.top + last.height / 2)), spineOpacity: Number(getComputedStyle(document.querySelector('.branch-spine')!).opacity), trunkOpacity: Number(getComputedStyle(path).opacity), + labelOpacity: Number(getComputedStyle(document.querySelector('.demo-node:not(.root-mark)')!).opacity), + panelOpacity: Number(getComputedStyle(document.querySelector('.text-panel')!).opacity), }; }); expect(handoff.start).toBeLessThan(1); @@ -134,14 +135,22 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({ expect(handoff.spineOpacity).toBeGreaterThan(0); expect(handoff.trunkOpacity).toBeGreaterThan(0); expect(handoff.spineOpacity + handoff.trunkOpacity).toBeCloseTo(1, 4); - await page.clock.runFor(550); - await expect(page.locator(stage)).toHaveAttribute('data-phase', 'tree'); - await page.screenshot({ path: testInfo.outputPath('05-tree.png') }); - await page.clock.runFor(600); + expect(handoff.labelOpacity).toBeGreaterThan(0); + expect(handoff.panelOpacity).toBeGreaterThan(0); + const growingTreeRoot = (await root.boundingBox())!; + expect(growingTreeRoot.height).toBeGreaterThan(24.1); + await page.screenshot({ path: testInfo.outputPath('05-moving-tree.png') }); + await page.clock.runFor(200); + expect((await root.boundingBox())!.height).toBeLessThan(growingTreeRoot.height); await expect(page.locator('.call-panel')).toHaveAttribute('data-glitching'); expect(await page.locator('.call-panel .box-fill').first().textContent()).not.toMatch(/^─+$/); - await page.screenshot({ path: testInfo.outputPath('06-glitch.png') }); - await page.clock.runFor(1200); + await page.screenshot({ path: testInfo.outputPath('06-overlapping-glitch.png') }); + await page.clock.runFor(400); + const chromeOpacity = await page.locator('.site-header').evaluate((el) => Number(getComputedStyle(el).opacity)); + expect(chromeOpacity).toBeGreaterThan(0); + expect(chromeOpacity).toBeLessThan(1); + await expect(page.locator('.site-header')).toHaveAttribute('inert', ''); + await page.clock.runFor(800); await complete(page); await expect(root).toHaveCount(1); await expect(page.locator('.call-panel')).not.toHaveAttribute('inert'); @@ -191,14 +200,34 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({ await expect(page.locator(stage)).toHaveAttribute('data-phase', 'complete'); }); +for (const time of [1500, 2600]) { + test(`skipping at ${time}ms removes the moving tree transforms`, async ({ page }) => { + await page.clock.install({ time: new Date('2026-01-01T00:00:00Z') }); + await page.clock.pauseAt(new Date('2026-01-01T00:00:01Z')); + await armed(page); + await page.keyboard.press('a'); + await page.clock.runFor(time); + await expect(page.locator('.node-row').last()).not.toHaveCSS('transform', 'none'); + await page.keyboard.press('Escape'); + await complete(page); + for (const row of await page.locator('.node-row').all()) await expect(row).toHaveCSS('transform', 'none'); + await expect(page.locator('.root-mark')).toHaveCSS('transform', 'none'); + await expect(page.locator('.site-header')).toHaveCSS('opacity', '1'); + await expect(page.locator('.branch-prefix').first()).toHaveText('├── '); + await expect(page.locator('.intro-art')).toBeHidden(); + await page.clock.runFor(4000); + await expect(page.locator(stage)).toHaveAttribute('data-phase', 'complete'); + }); +} + test('skipping an active glitch restores exact text and frames', async ({ page }) => { await page.clock.install({ time: new Date('2026-01-01T00:00:00Z') }); await page.clock.pauseAt(new Date('2026-01-01T00:00:01Z')); await armed(page); await page.keyboard.press('a'); - await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit'); + await expect(page.locator(stage)).toHaveAttribute('data-phase', 'flow'); await expect(page.locator('.tap-stream-a')).toHaveCSS('opacity', '0'); - await page.clock.runFor(6100); + await page.clock.runFor(3000); await expect(page.locator('.call-panel')).toHaveAttribute('data-glitching'); await page.keyboard.press('Escape'); await complete(page);