Measured
A full-screen concept landing built as an interaction study, not a real product. A cursor-following spotlight masks a looping product video into the lower half of a layered, moody scene, over a parallax grid and a frosted-glass navigation.
Overview
Measured is a full-screen concept landing hero, presented as a standalone interaction study rather than a real product. Move the cursor to sweep a soft spotlight across the scene, revealing a looping product video underneath the static composite.
Interaction
A hidden radial-gradient mask follows the pointer, smoothed each frame with a lerp so it trails naturally. The reveal is clipped to the lower portion of the viewport, so the layered imagery above stays intact while the product motion shows only where you look.
Craft
The frosted-glass navigation uses a mask-composite border trick, and a custom ring cursor blended with mix-blend-difference stays legible over both the dark base and the revealed video, scaling up over anything clickable.
Project stack
TypeScript
Typed end to end
Next.js
App Router + RSC
CSS3
Styling
