Personal & Portfolio

Pimboas

An animation-led, HUD-style interface with radar rings, live-looking data readouts and a boot-up sequence.

Industry
Personal & Portfolio
Technologies
  • HTML5
  • CSS3
  • JavaScript
Homepage of Pimboas
pimboas.com — homepage

About the project

Pimboas currently presents Y.O.D.A. (Your Operational Data Assistant), a full-screen, HUD-style interface with animated radar rings, data readouts and a boot-up sequence. It's an animation-led front end rather than a conventional content site.

The challenge

Pimboas wanted a front page that behaves less like a website and more like the start-up screen of a sci-fi control system, something that makes an impression in the first five seconds and sets the tone for an assistant called Y.O.D.A., Your Operational Data Assistant.

The hard part with an interface like that is keeping it smooth. Radar sweeps, counters and status lines all have to run at once, and the whole thing still has to load quickly on an ordinary laptop.

The solution

I built Y.O.D.A. as a hand-coded front end in plain HTML, CSS and JavaScript, with no framework. It opens on a boot sequence (verifying a biometric signature, establishing a secure link, connecting to the grid) before the full-screen HUD comes online with animated radar rings, data readouts and a running counter.

With no framework or heavy libraries to download, the page loads fast and the animation stays fluid. A single contact line at the bottom invites visitors to reach the brain behind it.

Technology

HTML5
Semantic structure for the HUD panels, readouts and boot sequence.
CSS3
The visual layer: the HUD styling, radar rings and animation.
JavaScript
Sequences the boot-up steps and updates the live readouts and counter.