Skip to content

feat: DatamoshEffect heal params + Datamosh Scroll demo - #215

Merged
fand merged 42 commits into
mainfrom
docs/datamosh
Oct 19, 2026
Merged

fand merged 42 commits into
mainfrom
docs/datamosh

Conversation

@fand

@fand fand commented Oct 17, 2026 •

Copy link
Copy Markdown
Owner

Summary

Let the datamosh heal block by block like a real codec, and add a scroll site demo that uses it.

Changes

  • Added heal params to DatamoshEffect
    • healRate (default 0): chance per block per frame to refresh from the clean frame.
    • healThreshold (default 1 = off): refresh blocks whose best motion match is worse than this.
    • A block refreshes if either one hits. Defaults keep the old behavior.
  • Added the new params to the Storybook datamosh pane
  • Added Datamosh Scroll example
    • One-page skateboard story; each section change skips the I-frame, so the old picture moves with the new scene's motion.
    • After a switch, holds the mosh for holdMs, then ramps healRate and fades chroma gain back to 1 over healMs, then disables the effect.
    • The old heading is moshed; the new heading stays clean on top.
    • Headings are pinned to the screen and swap with the video.
    • Per-section layouts; works on mobile.
    • Tweakpane for dup, block size, chroma gain, hold and heal times.
    • Pexels videos re-encoded to 1080p 24fps webm (35MB → 17MB).

fand and others added 2 commits October 17, 2026 11:39
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
@github-actions

github-actions Bot commented Oct 17, 2026 •

Copy link
Copy Markdown

🚀 Cloudflare Pages preview — 877e562

Page URL
Top https://docs-datamosh.vfx-js.pages.dev
Examples https://docs-datamosh.vfx-js.pages.dev/examples/
Storybook https://docs-datamosh.vfx-js.pages.dev/storybook/
Docs https://docs-datamosh.vfx-js.pages.dev/docs/

This branch URL stays the same across pushes. Latest deploy: https://a3f8e58c.vfx-js.pages.dev

fand and others added 18 commits October 17, 2026 13:25
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Storybook pane binds only healRate for healing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
@fand fand changed the title feat(effects): DatamoshEffect intra refresh + Datamosh Scroll demo feat(effects): DatamoshEffect heal params + Datamosh Scroll demo Oct 18, 2026
@fand fand changed the title feat(effects): DatamoshEffect heal params + Datamosh Scroll demo feat: DatamoshEffect heal params + Datamosh Scroll demo Oct 18, 2026
fand and others added 7 commits October 17, 2026 17:41
Datamosh Scroll drives healRate itself and binds its slider to healRate.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Keeps the old scene's picture moving with the new scene's motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Removes leadMs; the mosh only needs one frame of the old scene.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Hold 1s with healRate 0, then heal and fade chroma over 0.5s.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Leaves 1% of blocks moshed at the end of the heal.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
fand and others added 15 commits October 18, 2026 00:31
Also set blockSize back to 32 and start the hold clock on enable.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
- Preload videos and swap only once the new video has a frame.
- Cut parallax so it stays inside the 10% cover margin.
- Size the canvas from its own box so mobile URL bar changes don't stretch it.
- Fix stale datamosh header comment about clean refresh.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Blocks heal one by one at exactly healRate.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Headings are always moshed; moshText also draws the magazine text into the canvas.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Only the shown section's heading is drawn; it swaps with the video.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
The scroll-synced canvas lagged the page scroll, so pinned headings shook.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
… Scroll

Only the shown section's text is visible; it swaps with the video.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
…Scroll

Drop the rulers and scroll progress too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
…Scroll

Draw the shown heading on a plain canvas above the GL canvas.
Copy it into the moshed canvas only while moshing, so the old one smears.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Pexels clips re-encoded to 1080p 24fps VP9: 35MB to 17MB in total.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018attAihospyjqebPaUwNkn
@fand
fand merged commit 3acbda6 into main Oct 19, 2026
2 checks passed
@fand
fand deleted the docs/datamosh branch October 19, 2026 18:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant