Make the demo smooth: 30fps video on the site, 12fps GIF in the README

[Necromancervbh]

The old demo GIF felt laggy. It was stitched together from individual screenshots, which only captured about 6 frames per second at uneven intervals.

Now the demo is recorded as real video, using Playwright's screen recorder. It includes a visible cursor that glides to each button, so you can follow along.

File	Used by	Details
demo.webm	website (Chrome, Firefox, Edge)	VP9, 30 fps, 1200×760, 0.5 MB
demo.mp4	website (Safari, iPhone)	H.264, 30 fps, faststart, 0.7 MB
demo-poster.jpg	website	shown until the video starts
demo.gif	README	re-encoded at 12 fps, 800 px, tuned 96-colour palette, 2.9 MB

The landing page now uses <video autoplay muted loop playsinline> with both sources and falls back to the GIF. muted and playsinline are what let it autoplay on phones. The caption now says "Twelve seconds", to match.

The GitHub README can't play a video file from the repo, so it keeps a GIF, but a much smoother one.

Checked: in Chromium the video autoplays (it picks demo.webm, 1200 px wide, 12 s long, and was playing at 2.5 s), with no console errors.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Wm8TE3zwYDLddBccTdRBqf

---

Generated by Claude Code

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: d056bf40-fe56-4f28-987a-2789b6ad8d5c

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}