Turn the page
into the product.
Rather than lead with a static photograph of a screen, we treated the homepage as a screen: a luminous, GPU-driven surface that reacts to the cursor, reveals imagery in pixel steps, and layers real campaign artwork into a scrolling wall of media.
The whole site had to feel like walking past eighty screens at once, not calmly, but confidently, and above all on-brand for what Screen Media actually does.
“We wanted the site to feel like walking past eighty screens at once.”
Brief, Screen Media
Three ideas. Every move followed.
Screens as texture.
Real client artwork (EV, streetwear, DTC) becomes the background. The product is literally the page.
Hero · Scroll wallSmooth over fast.
Authored easing, 60 fps floor, no cheap parallax. Every transition is a decision, not a default.
GSAP · MotionPixel-reveal as signature.
Imagery resolves from a coarse LED grid, a direct nod to the physical panels Screen Media runs on the ground.
GLSL · IdentityOne purple,
bent six ways.
A single brand hue carried from deep navy ground to near-white surface, via four steps of tinting. The navy ground does the heavy lifting for contrast.
Two voices: shout + speak.
SCREENS.
measured.
Built on the GPU,
not the DOM.
Most interactive sites reach for Three.js. Screen Media runs on OGL, a lighter, lower-level WebGL library, so the hero ships in a fraction of the bundle and holds 60 fps on mid-tier mobile.
Minimal WebGL library. A fraction of Three.js's weight. Loads fast, leaves the budget for the shaders.
Flowing distortions, gooey blends, pixelated reveals: hand-written fragment shaders on the GPU.
Timeline authoring for state transitions. Entrance, scroll hand-off, cursor-follow, all in sync.
Images de-resolve from a coarse LED grid to full detail, a direct nod to the physical panels Screen Media operates.
What the site actually sells.
Every screen.
Every size.
The site is fully responsive, from desktop immersion to mobile fluency. The WebGL hero adapts, the UI scales, and the experience holds at any viewport.
