frameguide

A debug overlay drawing safe frames, focal points and text zones over any scene

Built

Source on GitHub

Demo

Aspect

9:19.59:1619.5:93:41:116:1016:921:932:9

Pixel ratio

1x1.5x2x3x

Staging

safeframeCentred crop

Concept visual

A jar, staged for every screen.

The subject stays whole and the copy stays clear.

See the specs

390 x 844 CSS px · shown at 100%

GuidesShow guides (G)SubjectFocal pointText zoneAction / title safeThirdsSocial crops

The overlay reads the staging safeframe produces, or the data attributes it writes on any staged element. Nothing here moves on its own, so there is no reduced-motion variant to switch: every change follows a control you set.

Loading the demo.

About frameguide

Status: built
Build order: 1 · gate P1

A Lab seed: small, finished and open to read, with no API promises. It may change or graduate into a library.

Motion, 3D and scroll tools from the studio. Browse free, sign in to save.

lab@quartifex.com

LabBrowse Saved Raise a ticket Account

StudioQuartifex Work Studio Book a call

LegalPrivacy Terms

Built on Three.js, GSAP and Poimandres' react-three-fiber, drei and detect-gpu. Source on GitHub.

Home Libraries Sites Seeds Saved Studio

Design toolkit for the era of motion

By continuing, you agree to the Quartifex Terms and Privacy Policy.

Browse

Home
Libraries30
Sites19
Lab seeds14

Elsewhere

Quartifex studio
Source on GitHub