Cinematographer-grade scopes for the web
Histogram, waveform, vectorscope, and composition grids — broadcast-grade instruments for the tab you're staring at. Stop guessing. Start seeing.
Philosophy
Web dev has optimized hard for accessibility and UX metrics — and lost the visual art dimension. A page can pass every a11y audit and still be visually flat. Scopes brings the instruments cinematographers and colorists have used for decades to the one surface where the image actually lives: your browser.
Four instruments
Every scope is live. Every scope is accurate. Every scope is pointed at the same surface web developers actually ship.
01 / HISTOGRAM
Where your luminance lives.
Every pixel on the page, binned by brightness and by channel. See at a glance whether your design is crushing the blacks, blowing out the whites, or hugging the middle where most flat UI lives. Spot the crush before your users do.
02 / WAVEFORM
Where the page pulls the eye.
A column per horizontal slice of the page, plotting the luminance range at that position. Bright spikes are the places the eye lands first. Spot the attention-grabbers you meant to create — and the ones you didn't — before a stray highlight starts competing with your actual hero.
03 / VECTORSCOPE
Hue and saturation as a color wheel.
Every pixel plotted as a vector from a neutral center — angle is hue, distance is saturation. A tight cluster means your palette is holding. A chaotic spray means a third-party widget, an ad slot, or a user-uploaded image is dragging its own colors onto your page. Brand drift you can literally see.
04 / GRIDS
Rule of thirds, safe areas, golden ratio — overlayed on the live page.
Rule of thirds, safe-action and safe-title rectangles, golden ratio and phi grids, centered crosshair — the full compositional toolkit, drawn over the actual live viewport. Align your hero to the intersections cinematographers have used for a hundred years.
Install
Free · Open source · No tracking · No account
