Skip to content

Commit 417d2fd

Browse files
itayinbarrclaude
itayinbarr
and
claude
committed
site: pin terminal heights so the mobile animation stops jumping
On mobile the two terminals' long commands (llama-server -hf ..., little-coder --model ...) and tool-flow lines wrap to extra rows, so each reveal step grew the box and shoved the page down. The min-height reservation was measured at desktop width, where everything fits on one line, so it was far too short on phones (final content ~860-1130px vs the 504/544px reserved). Measure each terminal's fully-revealed height at the current viewport and pin it as min-height before animating — synchronously (fill -> measure -> reset), so the filled state never paints. Pin at load (before the terminals are scrolled into view), re-pin on document.fonts.ready (the load-time pin uses fallback-font metrics; IBM Plex Mono wraps differently), and re-pin/replay on resize. Result: deltaH=0 across 320-1280px, no horizontal overflow — the box is fixed-size like desktop. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 9e0a018 commit 417d2fd

2 files changed

Lines changed: 120 additions & 19 deletions

File tree

‎site/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1010
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" />
1111

12-
<link rel="stylesheet" href="site.css?v=20260523" />
12+
<link rel="stylesheet" href="site.css?v=20260523b" />
1313
</head>
1414
<body>
1515

@@ -294,7 +294,7 @@ <h2 class="section-title">talk to us<br/>where the code lives.</h2>
294294
</div>
295295
</footer>
296296

297-
<script src="site.js?v=20260523"></script>
297+
<script src="site.js?v=20260523b"></script>
298298

299299
</body>
300300
</html>

‎site/site.js‎

Lines changed: 118 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -116,30 +116,91 @@
116116
}
117117
const wait = (ms) => new Promise(r => setTimeout(r, ms));
118118

119-
// ---------- install terminal sequence ----------
120-
let installTimer = null;
121-
async function playInstall(root) {
122-
if (!root) return;
123-
clearTimeout(installTimer);
124-
// reset
119+
// the commands the two terminals type, single-sourced so the up-front height
120+
// reservation below types the exact same final text the animation will.
121+
const INSTALL_CMDS = [
122+
'npm install -g little-coder',
123+
'llama-server -hf unsloth/Qwen3.6-35B-A3B-GGUF',
124+
'little-coder --model llamacpp/qwen3.6-35b-a3b',
125+
];
126+
const SESSION_CMD = 'implement the fizzbuzz exercise';
127+
128+
// Pin a terminal's *final* height before its animation starts, so the box
129+
// never grows (and shoves the page down) as commands type in and outputs
130+
// reveal. The CSS min-height is correct on desktop, where each command fits
131+
// on one line — but on mobile the long commands wrap to extra lines, so the
132+
// fully-revealed terminal is much taller than the static reservation and the
133+
// page visibly jumps mid-animation. We render the final state, measure it at
134+
// the current viewport width, and pin that as min-height. Done synchronously
135+
// (fill → measure → the caller's reset, with no await between) so the filled
136+
// state is never painted; clearing min-height first keeps the CSS value as a
137+
// floor so we never reserve *less* than desktop.
138+
function reserveTerminalHeight(root, fill) {
139+
const body = root && root.querySelector('.t-body');
140+
if (!body) return;
141+
body.style.minHeight = '';
142+
fill();
143+
body.style.minHeight = Math.ceil(body.getBoundingClientRect().height) + 'px';
144+
}
145+
function fillInstallFinal(root) {
146+
root.querySelectorAll('.t-line').forEach(l => { l.style.visibility = 'visible'; });
147+
root.querySelectorAll('.cmd').forEach((c, i) => { c.textContent = INSTALL_CMDS[i] ?? ''; });
148+
root.querySelectorAll('.t-out').forEach(o => o.classList.add('show'));
149+
}
150+
function fillSessionFinal(root) {
151+
const u = root.querySelector('.user');
152+
if (u) u.textContent = SESSION_CMD;
153+
root.querySelectorAll('.s-out').forEach(o => o.classList.add('show'));
154+
}
155+
// restore a terminal to its pre-animation frame (first prompt visible, the
156+
// rest empty/hidden)
157+
function resetInstall(root) {
125158
root.querySelectorAll('.t-out').forEach(o => o.classList.remove('show'));
126159
root.querySelectorAll('.cmd').forEach(c => { c.textContent = ''; });
127160
root.querySelectorAll('.caret').forEach(c => c.classList.remove('hide'));
128161
root.querySelectorAll('.bar-fill').forEach(b => b.classList.remove('go'));
129162
root.querySelectorAll('[data-step]').forEach(el => {
130-
if (el.classList.contains('t-line')) {
131-
el.style.visibility = 'hidden';
132-
}
163+
if (el.classList.contains('t-line')) el.style.visibility = 'hidden';
133164
});
134-
root.querySelectorAll('.t-line')[0].style.visibility = 'visible';
165+
const first = root.querySelectorAll('.t-line')[0];
166+
if (first) first.style.visibility = 'visible';
167+
}
168+
function resetSession(root) {
169+
root.querySelectorAll('.s-out').forEach(o => o.classList.remove('show'));
170+
root.querySelectorAll('.user').forEach(u => { u.textContent = ''; });
171+
root.querySelectorAll('.caret').forEach(c => c.classList.remove('hide'));
172+
}
173+
// Pin final height AND leave the terminal in its initial frame — run at load
174+
// (so the box is its final size before it's ever scrolled into view, no jump)
175+
// and again on resize. fill → measure → reset is synchronous, so neither the
176+
// filled nor a half-state is ever painted.
177+
function primeInstall(root) {
178+
if (!root) return;
179+
reserveTerminalHeight(root, () => fillInstallFinal(root));
180+
resetInstall(root);
181+
}
182+
function primeSession(root) {
183+
if (!root) return;
184+
reserveTerminalHeight(root, () => fillSessionFinal(root));
185+
resetSession(root);
186+
}
187+
188+
// ---------- install terminal sequence ----------
189+
let installTimer = null;
190+
async function playInstall(root) {
191+
if (!root) return;
192+
clearTimeout(installTimer);
193+
// re-pin the final height for the current viewport, then reset to the
194+
// initial frame (both synchronous — the filled state is never painted)
195+
primeInstall(root);
135196

136197
const lines = root.querySelectorAll('.t-line');
137198
const outs = root.querySelectorAll('.t-out');
138199
const carets = root.querySelectorAll('.caret');
139200

140201
// line 1: npm install
141202
await wait(300);
142-
await typeInto(lines[0].querySelector('.cmd'), 'npm install -g little-coder', 36);
203+
await typeInto(lines[0].querySelector('.cmd'), INSTALL_CMDS[0], 36);
143204
carets[0].classList.add('hide');
144205
await wait(220);
145206
outs[0].classList.add('show');
@@ -150,7 +211,7 @@
150211
// line 2: llama-server (pull + serve the model)
151212
lines[1].style.visibility = 'visible';
152213
carets[1].classList.remove('hide');
153-
await typeInto(lines[1].querySelector('.cmd'), 'llama-server -hf unsloth/Qwen3.6-35B-A3B-GGUF', 30);
214+
await typeInto(lines[1].querySelector('.cmd'), INSTALL_CMDS[1], 30);
154215
carets[1].classList.add('hide');
155216
await wait(220);
156217
outs[1].classList.add('show');
@@ -159,7 +220,7 @@
159220
// line 3: little-coder --model llamacpp/qwen3.6-35b-a3b
160221
lines[2].style.visibility = 'visible';
161222
carets[2].classList.remove('hide');
162-
await typeInto(lines[2].querySelector('.cmd'), 'little-coder --model llamacpp/qwen3.6-35b-a3b', 50);
223+
await typeInto(lines[2].querySelector('.cmd'), INSTALL_CMDS[2], 50);
163224
carets[2].classList.add('hide');
164225
await wait(200);
165226
outs[2].classList.add('show');
@@ -168,11 +229,17 @@
168229
installTimer = setTimeout(() => playInstall(root), 10000);
169230
}
170231

232+
// track which terminals have begun, so a viewport resize can re-pin their
233+
// height (the reservation is width-dependent) without starting one early.
234+
let installStarted = false;
235+
let sessionStarted = false;
236+
171237
// play install once on view; then it loops itself
172238
const installRoot = document.querySelector('.install-terminal');
173239
const installObserver = new IntersectionObserver((entries) => {
174240
entries.forEach(e => {
175241
if (!e.isIntersecting) return;
242+
installStarted = true;
176243
playInstall(installRoot);
177244
installObserver.unobserve(e.target);
178245
});
@@ -182,17 +249,16 @@
182249
// ---------- sample session: real tool-use flow ----------
183250
async function playSession(root) {
184251
if (!root) return;
185-
root.querySelectorAll('.s-out').forEach(o => o.classList.remove('show'));
186-
root.querySelectorAll('.user').forEach(u => { u.textContent = ''; });
187-
root.querySelectorAll('.caret').forEach(c => c.classList.remove('hide'));
252+
// re-pin the final height for the current viewport, then reset (synchronous)
253+
primeSession(root);
188254

189255
const lines = root.querySelectorAll('.s-line');
190256
const outs = root.querySelectorAll('.s-out');
191257
const carets = root.querySelectorAll('.caret');
192258

193259
// type the request
194260
await wait(400);
195-
await typeInto(lines[0].querySelector('.user'), 'implement the fizzbuzz exercise', 30);
261+
await typeInto(lines[0].querySelector('.user'), SESSION_CMD, 30);
196262
carets[0].classList.add('hide');
197263
await wait(320);
198264
outs[0].classList.add('show'); // running...
@@ -206,10 +272,45 @@
206272
const sessionObserver = new IntersectionObserver((entries) => {
207273
entries.forEach(e => {
208274
if (!e.isIntersecting) return;
275+
sessionStarted = true;
209276
playSession(sessionRoot);
210277
sessionObserver.unobserve(e.target);
211278
});
212279
}, { threshold: 0.25 });
213280
if (sessionRoot) sessionObserver.observe(sessionRoot);
214281

282+
// Pin both terminals' final heights up-front — before either is scrolled
283+
// into view — so entering the viewport never triggers a CSS-floor→final jump,
284+
// only the typing animation inside an already-correctly-sized box. Each
285+
// prime leaves the terminal in its initial frame.
286+
primeInstall(installRoot);
287+
primeSession(sessionRoot);
288+
289+
// The reservation depends on text wrapping, which depends on the font. IBM
290+
// Plex Mono loads async, so the load-time pin above uses fallback-monospace
291+
// metrics; re-pin once the real font is ready (the terminals are below the
292+
// fold, so this lands before they're ever seen). Skip any already animating —
293+
// it pinned with the loaded font when it started.
294+
if (document.fonts && document.fonts.ready) {
295+
document.fonts.ready.then(() => {
296+
if (!installStarted) primeInstall(installRoot);
297+
if (!sessionStarted) primeSession(sessionRoot);
298+
}).catch(() => {});
299+
}
300+
301+
// On resize / orientation change the wrapped final height changes. Re-pin both
302+
// (so far-off terminals stay correct), and replay the ones already animating
303+
// so their reservation matches the new width mid-flight.
304+
let resizeTimer = null;
305+
let lastW = window.innerWidth;
306+
window.addEventListener('resize', () => {
307+
if (window.innerWidth === lastW) return; // ignore mobile scroll-driven toolbar height changes
308+
lastW = window.innerWidth;
309+
clearTimeout(resizeTimer);
310+
resizeTimer = setTimeout(() => {
311+
if (installStarted) playInstall(installRoot); else primeInstall(installRoot);
312+
if (sessionStarted) playSession(sessionRoot); else primeSession(sessionRoot);
313+
}, 250);
314+
});
315+
215316
})();

0 commit comments

Comments
 (0)