Skip to content
Orage Studio: A Modular WebGL Grid That Feels Like a Visual Operating System

Orage Studio: A Modular WebGL Grid That Feels Like a Visual Operating System

Orage's homepage runs on a custom WebGL canvas-masking engine. Shader-driven tiles flicker and sync like data packets, the menu is drag-and-drop, and the whole thing boots like a terminal. Built by Beaucoup with Three.js, GSAP, and a deep commitment to the retro-tech aesthetic.

Details

Published

What it is

Orage Studio's homepage looks like someone turned a VFX pipeline into a website, then fed it through a 1980s mainframe boot sequence. The Paris-based studio partnered with Beaucoup Studio to build something that feels more like a visual operating system. The centerpiece is a modular WebGL grid where each cell is a dynamic canvas masking video fragments. Tiles flicker like data packets, video syncs and desyncs in rhythmic waves, and the whole thing breathes with shader-driven time offsets. You can drag the menu around and drop it anywhere on screen. The loader mimics a system boot, complete with terminal authentication.

Beaucoup is a Lyon-based creative studio with Awwwards Studio of the Year nominations under their belt. Their technical approach here leans on Three.js for the canvas-masking grid engine, GSAP for micro-interaction timing, Taxi.js for view transitions, and Lenis for that buttery scroll. The real magic is how tightly the aesthetic commits to its conceit: monospace type, blinking cursors, surveillance-style windows, controlled glitches. They borrowed the rhythm of command-line interfaces without making it feel like a gimmick. The dual project view lets you browse either as a cinematic card grid or a terminal-style list, which is a smart nod to how different brains want to parse information.

Go play with it. Drag that menu around. Watch the cells compile on load.

How it’s made

Technology
WebGL
Framework & Tool
Three.jsGSAP
Domain
Portfolio
Subject
Retro