Skip to content

feat(site): add animated compound engineering explainer to the homepage - #1780

Merged
kieranklaassen merged 1 commit into
mainfrom
feat/site-explainer-animation
Sep 25, 2026
Merged

kieranklaassen merged 1 commit into
mainfrom
feat/site-explainer-animation

Conversation

@kieranklaassen

Copy link
Copy Markdown
Collaborator

Replaces the terminal-recording GIF on the docs homepage with the animated "What is Compound Engineering?" explainer from Claude Design. It covers the effort curve, the six-step loop, the return arrow, run one and run two 18 days apart, the 80/20 split, and the install outro.

How it's built

  • assets/explainer/ce-explainer.js is a dependency-free port (~26KB) of the design's React scene. The site deliberately loads nothing third-party, so instead of React it uses a small positional DOM patcher. The 1920x1080 frame is a pure function of time, scaled to the container width.
  • Plays only while on screen and while the tab is visible. It has a pause/play button. Reduced-motion visitors get a still frame and have to press play.
  • The outro's skill and host counts come from site.data.ce at build time, so they don't go stale. The design hardcoded "36 skills · 14 hosts".
  • A visually hidden text summary stands in for the animation for screen readers.
  • The GIF stays in assets/demo/ because the root README still embeds it. Only the homepage section and its CSS are removed.

Verification

  • bundle exec rake test: 62 runs, 0 failures
  • jekyll build --strict_front_matter + htmlproofer: pass
  • Watched all seven scenes in a headless browser at 1280px and 390px. The loop restarts cleanly and there is no horizontal overflow.

Security Disclosure

No security-relevant changes. Static script, no network requests, no third-party origins.

Agent Disclosure

Claude Code · claude-opus-5-5

🤖 Generated with Claude Code

Replaces the terminal-recording GIF on the docs homepage with the
Compound Engineering Explainer animation from Claude Design, ported to a
dependency-free script so the site stays first-party only. Skill and host
counts in the outro come from site data at build time.

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

chatgpt-codex-connector Bot commented Sep 25, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-09-25T18:52:08.830099Z 33c11e8 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@kieranklaassen
kieranklaassen merged commit a763b39 into main Sep 25, 2026
6 checks passed
@github-actions github-actions Bot mentioned this pull request Sep 25, 2026
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