Skip to content

Add cool-retro-term website card animation - #185

Open
BrettKinny wants to merge 1 commit into
mainfrom
website-card-animation
Open

BrettKinny wants to merge 1 commit into
mainfrom
website-card-animation

Conversation

@BrettKinny

Copy link
Copy Markdown
Collaborator

The squarebox card on squarewavesystems.com.au has no image, while the opcilloscope card beside it uses a cool-retro-term recording. This adds a matching animation and the tooling to regenerate it.

opcilloscope card this PR
Size 400×400 animated WebP 400×400 animated WebP
Loop 121 frames × 70 ms (8.5 s) 121 frames × 70 ms (8.6 s)
File 912 KB 470 KB
  • demo/website-demo.sh plays itself with no input: host prompt → squarebox → setup checklist → MOTD → exit. The first and last frames match, so the loop is seamless.
  • demo/record-website.sh runs it in cool-retro-term on a headless Xvfb display, so nothing appears on the desktop. cool-retro-term's settings are isolated in a temp dir. The window is sized with Qt's -geometry because there's no window manager for --fullscreen. Each loop writes a timestamp, and the script uses wall-clock capture timestamps (-copyts) to cut exactly the second cycle.
  • demo/website-crt-profile.json is Default Amber with a dark bezel, an amber background glow and lower contrast. It's tuned to the opcilloscope card, which was recorded in an older cool-retro-term with a darker frame. Measured screen background: (33%, 21%, 9%) against the opcilloscope's (37%, 22%, 8%). The script loads it by seeding it as a custom profile into cool-retro-term's QML LocalStorage database.
  • The MOTD banner uses toilet's future font instead of motd.sh's smblock, which doesn't read well through the CRT effect.
  • .claude/commands/regenerate-demo.md documents how to regenerate it.

Requires cool-retro-term, xorg-server-xvfb, ffmpeg, sqlite3, gum, and toilet.

Validation:

  • Recorded several times; the cycle length was stable at 8.61 s, and I checked the frames where the loop wraps.
  • Built the website with the image in the squarebox card and screenshotted it next to the opcilloscope card.
  • tests/test-repository-consistency.sh and tests/test-provision-contract.sh pass.
  • The new scripts pass bash -n; shellcheck isn't installed here.

The website change is on a separate branch in the website repository.

🤖 Generated with Claude Code

The squarewavesystems.com.au squarebox card had no image; the opcilloscope
card beside it uses a cool-retro-term recording. Add a matching animation and
the tooling to regenerate it.

- demo/website-demo.sh: self-playing ~8.6s loop (host prompt, setup
  checklist, MOTD, exit) that starts and ends on the same frame.
- demo/record-website.sh: plays it in cool-retro-term on a headless Xvfb
  display with settings isolated from the user's profile, cuts exactly one
  cycle from per-loop timestamps, and encodes a 400x400 looping WebP.
- demo/website-crt-profile.json: Default Amber with a dark bezel and amber
  background glow, tuned to the opcilloscope card's tone; seeded into
  cool-retro-term's LocalStorage database as a custom profile.
- demo/squarebox-retro.webp: the recorded asset (121 frames at 70ms).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
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