anyframe · open-source demo
One scene, every screen.
The same scroll scene, staged for a 390 px phone and a 5120 px ultrawide, at the resolution each one needs.
Concept visual · procedural, drawn in code
Four screens, one scene
Each frame below runs the page logic at that screen's CSS size. safeframe keeps the core and its disk whole and moves the copy zone. resolve works out how many source pixels each screen really needs: cropping in around the core on a tall phone needs as many as a laptop, so the phone gets the top tier too, at a capped pixel ratio. Where it saves bytes is the connection: try 3G or 2G.
Checked on every screens
contactsheet loads this page on every profile in its matrix, from a 375 px phone to a 5120 px ultrawide, shoots each chapter and flags a subject outside the frame, copy over the subject, overlapping text, small tap targets, oversized canvases and layout shift.
No contact sheet yet: run the sheet script, then build.
Built with
- @quartifex/plumbsteady viewport and live values
- @quartifex/safeframesubject, focal point and copy zone per screen
- @quartifex/resolvesequence tier and pixel ratio per screen
- @quartifex/reelthe scrubbed sequence
- @quartifex/contactsheetthe device matrix and its flags
Open source, MIT. The sequence is encoded by rushes at build time; nothing here is a video or a photograph.