luckiest-co 1.0.13 → 1.0.14

package/skills/luckiest-design-website/evals/evals.json

@@ -0,0 +1,33 @@
+{
+  "skill_name": "luckiest-design-website",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "Build me a scroll-driven landing page for my cold brew brand. I have product photos and a 20 second clip of the pour. Budget for AI assets is zero.",
+      "expected_output": "Runs the nine-question interview before generating anything and writes BRIEF.md verbatim. Because the spend cap is zero, routes to own-assets only, grades and encodes the pour clip with encode.sh, and uses CSS scroll-timeline for lightweight devices. Picks a grammar from all eight and says why the others lost, invents a signature move, runs the fingerprint gate, writes the feeling curve before the score table, and names one peak. Runs luckiest-copywriting for act headlines and the CTA label. Verifies with shoot.mjs at desktop, mobile and reduced-motion, reports INP and LCP, and calls report_usage once.",
+      "assertions": [
+        "Asks the interview questions before generating any asset",
+        "Writes BRIEF.md with feeling curve, peak, and tell-someone sentence",
+        "Uses no generated assets because the cap is zero",
+        "Names the grammar and why the other seven lost",
+        "Runs the fingerprint gate against the registry",
+        "Runs the shoot harness at desktop, mobile and reduced-motion",
+        "Reports INP and LCP readings or says they were not measured",
+        "Calls report_usage once with listing_id luckiest-design-website"
+      ],
+      "files": []
+    },
+    {
+      "id": 2,
+      "prompt": "My landing page looks AI-made. Rebuild it as an experience. Site is https://example.com and I have no brand kit.",
+      "expected_output": "Recognises the trigger and runs luckiest-extract-design-system on the URL to seed tokens. Interviews the human. Applies the hard rules against AI-slop tells: no uniform radius, no Inter as display face, no gradient text, no scroll cue, no counters. Offers, never auto-posts, the share-with-tribe hook after the report.",
+      "assertions": [
+        "Runs luckiest-extract-design-system on the URL before theming",
+        "Interviews before building",
+        "Refuses the AI-slop tells listed in the hard rules",
+        "Share-with-tribe is an offer, not an automatic post"
+      ],
+      "files": []
+    }
+  ]
+}

package/skills/luckiest-design-website/references/assets.md

@@ -0,0 +1,286 @@
+# Assets
+
+Generation through kie.ai, then encoding for scrubbing. All of it via
+`scripts/kie.mjs` and `scripts/encode.sh`.
+
+```bash
+node <skill>/scripts/kie.mjs probe                     # credit check first
+node <skill>/scripts/kie.mjs still "<prompt>" out/01.png --ar 16:9 [--ref brand.png]
+node <skill>/scripts/kie.mjs shot  "<move>"   out/01.png out/01.mp4 --dur 5 [--tail end.png]
+bash  <skill>/scripts/encode.sh out/01.mp4 assets/01.mp4
+bash  <skill>/scripts/encode.sh out/01.mp4 assets/01-m.mp4 mobile
+```
+
+Models: `seedream/5-pro-text-to-image` (and `-image-to-image` when you pass
+`--ref`) for stills, `kling/v2-1-pro` for camera moves. `aspect_ratio`,
+`quality` and `output_format` are all required by seedream; omitting any one
+returns a bare "This field is required" that does not name the field.
+
+**seedream rejects most aspect ratios, and does not say which it takes.** An
+unsupported value fails at `createTask` with `"This aspect_ratio is not within
+the range of allowed options"` and no list, which reads like a malformed request
+rather than a menu problem. Nothing is charged, so the cost is a wasted round
+trip and the time to work out that the string itself was fine.
+
+| `--ar` | Status | Returns |
+|---|---|---|
+| `16:9` | works | 2736x1520 |
+| `9:16` | works | 1520x2736 |
+| `3:4` | works | 1776x2352 |
+| `4:5` | **rejected** | n/a |
+
+The returned pixel dimensions are near the ratio rather than exactly it, so
+derive layout from the file, not from the string you asked for. Treat the table
+as the verified set rather than as the whole allowed list: **use a value from it,
+and if you need another, send one throwaway call before writing a wave of
+prompts around it.** `4:5` is the one that catches people, because it is the
+standard portrait social ratio and every other generator takes it. `3:4` is the
+portrait to reach for here.
+
+---
+
+## How many assets
+
+Fewer than you think. A six-act page needs roughly:
+
+- **2 clips.** One hero move, one texture or detail move. That is the cap from
+  SKILL.md, and it is a quality rule as much as a budget one.
+- **4 to 6 stills.** Posters for the clips, plus whatever the flow and rail acts
+  show.
+
+Every clip also needs a poster, and the poster must be **the clip's own first
+frame**, not a separate generation. Pull it with ffmpeg rather than generating
+a lookalike; a poster that does not match causes a visible jump the moment the
+video paints.
+
+```bash
+ffmpeg -y -i out/01.mp4 -frames:v 1 -q:v 2 assets/01-poster.png
+```
+
+**Use the same ffmpeg `encode.sh` resolved, not bare `ffmpeg`.** `encode.sh`
+goes looking for a full build precisely because the one on PATH may be stripped,
+but this poster line and the PSNR seam check below both call `ffmpeg` directly.
+On a stripped build the WebP muxer is missing and you get `Unable to choose an
+output format for 'poster.webp'`, which reads like a bad filename rather than a
+missing encoder, and `-lavfi psnr` fails with `No such filter: 'psnr'`. Resolve
+it once and reuse it:
+
+```bash
+FF=$(ls -d "$HOME"/AppData/Local/Microsoft/WinGet/Packages/Gyan.FFmpeg_*/ffmpeg-*-full_build/bin/ffmpeg.exe 2>/dev/null | head -1)
+"$FF" -y -i assets/01.mp4 -frames:v 1 -vf scale=1600:-2 -c:v libwebp -quality 82 assets/p01.webp
+```
+
+---
+
+## Stills
+
+1. Pick a world in [worlds.md](worlds.md) and write its preamble once.
+2. Every prompt is: **preamble, blank line, scene**. Verbatim preamble, every
+   time. This is the single thing that makes separately generated images look
+   like one shoot.
+3. Name where the empty space goes, because copy sits on these images.
+4. **Read every PNG before using it.** Generation is cheap; shipping a bad frame
+   is not.
+
+**Pass the real brand object as `--ref`.** For anything with packaging, a logo,
+or a product, hand seedream the actual asset. A label that drifts between shots
+is the first thing a client notices. It holds up remarkably well: the same can
+reads correctly across a dark kitchen, a hard-light flat-lay and a studio
+backdrop when the cutout is passed every time.
+
+---
+
+**Published unit costs** (kie.ai, as of August 2026): `seedream/5-pro` still =
+**28 credits**, `kling/v2-1-pro` 5s clip = **160 credits**. A seven-still,
+two-clip page is therefore around 520 credits. `kie.mjs probe` reports a balance,
+not a delta, so plan the spend from these numbers and probe before and after to
+confirm. Do not trust a probe delta as this build's cost if anything else is
+running against the same key (see [verify.md](verify.md)).
+
+**Plan against those rates; expect the ledger to debit roughly 0.4x of them.**
+Two reconciliations against the account with no other consumer put actual debits
+at about 38% of the per-call sum: 1447 summed against 530 debited, and 2252
+summed against 856 debited. That puts a still nearer ~11 credits and a 5s kling
+clip nearer ~61, though those are back-derived from two samples rather than
+published, so do not quote them as rates.
+
+The practical consequence: **every budget cap in this skill is conservative, and
+a build that comes in at its per-call cap has real headroom.** Keep planning at
+28 and 160, because a ceiling that never under-claims is the right one to hold a
+build to, and because the ratio is an observation about billing rather than a
+published price that will hold. But do not refuse a justified reroll on a cap
+computed at the documented rates, and do not report a per-call sum as measured
+spend.
+
+---
+
+## Real footage the client already has
+
+Supplied footage is usually **flat**: shot log-ish or picture-profiled, with no
+white point. Downscaled straight into the page it produces washed-out acts that
+no amount of scrim tuning rescues, and the instinct to fix it with a CSS filter
+over full-bleed media is the thing taste.md warns against, because a filter
+flattens the whole frame.
+
+Grade it into a pre-encode intermediate instead:
+
+```bash
+# 1. measure. YMIN/YMAX/YAVG tell you whether the clip ever reaches white
+ffmpeg -i raw.mov -vf signalstats,metadata=print:key=lavfi.signalstats.YMAX -f null -
+
+# 2. expand levels + a small saturation lift, and land the fps you want
+ffmpeg -y -i raw.mov -vf "colorlevels=rimin=0.09:gimin=0.09:bimin=0.09:\
+rimax=0.64:gimax=0.64:bimax=0.64,eq=saturation=1.08,fps=30,scale=1920:-2" \
+  -c:v libx264 -crf 16 -an graded.mp4
+
+# 3. then the normal dense-GOP encode for scrubbing
+bash <skill>/scripts/encode.sh graded.mp4 assets/01.mp4
+```
+
+Three more things real footage needs that generated clips do not:
+
+- **Trim before anyone enters frame.** "Nothing enters or leaves" is a hard
+  requirement for a clip the reader can park anywhere in, and real recordings
+  routinely have someone walk through at second nine.
+- **Target 24 to 30fps before `encode.sh`.** A 60fps phone clip at a dense GOP is
+  several times the size for motion no hand can resolve. Decimate with `fps=30`
+  in the intermediate; the dense keyframes then cost half as much.
+- **Re-encode, never stream-copy.** Cuts made with `-c copy` decode badly under
+  a scrubber.
+
+---
+
+## Camera moves
+
+`shot` takes a still and moves the camera through it.
+
+What makes a clip scrub well is not the same as what makes it watch well:
+
+- **One continuous move, one direction.** A dolly-in, a drift down, a slow
+  orbit. Any cut, snap or direction reversal becomes a jolt under the wheel,
+  because the reader controls the playhead and will sit on the reversal.
+- **Slower than feels right when previewed.** The move is spread over two or
+  three viewport-heights of scroll. A move that looks sedate at 24fps feels
+  correct under a hand.
+- **The subject stays in frame throughout.** The reader may park anywhere.
+- **Nothing enters or leaves.** A person walking in is a different shot at
+  frame 1 and frame 120, and the poster will match neither.
+
+Prompt shape: what continues, how the camera moves, then the negatives.
+
+> The camera pushes slowly and steadily forward toward the can, a smooth
+> continuous dolly-in with a very slight downward tilt. The blurred window
+> slides past on the left as parallax. The can stays perfectly still and in
+> frame throughout. One single continuous take, no cuts, no camera shake, no
+> zoom snap. Slow, cinematic, controlled.
+
+The script already sends a negative prompt covering judder, warping, morphing,
+flicker and scene changes, which are the failure modes that specifically wreck a
+scrub.
+
+### Seam locking, if you actually need a chain
+
+`--tail` pins the last frame as well as the first. Leg N's tail is leg N+1's
+head, so the joint is frame-identical:
+
+```bash
+ffmpeg -y -sseof -0.05 -i leg1.mp4 -frames:v 1 -q:v 2 seam1.png
+node kie.mjs shot "<move>" seam1.png leg2.mp4 --dur 5
+```
+
+Extract the seam frame from the **encoded** clip, not the source: re-encoding
+shifts frames slightly, and a seam built from the wrong file is a one-frame pop.
+
+**Chaining on pre-generated anchors makes the legs parallel.** Extracting each
+leg's head from the previous leg's *encoded* file forces the whole flight to
+generate serially, which is roughly 45 minutes for ten legs. Generating every
+anchor still first, then giving leg N `--tail` of anchor N+1 and head of anchor
+N, means all ten clips run at once and every joint is still frame-locked to an
+image both sides were built from. `orrery` did this for a ten-leg flight and
+measured 28.5-39.8 dB across all nine joints, inside the band the serial
+`descent` chain shipped at. The cost is that you must author the anchors as a
+coherent descent, because the model resolves a head-and-tail conflict by pulling
+the camera back.
+
+Most pages should not do this at all. A chain exists only to hide cuts between
+scenes, and varying the device between acts removes the cut instead of hiding
+it, for free and with no failure mode. Chain only when the brief is literally
+"one continuous journey".
+
+---
+
+## Encoding
+
+`encode.sh` sets a dense GOP (`-g 8` desktop, `-g 4` mobile), strips audio, and
+adds `+faststart`.
+
+The reason is the whole trick: **a normal web encode places a keyframe every two
+to five seconds.** Seeking to an arbitrary time makes the decoder walk forward
+from the previous keyframe, so a sparse-GOP file plays perfectly and scrubs like
+mud. Dense keyframes cost file size and buy responsiveness.
+
+Expect roughly 3MB for a 5s 1080p desktop clip and 1.5MB for the 720p mobile
+one. Two clips is about 9MB of video on the page, and the engine fetches each
+only as its act approaches.
+
+**Grain-heavy worlds run about double that.** Documentary grain, moving foliage
+and film texture gave 5 to 6MB per desktop clip at the script's `-crf 20`;
+`-crf 22` is a reasonable dial if a page needs the megabytes back. Longer real
+footage costs proportionally more, so a page carrying 15 seconds of supplied
+video will sit above the 9MB guideline. That can be the right trade, but make it
+deliberately rather than discovering it at the end.
+
+Audio is stripped because these clips are scrubbed, never played. A muted track
+is dead weight and an autoplay-policy hazard.
+
+**A stripped ffmpeg will fail here.** Some toolchains put an ffmpeg on PATH with
+about 50 filters and no `scale`, `fps` or `tile`. It reports `No option name
+near ...`, which reads like a syntax error in your command rather than a missing
+filter. `encode.sh` counts filters and goes looking for a real build; override
+with `SCROLLCRAFT_FFMPEG`.
+
+---
+
+## Portrait
+
+A 16:9 clip covering a 9:16 viewport crops to the middle third, and a
+composition built around negative space on the left loses exactly that space.
+
+Options, in order of cost:
+
+1. **Compose for both.** Keep the subject in the centre third and the copy in a
+   bottom band rather than in side negative space, because the bottom band
+   survives a centre crop and side space does not. Cheapest, and usually enough.
+2. **Native portrait renders.** Generate a 9:16 still and clip for the hero only,
+   wire them as `data-sc-src-mobile`, and swap the poster with `<picture>` so the
+   frame-holder matches the clip it is holding for:
+
+   ```html
+   <picture>
+     <source media="(max-width: 860px)" srcset="assets/01-hero-p.webp">
+     <img class="sc-stage__poster" src="assets/01-hero.webp" alt="">
+   </picture>
+   <video data-sc-scrub data-sc-src="assets/01.mp4"
+          data-sc-src-mobile="assets/01-p.mp4" playsinline muted></video>
+   ```
+
+   A portrait poster with a landscape clip (or the reverse) jumps visibly the
+   moment the video paints, which is the whole failure the poster exists to
+   prevent. `encode.sh` has no portrait mode; do it by hand:
+
+   ```bash
+   ffmpeg -y -i src.mp4 -vf "scale=720:-2" -c:v libx264 -crf 20 -g 4 \
+     -pix_fmt yuv420p -an -movflags +faststart assets/01-p.mp4
+   # cropping a 16:9 source to 9:16 instead of rendering native:
+   #   -vf "crop=ih*9/16:ih,scale=720:-2"
+   ```
+3. **Drop the clip on phones.** Serve the poster and let the copy carry the act.
+   Under reduced motion the engine already does exactly this, so the layout is
+   known to work.
+
+Also step the hero display size down on phones. `--sc-t-4xl` floors at 3.4rem,
+which is a desktop floor: it wraps a normal hero headline to six lines at 390px.
+See [taste.md](taste.md).
+
+Do not solve it with `object-fit: contain`. Letterboxed video on a landing page
+reads as a broken embed.

package/skills/luckiest-design-website/references/device-diag.html

@@ -0,0 +1,214 @@
+<!doctype html>
+<!--
+  device-diag: real-device scrub diagnostic for luckiest-design-website builds.
+
+  Headless verification cannot reproduce a phone's video decoder, autoplay
+  policy, Low Power Mode, or touch scrolling. When a clip is reported frozen
+  on a real device, deploy this page beside the site (same origin as the
+  clips), open it on the device, scroll up and down a few times, and read the
+  verdicts. One screenshot isolates the failing layer:
+
+    suspect-blob FROZEN, suspect-direct MOVING  -> the blob: URL path is the problem
+    suspect FROZEN, known-good MOVING           -> something specific to that clip's lifecycle
+    all MOVING                                  -> the video is fine; the fault is in the
+                                                   engine's reveal/tick path on the real page
+    all FROZEN                                  -> the device refuses scrub decode; use the
+                                                   poster fallback for that act
+
+  To use: edit the TESTS array below. Point the first two entries at the
+  suspect clip (same file, loaded two ways) and the third at a clip known to
+  work on the device. Paths resolve against this page's URL.
+
+  Scrubbing is driven by a rAF poll of scrollY, not scroll events, because a
+  driven browser can move the page without firing them.
+-->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow">
+<title>scrub diagnostic</title>
+<style>
+  * { margin: 0; box-sizing: border-box; }
+  html { background: #0b0f14; color: #e8edf2; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; }
+  body { height: 520vh; }
+  .panel { position: fixed; inset: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
+  h1 { font-size: 14px; font-weight: 600; }
+  .hint { color: #8fa0b3; }
+  .row { display: flex; gap: 8px; flex: 0 0 auto; }
+  .cell { flex: 1 1 0; min-width: 0; }
+  .cell video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; display: block; border: 1px solid #26303c; border-radius: 6px; }
+  .name { font-weight: 600; margin: 6px 0 2px; }
+  .verdict { font-size: 15px; font-weight: 700; padding: 2px 6px; border-radius: 4px; display: inline-block; }
+  .wait { background: #26303c; }
+  .ok { background: #0f5132; color: #b6f0cd; }
+  .bad { background: #6b1220; color: #ffc2cd; }
+  .stats { color: #aab7c4; font-size: 11.5px; white-space: pre-line; }
+  #meta { color: #8fa0b3; font-size: 11.5px; }
+  #log { flex: 1 1 auto; overflow: auto; background: #10161d; border: 1px solid #26303c; border-radius: 6px; padding: 8px; font-size: 11px; color: #9fb4c8; white-space: pre-wrap; }
+</style>
+</head>
+<body>
+<div class="panel">
+  <h1>scrub diagnostic — SCROLL UP AND DOWN A FEW TIMES, then read the verdicts</h1>
+  <div class="hint">A: suspect clip, blob URL (how the engine loads it) &nbsp; B: suspect clip, direct file &nbsp; C: a clip that works on this device, blob URL</div>
+  <div class="row" id="cells"></div>
+  <div id="meta"></div>
+  <div id="log"></div>
+</div>
+<script>
+(function () {
+  'use strict';
+
+  // EDIT THESE for the build under test.
+  var SUSPECT = 'assets/01-suspect-m.mp4';
+  var KNOWN_GOOD = 'assets/02-known-good-m.mp4';
+  var TESTS = [
+    { key: 'A', label: 'A suspect blob', src: SUSPECT, mode: 'blob' },
+    { key: 'B', label: 'B suspect direct', src: SUSPECT, mode: 'direct' },
+    { key: 'C', label: 'C known-good blob', src: KNOWN_GOOD, mode: 'blob' }
+  ];
+
+  var logEl = document.getElementById('log');
+  function log(m) {
+    logEl.textContent += m + '\n';
+    logEl.scrollTop = logEl.scrollHeight;
+  }
+  window.addEventListener('error', function (e) { log('JS ERROR: ' + e.message); });
+
+  var maxScrolled = 0;
+  var cellsEl = document.getElementById('cells');
+  var canvas = document.createElement('canvas');
+  canvas.width = 16; canvas.height = 16;
+  var ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+  function make(t) {
+    var cell = document.createElement('div');
+    cell.className = 'cell';
+    cell.innerHTML = '<div class="name">' + t.label + '</div>' +
+      '<span class="verdict wait" id="v' + t.key + '">…</span>' +
+      '<video muted playsinline preload="auto" id="el' + t.key + '"></video>' +
+      '<div class="stats" id="s' + t.key + '"></div>';
+    cellsEl.appendChild(cell);
+
+    var T = {
+      key: t.key, el: cell.querySelector('video'),
+      verdict: cell.querySelector('.verdict'),
+      stats: cell.querySelector('.stats'),
+      seeked: 0, hashes: {}, hashCount: 0, prime: 'not tried',
+      primed: false, priming: false, err: ''
+    };
+    T.el.muted = true; T.el.playsInline = true;
+
+    T.el.addEventListener('seeked', function () { T.seeked++; });
+    T.el.addEventListener('error', function () {
+      var e = T.el.error;
+      T.err = 'MediaError code ' + (e ? e.code : '?');
+      log(t.key + ': ' + T.err);
+    });
+    T.el.addEventListener('loadedmetadata', function () {
+      log(t.key + ': metadata, duration ' + T.el.duration.toFixed(2) + 's');
+      try { T.el.currentTime = 0.001; } catch (e) {}
+      prime(T, 'load'); // same as the engine: try with no gesture first
+    });
+
+    if (t.mode === 'blob') {
+      fetch(t.src)
+        .then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.blob(); })
+        .then(function (b) {
+          log(t.key + ': fetched ' + (b.size / 1048576).toFixed(2) + ' MB, blob URL set');
+          T.el.src = URL.createObjectURL(b);
+        })
+        .catch(function (e) { T.err = 'fetch failed: ' + e.message; log(t.key + ': ' + T.err); });
+    } else {
+      T.el.src = t.src;
+      log(t.key + ': direct src set');
+    }
+    return T;
+  }
+
+  function prime(T, why) {
+    if (T.primed || T.priming || !T.el.src) return;
+    T.priming = true;
+    var pr;
+    try { pr = T.el.play(); } catch (e) { T.priming = false; T.prime = 'threw (' + why + ')'; return; }
+    setTimeout(function () {
+      if (T.priming) { T.priming = false; if (T.prime === 'not tried') T.prime = 'play() never settled (' + why + ')'; }
+    }, 2000);
+    if (pr && pr.then) {
+      pr.then(function () {
+        T.priming = false; T.primed = true; T.prime = 'OK (' + why + ')';
+        try { T.el.pause(); } catch (e) {}
+        log(T.key + ': primed via ' + why);
+      }, function (e) {
+        T.priming = false; T.prime = (e && e.name ? e.name : 'rejected') + ' (' + why + ')';
+        log(T.key + ': play() rejected via ' + why + ': ' + (e && e.name));
+      });
+    } else { T.priming = false; T.primed = true; T.prime = 'OK sync (' + why + ')'; try { T.el.pause(); } catch (e) {} }
+  }
+
+  var tests = TESTS.map(make);
+
+  function primeAll(ev) { tests.forEach(function (T) { prime(T, ev); }); }
+  ['touchstart', 'touchend', 'pointerdown', 'click', 'scroll'].forEach(function (ev) {
+    addEventListener(ev, function () { primeAll(ev); }, { passive: true });
+  });
+
+  // scroll position drives every clip, exactly like the engine. Polled from a
+  // rAF loop rather than a scroll listener, so the diagnostic cannot be blinded
+  // by an environment that moves the page without firing scroll events.
+  var lastY = -1, lastPrimeTry = 0;
+  function loop() {
+    var maxY = document.body.scrollHeight - innerHeight;
+    var p = maxY > 0 ? Math.max(0, Math.min(1, scrollY / maxY)) : 0;
+    if (scrollY !== lastY) {
+      if (lastY !== -1 && performance.now() - lastPrimeTry > 600) {
+        lastPrimeTry = performance.now();
+        primeAll('scrollmove');
+      }
+      lastY = scrollY;
+      maxScrolled = Math.max(maxScrolled, p);
+    }
+    tests.forEach(function (T) {
+      if (!T.el.duration || T.el.seeking) return;
+      var t = p * T.el.duration * 0.98;
+      if (Math.abs(T.el.currentTime - t) > 0.02) {
+        try { T.el.currentTime = t; } catch (e) {}
+      }
+    });
+    requestAnimationFrame(loop);
+  }
+  requestAnimationFrame(loop);
+
+  function frameHash(T) {
+    if (T.el.readyState < 2) return null;
+    try {
+      ctx.drawImage(T.el, 0, 0, 16, 16);
+      var d = ctx.getImageData(0, 0, 16, 16).data, h = 0;
+      for (var i = 0; i < d.length; i += 7) h = (h * 31 + d[i]) >>> 0;
+      return h;
+    } catch (e) { return null; }
+  }
+
+  setInterval(function () {
+    tests.forEach(function (T) {
+      var h = frameHash(T);
+      if (h !== null && !T.hashes[h]) { T.hashes[h] = 1; T.hashCount++; }
+      T.stats.textContent =
+        'prime: ' + T.prime +
+        '\nreadyState ' + T.el.readyState + ' · seeks done ' + T.seeked +
+        '\ntime ' + T.el.currentTime.toFixed(2) + 's · frames seen ' + T.hashCount +
+        (T.err ? '\n' + T.err : '');
+      if (T.hashCount >= 3) { T.verdict.textContent = 'MOVING'; T.verdict.className = 'verdict ok'; }
+      else if (T.err) { T.verdict.textContent = 'ERROR'; T.verdict.className = 'verdict bad'; }
+      else if (maxScrolled > 0.35) { T.verdict.textContent = 'FROZEN'; T.verdict.className = 'verdict bad'; }
+    });
+  }, 250);
+
+  document.getElementById('meta').textContent =
+    navigator.userAgent + ' · ' + innerWidth + 'x' + innerHeight +
+    ' · dpr ' + devicePixelRatio;
+})();
+</script>
+</body>
+</html>