[Zach Dunn (zachdunn)]

The home page hero now shows what the skill makes. Under the headline, each example is laid out as a cluster on a tilted table:

• The post: a tall page.
• Two of its figures: pulled out beside the post, each with a leader line to where it sits.
• The deck and the video.
• The room (Sunny's cluster only): the room from Sunny's post, as a 3D model, with a camera orbiting it.

The camera settles on one cluster, glides to the next, and wraps back to the first. A chip types out the request that made the cluster in view, and a pager under it (a bar per cluster, named only for screen readers) jumps to any cluster. Pointing at an object lifts it off the table.

How it's built

• One three.js scene. site/assets/hero/hero.js draws everything; the positions live in layout.js. The chip and pager are plain HTML over the canvas.
• Usage line: the /buildnotes [post | video | deck] what to explain template sits in a code box like the install command. On a narrow screen it breaks only before the brief, which hangs under the output word, so it still reads as one command.
• Rendering: the scene renders only when something changes. That's every frame during a glide or lift, 30 fps while the hero is on screen, and nothing when it's scrolled away or the tab is hidden. It renders at up to 1.25× the screen's density, into a 2× multisampled target.
• Images: each image is cut to the width it's drawn at, in a desktop size and a phone size. The GPU holds images decoded whatever their file format, so pixel count is what costs memory.
• Poster: a baked poster of the Sunny view shows until the scene is ready. It stays, with the pager hidden, under reduced motion or without WebGL.
• site/hero.mjs: cuts the images from site/hero/src/ and bakes the posters with Chrome, the same way card.mjs renders its link-preview cards. Its output is committed, so the site build still needs nothing installed.
• three.js r160: served from the site itself, like the fonts, through an import map. Its LICENSE file sits next to it.
• room.glb: exported from site/hero/room.blend.
• Build: site/build.mjs copies site/assets/hero/ whole, because the script loads its own files.
• Worker: wrangler.jsonc now routes the hero's videos through the Worker too, for HTTP Range responses. Safari won't play an MP4 without them.

What it costs

These are from headless Chrome on an M3 Max GPU, with three runs each, measured on prototypes of this design before the port.

• Glide: the hero holds 60 fps on desktop. A CSS 3D version of the same design dropped to about 30 fps in two of three runs.
• GPU memory: at rest, the hero roughly doubles the home page's GPU memory over a blank page. On desktop it's about 125 MB before and about 275 MB after; on phones (390 px) about 63 MB before and about 170 MB after.
• Compared with other sites: on desktop, stripe.com and linear.app each use about 470–525 MB over a blank page.
• Downloads: about 160 KB compressed for three.js, 350 KB for the model, 0.9 MB of video in total (only the video in view loads), and 0.5 MB of images and posters.

Screenshots

Before	After

The table at 1440 px, with Sunny's cluster in view:

390 px	390 px, reduced motion (the poster)

Checks

• npm test passes. One new test checks that the import map, the scene, the model, the videos, both image sizes and the posters all reach the build.
• Checked in Chrome at 1440 px and 390 px:
  • the scene renders, glides and wraps back to the first cluster;
  • hovering lifts objects;
  • there's no horizontal scroll;
  • the reduced-motion and no-WebGL posters line up with the live scene.
• Not checked on a real phone or in Safari.

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one): 2

• coderabbit:review
• review

🚫 Excluded labels (none allowed): 1

• wip

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 779d2dc4-3d02-40f4-95f0-3dd2e7727cfe

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.}

[uploads-sh]

5 files · View all on uploads.sh →

Before before

After after

after

after

after

_{Maintained by uploads.sh · add media: uploads put <file> --pr 45 · docs}