[srivtx]

The site lagged whenever the poster deck was on screen: scrolling and hovering dropped to 30 fps.

Cause

Chrome drops the whole page to 30 fps while two or more videos play on screen. This happens even for plain videos on a blank page, so no CSS change helps. The fan plays six. Turning off the foil, glare, 3D tilt, clipping and shadows didn't help; pausing all but one video did. Main-thread time was low throughout, with no long tasks.

Fix

Each scene plays in a video that never goes on the page. The cards paint its frames onto canvases in one frame loop, and only when the video moves to a new frame. Nothing is removed:

• every card in the fan still plays while the deck is on screen and pauses when it scrolls away;
• the inspector card shares its scene's video with the fan card;
• on phones only the centred card plays, as before;
• with reduced motion, the stills show.

Asset URLs go to ?v=4 so browsers fetch the new deck.js and styles.css.

Measured (Chrome on an M2, 1440×900)

	Before	After
Deck on screen, all cards playing	31 fps	61 fps
Sweeping the pointer across the fan	31 fps	60 fps, no dropped frames
Inspector open	31 fps	61 fps
Hero, reel, footer	61 fps	61 fps

Also checked at 375 px (61 fps, only the centred card plays), in dark mode (no console errors) and with reduced motion (stills, no playback).

Merging this into main deploys it to morphotype.srivtx.xyz.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
morphotype	Ready	Preview	Oct 22, 2026 12:32pm UTC