Capture and diagnose animated canvas runtime instead of freezing static state

[chubes4]

Reproduction

Import a non-WordPress static one-page site where a same-origin script.js animates a <canvas> in response to pointer motion, progressively reveals editable text through timed DOM updates, and replays an interaction on click.

The LIQUID BONSAI reference import with Data Liberation 0.6.7 captures the rendered text and downloadable resources/script.js, but website/index.html has no script reference. The retained static artifact has a blank canvas and frozen clock/status. Headless Chromium observed the live site transition from Synchronizing to ALL SYSTEMS ACTIVE after 12 seconds; moving the pointer changes the canvas SHA-256 from 1fcf3ad9c4e6c7a1 to cb743885ebfa31dd. At the same intervals the portable capture's canvas hash remains 1fcf3ad9c4e6c7a1, and pointer motion leaves it unchanged. Captured content stays frozen at the capture time. The WordPress result has no canvas at all.

Acceptance

• Model runtime-dependent visual and interaction behavior as a diagnosed, explicit capability across capture/export and WordPress conversion; never report full parity from static snapshot counters while source animation/interaction is lost.
• Provide a generic route for self-contained source animation or a genuinely editable block implementation, preserving editable text and source behavior without source-specific JavaScript or platform rules. Confirm in Chromium with a neutral animated-canvas fixture: startup transition, pointer ripple, click replay, and a usable editor after save.
• Compare source to capture and capture to WordPress independently at 390, 768 and 1440 px, and surface a hard blocker until actual interactive parity is proven.

AI assistance: GPT-6 Sol via OpenCode investigated and authored this issue; Chris Huber sets the full-motion parity goal and retains merge authority.

[chubes4]

Current reproduction and remaining hard blocker

The September 28 loop imported LIQUID BONSAI with DLA 0.6.9, SSI 1.19.4, and WordPress 7.1.2. Three scoped Blocks Engine patches cover nested shell containment (#2297), inline script-target IDs/clock geometry (#2301), and an editable native canvas (#2302). A fresh combined import matches the portable capture's heading, information row, footer, and 905px document height exactly at 390, 768 and 1440px, with a valid Gutenberg canvas block. These are draft, unmerged PRs.

Motion is still absent. On the live source, #status-text changes from Synchronizing to ALL SYSTEMS ACTIVE in ~12 seconds and pointer movement changes the canvas bitmap. On the portable artifact and WordPress result the canvas hash remains the same before/after pointer movement, clock/status are frozen at capture time, and captured body.loading remains true. DLA captured 16,166 bytes of same-origin /script.js in resources/ but removed the executable script from website/index.html by its explicit safeCapturedPageHtml policy. A transient browser-only experiment on the combined WordPress DOM, with the original script and missing #sync-dots element injected, reproduced clock/status progress and a pointer-changing canvas bitmap. This proves the animation depends on an executable runtime and at least one runtime-created DOM target; a static screenshot or canvas element alone cannot supply it.

Draft DLA #435 records first-party canvas/pointer/timer/click signals with source hashes and makes source comparisons fail instead of calling the frozen artifact solved. Its checks are still running. A complete fix needs a source-neutral, isolated runtime capability that can execute or faithfully translate source animation while keeping site text and canvas settings editable as native/custom blocks. The existing policy forbids shipping arbitrary provider scripts into a WordPress origin, and an opaque preserved runtime island would not satisfy this loop's zero-island, fully editable acceptance gate. Please keep this issue open until a safe runtime contract and a fresh 390/768/1440 browser+editor replay establish startup, pointer ripple, and click behavior on WordPress itself.

AI assistance: GPT-6 Sol via OpenCode performed source/capture/WordPress Playwright probes, paired imports, and drafted this evidence. Chris Huber directed the loop and retains merge authority.

[chubes4]

September 29 source/candidate gate update

• BE #2322 (editable live clock), #2328 (subset fonts) and #2330 (finite sequence readiness) merged and shipped in php-transformer-v0.25.0. DLA #449 fixed the clipped keyboard skip-link text audit and shipped in v0.6.14.
• DLA #452 merged an independent live source/candidate browser gate: data-liberation compare <capture-dir> --candidate <candidate-url> --motion-contract <json>. A neutral static candidate with matching final text fails; a candidate that animates but skips the first visible startup/click phase also fails. The static portable HTML capture remains diagnosed as motion unreproduced in every candidate report.
• That stronger comparison exposed one real remaining site gap: the editable WordPress status skipped the source’s Synchronizing… pending phase on startup and replay at 390/768/1440px. BE #2332 adds author-configured pending text, cycling dots and replay delay to the generic editable text-motion block. A separate disposable WordPress clone with exactly those generated editor/view asset changes passed Gutenberg save/reload with valid blocks; source/candidate clock, first visible status, five click replays, idle-controlled pointer canvas and text comparison passed at all three widths. Independent source/WordPress section boxes and 905px document height matched at 390/768/1440px.
• Still open: #2332 stays draft until an SSI development package of its committed BE branch produces a fresh importer-built site. Homeboy’s 150 GiB filesystem reserve currently rejects the local build (~10 GiB short); the remote solved-fixture gate failed twice before fixture execution downloading Playground wp-cli.phar (CI run). No repo gate was bypassed. The cloned-site proof demonstrates the runtime/editor behavior but does not establish package admission. Please keep Capture and diagnose animated canvas runtime instead of freezing static state #425 open until that paired proof and checks pass.

AI disclosure: GPT-6 Sol via OpenCode instrumented live Chromium source/WordPress behavior, implemented and tested both reusable PRs, verified the disposable editor/site proof, and summarized blockers. Chris Huber directs acceptance and merge.

[chubes4]

Fresh importer-built candidate, verifier correction, and remaining capture scope

A fresh SSI 8a8200dc4446 + Blocks Engine 13f7003c62b3 branch package imported the retained LIQUID BONSAI capture to a distinct disposable WordPress site at http://localhost:8915 (/Users/chubes/Studio/liquidbonsai-motion-pending-built-20260929). Import compiled 31 blocks with zero fallbacks/islands/unsupported losses. The built-in editable canvas preserved the surface; optional live clock and text-motion companions were manually authored from the same packaged BE branch generator definitions, then saved and reloaded in Gutenberg. All 21 registered editor blocks validated. A real paragraph edit and click replay preserved the new text; restoring it via Gutenberg returned source parity. BE #2332 merged with green CI and released in php-transformer-v0.26.0.

Independent DLA source/candidate comparisons against the fresh WordPress site passed 390/768/1440px: startup first-visible Synchronizing… phase, dynamic local clock/date, all five click replays, idle-controlled canvas pointer painting and final text. Screenshot fidelity check passed all three widths, reporting 1.0000 rounded pixel scores as non-gating evidence; source/WordPress section boxes and 905px document heights matched. Default 1600/1728px typography/text checks passed. During a post-edit replay, the source’s finite final canvas ripple outlasted the comparator’s fixed 2.5s wait; DLA #454 now waits for a bounded quiet interval before the pointer control. Its neutral regression, 117-file/1,394-test suite, real three-width candidate check and CI passed; it shipped in v0.7.3.

Still unsolved as a portable artifact: direct source → capture DLA comparison at 390/768/1440px correctly fails the canvas/pointer/frame/timer/click signals and also reports 185 vs 186 text characters and only 14/18 (78%) typography matches. website/index.html remains script-free with a blank canvas. The editable WordPress candidate passes because its author separately configured native/reusable blocks; the captured HTML itself has not gained equivalent runtime behavior. Keep this issue open for the capture-side artifact contract and do not label that capture fully faithful from the WordPress result.

Reproduce candidate: data-liberation compare /Users/chubes/Studio/liquidbonsai-motion-full-proof-20260929-source/liquidbonsai.com --candidate http://localhost:8915 --motion-contract /Users/chubes/Studio/liquidbonsai-motion-contract.json. Published verifier version: DLA v0.7.3. Local candidate-motion evidence: compare/candidate-motion-evidence.json under the retained capture.

AI disclosure: GPT-6 Sol via OpenCode performed the fresh paired import, authored editable WordPress motion, verified source/candidate behavior and editor persistence, fixed the finite-ripple verifier false negative, and wrote this audit. Chris Huber directs the parity goal.

[chubes4]

Correction to the static-capture reading above: the one-character text-length difference in the 390px run is the frozen date, not missing editorial text: the live source rendered TUESDAY, SEP 29, 2026 (186 total chars) while the retained script-free capture still showed MONDAY, SEP 28, 2026 (185). The earlier 14/18 typography coverage also reflected time-varying clock/date text keys and was not consistently reproduced on the next comparison; the subsequent 390px run reported only text-length + motion failures. This reinforces the same capture-side runtime gap. The editable WordPress candidate uses the visitor-local live-clock block and passes independent clock checks.

After actually editing and then restoring the legal paragraph through Gutenberg on the fresh import, source candidate comparison briefly reported source idle: false; responds: true at 1440px because a finite source canvas ripple was still fading. DLA #454 now bounds a quiet-window control; full browser/package/CI checks passed and it shipped in v0.7.3. Repeating the full source/candidate gate after that edit passed 390/768/1440px (all screenshots scored 1.0000 rounded as evidence, all motion probes passed) and the default 390/1600/1728px checks passed.

AI disclosure: GPT-6 Sol via OpenCode inspected exact per-node browser typography and current/frozen date values, corrected the prior classification, and reran the fresh WordPress parity gate. Chris Huber directs acceptance.

[chubes4]

September 29: authored portable capture now executes and verifies independently

DLA #458 merged with green full CI and shipped in v0.8.0. data-liberation https://liquidbonsai.com/ --portable-motion <author-recipe.json> now stages a self-contained HTML artifact, attaches only independently authored, SHA-pinned reusable runtimes, refuses any hash matching the retained source scripts, checks all routes offline, and proves startup text/indicator visibility, local clock/date, five click replays and canvas idle/pointer response against the live source before committing the output. Plain compare <run-dir> (no --candidate) rechecks script hashes and source behavior every time. Neutral Chromium tests reject unchanged source scripts, visually wrong initial states and script tampering while confirming edited captured text replays its new value.

Fresh live proof: /Users/chubes/Studio/liquidbonsai-portable-verified-20260929/liquidbonsai.com/website came from a fresh CLI run on the live URL and the published-compatible authored recipe. Plain DLA compare passes source→portable interaction at 390/768/1440px and default 1600/1728px text/font, with screenshot evidence 0.9998/0.9999/1.0000 rounded at the three target widths. The raw captured source JS is still stripped. The exported website/ contains its independent runtime assets and runs by itself; portable-motion.json holds only relative file refs and SHA-256 pins.

Capture→WordPress proved separately: Blocks Engine #2346, green CI and shipped in php-transformer-v0.26.5, now lowers the authored canvas effect and two config markers automatically to native editable canvas, motion and clock blocks. A fresh paired SSI/BE import from that authored portable output to /Users/chubes/Studio/liquidbonsai-portable-native-final-20260929 reported 33 compiled blocks, zero fallbacks, zero runtime islands, zero content loss and no runtime dependency failures. Real Gutenberg saved/reloaded the imported motion block with all blocks valid; editing the native legal paragraph, reloading and clicking replay retained the edited text, then restoring through Gutenberg re-established source parity. Direct source→WordPress and independent authored portable→WordPress Chromium behavior both passed at 390/768/1440px, including status-dot visibility, clock/date, five clicks and canvas input. Source→WordPress screenshot evidence scored 0.9998/0.9999/1.0000 rounded.

Precision: these pixel scores are informational and rounded, not a bit-for-bit visual gate; the source and both destinations have live blinking/pointer behavior. The capture behavior and all three stages of the editable import pipeline are now verified for the explicitly authored LIQUID BONSAI recipe. This remains an opt-in authoring flow rather than automatic translation of arbitrary source JavaScript.

AI disclosure: GPT-6 Sol via OpenCode implemented and tested DLA portable authoring, diagnosed and repaired BE native projection/marker/paragraph behavior, ran fresh live capture and SSI import, exercised Gutenberg edit/replay, and independently compared source/capture/WordPress in Chromium. Chris Huber directs parity acceptance.

[chubes4]

Update: this is now solved generically. A plain URL capture of the reference site (a clock, typewriter-reveal and canvas-ripple page) reproduces its behavior with no site recipe.

• Learned from the source: sequential text reveals, a pending message with cycling dots, reveal-driven visibility, click replays, and a visitor-local clock with its startup frames. The values come from two controlled browser observations, and no editorial copy is embedded (#485, released in v0.9.0).
• Canvas: the canvas algorithm is not re-derived. The page's own hash-verified drawing script runs behind a DOM membrane: canvas, contexts and listeners are live, and all writes to page content are discarded.
• Promotion gate: nothing reaches website/ until a staged copy matches the live source at 390/768/1440. Anything the learner cannot express is recorded on the receipt and fails compare visibly.
• WordPress: Blocks Engine lowers the markers to editable motion-sequence and live-clock blocks and drops the static interpreter (blocks-engine#2360, php-transformer v0.27.0).
• Evidence: from a fresh capture, plain compare of the portable site passes, and compare --candidate of the Studio WordPress import passes against the live source, including the canvas pointer probe. The import has 0 fallback blocks. A Gutenberg edit → save → front-end replay audit passes.

Limit: canvas code that depends on content it would have created itself cannot run behind the membrane. It stays an explicit residual.

AI disclosure: GPT-6.1 Sol via OpenCode implemented this and ran the proofs; Chris Huber directs the work.