);
}
function TerminalOverlay({ t }) {
// Slide up 9 → 10s. Stay through 14s.
// Slide up at 9s, slide back down at 14s so screenshot scene is unobstructed.
const enter = clamp((t - 9) / 1, 0, 1);
const exit = clamp((t - 14) / 0.8, 0, 1);
const easeIn = Easing.easeOutCubic(enter);
const easeOut = Easing.easeInCubic(exit);
const translateY = (1 - easeIn) * 900 + easeOut * 900;
if (t < 8.7 || t > 15) return null;
// Typewriter from 10.0 → 12.0s
const typeProgress = clamp((t - 10) / 2, 0, 1);
const payload = `// Target UI element:
url: shop.mosswear.co/p/lichen-hoodie
text: "Add to bag"
best selector: [data-testid="buy-now"]
fallback selectors: button.btn-primary, button[aria-label="Buy"]
html:
`;
const chars = Math.floor(payload.length * typeProgress);
const visible = payload.slice(0, chars);
const showFollowup = t >= 12.5;
return (
~/mosswear — claude-code
›{' '}
make the add-to-bag button disabled when cart is empty
{'\n'}
{'\n'}
Which button? Paste the element.
{'\n'}
{'\n'}
›{' '}
{visible}
{typeProgress < 1 && }
{showFollowup && (<>
{'\n'}
{'\n'}
Got it. Also, the product image is cropped weird — show me?
{'\n'}
›
)}
);
}
function SceneLabel({ t }) {
const label = getSceneLabel(t);
if (!label) return null;
return (
{label}
);
}
function getSceneLabel(t) {
if (t < 2) return '01 — the ask';
if (t < 4.2) return '02 — the page';
if (t < 7.2) return '03 — hold alt, hover';
if (t < 9) return '04 — click to copy dom';
if (t < 12) return '05 — paste';
if (t < 14) return '06 — "and the image?"';
if (t < 17) return '07 — alt + right-click';
return '08 — screenshot copied';
}
/* ── ScreenshotClip — small floating panel showing the cropped PNG
as it lands on the clipboard in the last scene (17-20s). ──────── */
function ScreenshotClip({ t }) {
if (t < 14.5) return null;
// Slide-in from right 14.5 → 15.3
const slide = Easing.easeOutCubic(clamp((t - 14.5) / 0.8, 0, 1));
const tx = (1 - slide) * 460;
// Crop-flash + fill at 17.0 → 17.8
const fill = clamp((t - 17.0) / 0.8, 0, 1);
const showPng = t >= 17.0;
return (