Skip to content

Add pixel echo tool — chromatic echo compositor - #12

Draft
lugworth wants to merge 1 commit into
masterfrom
claude/instagram-post-generator-awvluq
Draft

Add pixel echo tool — chromatic echo compositor#12
lugworth wants to merge 1 commit into
masterfrom
claude/instagram-post-generator-awvluq

Conversation

@lugworth

Copy link
Copy Markdown
Owner

What

A ninth generative tool at tools/pixel-echo/index.html, emulating the referenced glitch reel — made digidelic per the brief: chunky pixel shapes (squares, hollow frames, L-brackets, bars) each trailed by a stack of offset copies climbing a color ramp, a central vertical spine of color-cycling blocks scrolling like a conveyor, and twinkling pixel debris — all snapped hard to a pixel grid on black.

How it works

  • Every shape carries an echo direction (one of the four diagonals), a ramp shift, and a phase; echoes render back-to-front along the palette ramp — deepest coolest, front hottest
  • Echo offsets breathe on per-shape sines; shapes glitch-jump to new snapped positions at a slider-set rate; spines scroll their block sequences continuously; debris expires and respawns
  • Everything is quantized to the grid-snap size, so all motion reads as hard pixel steps — never smooth drift
  • Click the field to drop a new echo shape where you point

Controls

  • Seed — deterministic composition, ⟳ Reseed
  • Shapes — count, echo depth (1–8), echo offset, debris, spines (0–3)
  • Motion — breathe, glitch rate, spine scroll, grid snap (6–24px)
  • Style — palette (Digidelic gray→blue→cyan→green→yellow→pink, default / Arcade the reference rainbow / Ghost grayscale), format (1:1 or 4:5)
  • Actions — play/pause, ▶ Export PNG (2160px), ⏺ Rec 6s (WebM)

Standalone dist/tools-pixel-echo.html included.

Verification

Driven headlessly with Chromium/Playwright: the composition animates (glitch counter 31 → 64 over the window), the Arcade palette closely matches the reference frame (rainbow echo stacks, spine conveyor, frames/brackets, debris), the default Digidelic palette renders the same composition in brand neons, click-drop works, PNG exports at 2160×2160, and there are no console errors.

🤖 Generated with Claude Code

https://claude.ai/code/session_01XYqCAbtULbiHKDZFccNzEa


Generated by Claude Code

Ninth generative tool, after the referenced glitch reel: chunky
pixel shapes (squares, hollow frames, L-brackets, bars) trail stacks
of offset copies climbing a color ramp, a central spine of
color-cycling blocks scrolls like a conveyor, and pixel debris
twinkles across the field — everything quantized to a grid snap so
motion reads as hard pixel steps. Echo offsets breathe on per-shape
sines, shapes glitch-jump at a slider-set rate, and clicking the
field drops a new echo shape. Digidelic (brand-neon ramp, default) /
Arcade (reference rainbow) / Ghost palettes, 1:1 or 4:5, play/pause,
deterministic reseed, 2x PNG export, 6s WebM recording. Includes the
standalone dist build.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XYqCAbtULbiHKDZFccNzEa
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.

2 participants