IT Agency Website Front-End: Three.js 3D Hero, WebGL, JavaScript

Timbucode is a web and mobile development agency with a multinational team. They came with a finished Figma design for a one-page site: full-screen sections that switch between light and dark, and a hero that shows their logo as a 3D object on a white plinth. A flat picture would have made that hero feel like a poster. My job was to build the front end and make the logo live.

Industry: IT services · Services: Front-end development, Three.js / WebGL · Tools: HTML, CSS, JavaScript, jQuery, Three.js (OBJLoader, OrbitControls), WOW.js, Figma

The hero logo is a real 3D scene in Three.js, not a video or an image. The chevron, the ring and the plinth load as OBJ models, lit by an ambient light and three directional lights, one of them casting the soft shadow on the plinth. The logo floats up and down with a slow turn.

A WebGL scene keeps the processor busy even when nobody is looking at it. So the render loop only runs while the hero is fully in view: it stops as soon as you scroll down to the services and starts again when you come back. It also pauses when the browser tab loses focus.

The canvas doesn't just shrink with the screen. It re-renders at set sizes for each breakpoint: 1000 px on large desktops, then 700, 600 and 500 px as the window narrows, 400 px on tablets and 300 px on phones. Below tablet width it renders at three times pixel density, so the logo stays sharp on phone screens. On mobile, the 3D logo sits above the headline.

Timbucode got a one-page site built from their Figma design, with a hero that responds to the visitor instead of sitting still. The 3D logo runs on desktop and mobile, and it only uses the processor while it's on screen. Below it, the light-to-dark sections and 3D illustrations walk through the agency's three services: coding, design and strategy.