ossrules.md

scrollcraft

Premium scroll-driven landing pages; scroll = timeline.

  • web-development
  • landing-page
  • scrollytelling
  • animation
  • design
  • frontend

Declared platforms: linux · macos · windows

Install
npx skills add 'https://github.com/NousResearch/hermes-agent/tree/main/optional-skills/web-development/scrollcraft'
Download bundle ↓
main · 24fd22b ↗Scanned 2026-09-15

Contributors

GitHub-linked commit authors for this SKILL.md at the saved revision. Co-authors and history before file renames are not included.

File history ↗

scripts/worldflight-assert.mjs

scripts/worldflight-assert.mjsBrowse 22 files
View on GitHub
3,731 tokens

12,951 bytes
Token encoding: o200k_base
Snapshot 24fd22b

← Back to SKILL.md
#!/usr/bin/env node/** * Worldflight rig assertions. Not a contact sheet: these are the mechanical * claims the mode makes, checked one at a time. * *   node lab/worldflight-assert.mjs --url http://localhost:4520 */import fs from "node:fs";import path from "node:path";import { createRequire } from "node:module";const { chromium } = createRequire(path.join(process.cwd(), "package.json"))("playwright-core"); const argv = process.argv.slice(2);const arg = (n, d) => { const i = argv.indexOf(n); return i > -1 && argv[i + 1] ? argv[i + 1] : d; };const URL = arg("--url", "http://localhost:4520"); const CHROME = [  process.env.SCROLLCRAFT_CHROME,  // Windows  "C:/Program Files/Google/Chrome/Application/chrome.exe",  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",  "C:/Program Files/Microsoft/Edge/Application/msedge.exe",  // macOS  "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",  "/Applications/Chromium.app/Contents/MacOS/Chromium",  "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",  // Linux  "/usr/bin/google-chrome",  "/usr/bin/google-chrome-stable",  "/usr/bin/chromium",  "/usr/bin/chromium-browser",  "/snap/bin/chromium",].find((p) => p && fs.existsSync(p)); let pass = 0, fail = 0;const ok = (name, cond, note = "") => {  if (cond) { pass++; console.log(`  PASS  ${name}${note ? "  " + note : ""}`); }  else { fail++; console.log(`  FAIL  ${name}${note ? "  " + note : ""}`); }}; const browser = await chromium.launch({ executablePath: CHROME, headless: true }); // ============================================================ desktop ======{  const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });  const errs = [];  page.on("console", (m) => { if (m.type() === "error") errs.push(m.text()); });  page.on("pageerror", (e) => errs.push(String(e)));  await page.goto(URL, { waitUntil: "domcontentloaded" });  await page.waitForSelector("html.sc-ready", { timeout: 15000 });  await page.evaluate(() => document.fonts.ready);  await page.waitForTimeout(900);   const geom = await page.evaluate(() => {    const segs = [...document.querySelectorAll("[data-sc-segment]")];    const total = segs.reduce((s, el) => s + (parseFloat(el.dataset.scW) || 1.3), 0);    const spacer = document.querySelector("[data-sc-spacer]");    const stage = document.querySelector("[data-sc-world]");    return {      vh: innerHeight, total,      weights: segs.map((el) => parseFloat(el.dataset.scW) || 1.3),      spacerH: spacer.getBoundingClientRect().height,      wantH: Math.round((total + 1) * innerHeight),      docH: document.body.scrollHeight,      stagePos: getComputedStyle(stage).position,      stageRect: (({ top, left, width, height }) => ({ top, left, width, height }))(stage.getBoundingClientRect()),      copyPos: getComputedStyle(document.querySelector("[data-sc-world-copy]")).position,      seam: parseFloat(document.querySelector('[data-sc-mode="worldflight"]').dataset.scSeam),    };  });  console.log(`\nDESKTOP  vh=${geom.vh}  weights=[${geom.weights}]  total=${geom.total}vh`);   ok("spacer height = (sum weights + 1) x vh",    Math.abs(geom.spacerH - geom.wantH) <= 1, `got ${Math.round(geom.spacerH)}px want ${geom.wantH}px`);  ok("document scroll height is the spacer",    Math.abs(geom.docH - geom.wantH) <= 2, `doc ${geom.docH}px`);  ok("stage is position:fixed and fills the viewport",    geom.stagePos === "fixed" && geom.stageRect.height === geom.vh && geom.stageRect.top === 0);  ok("copy layer is position:fixed", geom.copyPos === "fixed");   // Nothing in flow but the spacer: at any scroll position, the only static or  // relative element that extends past the fold is the spacer and its ancestors.  const flow = await page.evaluate(() => {    const bad = [];    document.querySelectorAll("body *").forEach((el) => {      const cs = getComputedStyle(el);      if (cs.position === "fixed" || cs.position === "absolute") return;      if (el.hasAttribute("data-sc-spacer") || el.hasAttribute("data-sc-mode")) return;      const r = el.getBoundingClientRect();      if (r.height > 4 && r.bottom > innerHeight + 4) {        bad.push(el.tagName + "." + (el.className || "").toString().slice(0, 30));      }    });    return bad;  });  ok("nothing in document flow but the spacer", flow.length === 0, flow.join(", "));   // ---- lerp convergence, inside one leg ----------------------------------  const seg0 = geom.weights[0];  const A = Math.round(0.10 * seg0 * geom.vh);  const B = Math.round(0.85 * seg0 * geom.vh);  await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), A);  await page.waitForTimeout(1400);   const trace = await page.evaluate(({ y }) => new Promise((res) => {    const v = document.querySelectorAll("[data-sc-segment] video")[0];    const clip = window.__sc.clips.find((c) => c.el === v);    const s = [];    scrollTo({ top: y, behavior: "instant" });    let n = 0;    (function f() {      s.push(+v.currentTime.toFixed(4));      if (++n < 70) requestAnimationFrame(f);      else res({ s, target: clip.target * (v.duration || 1), dur: v.duration, lerp: clip.lerp });    })();  }), { y: B });   const seq = trace.s;  const start = seq[0], end = seq[seq.length - 1];  const distinct = [...new Set(seq)];  const monotone = seq.every((v, i) => i === 0 || v >= seq[i - 1] - 1e-6);  const overshoot = Math.max(...seq) - trace.target;  console.log(`  playhead ${start.toFixed(3)}s -> ${end.toFixed(3)}s  target ${trace.target.toFixed(3)}s  lerp ${trace.lerp}  ${distinct.length} distinct values`);  ok("playhead is lerped, not written 1:1", distinct.length >= 4, `${distinct.length} distinct steps across 70 frames`);  ok("playhead is strictly monotone toward its target", monotone);  ok("playhead does not overshoot", overshoot <= 0.02, `max excess ${overshoot.toFixed(4)}s`);  ok("playhead converges on the target", Math.abs(end - trace.target) < 0.05,    `residual ${Math.abs(end - trace.target).toFixed(4)}s`);  ok("lerp rate is the 0.18 default", Math.abs(trace.lerp - 0.18) < 1e-9);   // ---- deadband: no seek thrash while the page is still -------------------  await page.waitForTimeout(900);  const seeks = await page.evaluate(() => new Promise((res) => {    let n = 0;    const vs = [...document.querySelectorAll("video")];    const h = () => n++;    vs.forEach((v) => v.addEventListener("seeked", h));    setTimeout(() => { vs.forEach((v) => v.removeEventListener("seeked", h)); res(n); }, 1000);  }));  ok("deadband holds: no seeks over 1s of stillness", seeks === 0, `${seeks} seeked events`);   // ---- crossfade band ----------------------------------------------------  const boundary = seg0 * geom.vh;  const half = (geom.seam / 2) * geom.vh;  const band = [];  for (let i = 0; i < 5; i++) {    const y = Math.round(boundary - half + (2 * half) * (i / 4));    await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);    await page.waitForTimeout(120);    band.push(await page.evaluate(() => {      const segs = [...document.querySelectorAll("[data-sc-segment]")];      return segs.map((s) => +(parseFloat(getComputedStyle(s).opacity) || 0).toFixed(4));    }));  }  const incoming = band.map((b) => b[1]);  const outgoing = band.map((b) => b[0]);  console.log(`  seam band  incoming=[${incoming}]  outgoing=[${outgoing}]`);  ok("incoming leg opacity is strictly monotone across the seam",    incoming.every((v, i) => i === 0 || v > incoming[i - 1]));  ok("incoming leg starts at 0 and ends at 1", incoming[0] <= 0.02 && incoming[4] >= 0.98);  // The outgoing leg must hold at full strength for the whole dissolve and only  // release once the incoming one covers it completely. A crossfade where BOTH  // sides are partly transparent shows the page ground through the middle of  // the seam, which is the flash this mode exists to remove.  ok("outgoing leg holds full opacity while the incoming one is still arriving",    incoming.every((v, i) => v >= 0.999 || outgoing[i] >= 0.999), `[${outgoing}]`);  ok("outgoing leg only releases once it is fully covered",    outgoing[4] === 0 && incoming[4] >= 0.999);   // ---- copy transform cap ------------------------------------------------  const maxT = [];  for (let i = 0; i <= 12; i++) {    const y = Math.round((geom.docH - geom.vh) * (i / 12));    await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);    await page.waitForTimeout(60);    maxT.push(await page.evaluate(() => {      let m = 0;      document.querySelectorAll("[data-sc-copy]").forEach((el) => {        const t = new DOMMatrixReadOnly(getComputedStyle(el).transform);        m = Math.max(m, Math.abs(t.m42), Math.abs(t.m41));      });      return +m.toFixed(2);    }));  }  const worstT = Math.max(...maxT);  ok("copy never translates past 4vh", worstT <= geom.vh * 0.04 + 1,    `worst ${worstT}px, cap ${(geom.vh * 0.04).toFixed(0)}px`);   // ---- every leg reaches full opacity, every clip leaves its poster -------  const reach = {};  for (let i = 0; i <= 24; i++) {    const y = Math.round((geom.docH - geom.vh) * (i / 24));    await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);    await page.waitForTimeout(260);    const s = await page.evaluate(() => [...document.querySelectorAll("[data-sc-segment]")].map((el, i) => ({      i, op: parseFloat(getComputedStyle(el).opacity) || 0,      painted: el.classList.contains("sc-has-clip"),    })));    s.forEach((x) => {      reach[x.i] = reach[x.i] || { op: 0, painted: false };      reach[x.i].op = Math.max(reach[x.i].op, x.op);      reach[x.i].painted = reach[x.i].painted || x.painted;    });  }  ok("every leg reaches full opacity",    Object.values(reach).every((r) => r.op >= 0.99),    Object.entries(reach).map(([i, r]) => `${i}:${r.op.toFixed(2)}`).join(" "));  ok("every leg paints a real frame (no clip stuck on poster)",    Object.values(reach).every((r) => r.painted),    Object.entries(reach).map(([i, r]) => `${i}:${r.painted ? "clip" : "POSTER"}`).join(" "));   ok("no console errors", errs.length === 0, errs.slice(0, 3).join(" | "));  await page.close();} // ==================================================== reduced motion ======={  const page = await browser.newPage({    viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1, reducedMotion: "reduce",  });  const media = [];  page.on("request", (r) => { if (/\.(mp4|webm)(\?|$)/.test(r.url())) media.push(r.url()); });  await page.goto(URL, { waitUntil: "domcontentloaded" });  await page.waitForSelector("html.sc-ready", { timeout: 15000 });  await page.waitForTimeout(800);  console.log("\nREDUCED MOTION");   const rmSeen = { legs: {}, copy: {} };  for (let i = 0; i <= 20; i++) {    const h = await page.evaluate(() => document.body.scrollHeight - innerHeight);    await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), Math.round(h * (i / 20)));    await page.waitForTimeout(90);    const s = await page.evaluate(() => ({      legs: [...document.querySelectorAll("[data-sc-segment]")].map((el) => ({        op: parseFloat(getComputedStyle(el).opacity) || 0,        poster: (() => { const p = el.querySelector(".sc-world__poster"); return p ? getComputedStyle(p).transform : "none"; })(),      })),      copy: [...document.querySelectorAll("[data-sc-copy]")].map((el) => ({        t: (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 24),        op: parseFloat(getComputedStyle(el).opacity) || 0,        tf: getComputedStyle(el).transform,      })),    }));    s.legs.forEach((l, k) => {      rmSeen.legs[k] = rmSeen.legs[k] || { op: 0, tf: new Set() };      rmSeen.legs[k].op = Math.max(rmSeen.legs[k].op, l.op);      rmSeen.legs[k].tf.add(l.poster);    });    s.copy.forEach((c) => {      rmSeen.copy[c.t] = rmSeen.copy[c.t] || { op: 0, tf: new Set() };      rmSeen.copy[c.t].op = Math.max(rmSeen.copy[c.t].op, c.op);      rmSeen.copy[c.t].tf.add(c.tf);    });  }  await page.waitForTimeout(500);   ok("no clip is ever fetched", media.length === 0, media.join(", "));  ok("every leg's poster still reaches full opacity",    Object.values(rmSeen.legs).every((l) => l.op >= 0.99),    Object.entries(rmSeen.legs).map(([i, l]) => `${i}:${l.op.toFixed(2)}`).join(" "));  ok("no poster transform",    Object.values(rmSeen.legs).every((l) => [...l.tf].every((t) => t === "none")));  ok("every copy block still reaches full opacity",    Object.values(rmSeen.copy).every((c) => c.op >= 0.99),    Object.entries(rmSeen.copy).map(([t, c]) => `${c.op.toFixed(2)} "${t}"`).join(" | "));  ok("no copy transform",    Object.values(rmSeen.copy).every((c) => [...c.tf].every((t) => t === "none")));  await page.close();} await browser.close();console.log(`\n${pass} passed, ${fail} failed`);process.exit(fail ? 1 : 0);
← All Hermes Agent skillsProject instructions →