Nostalgia for the Future: Vibe Coding a Sci-Fi Dream

vibe-coding web three-js retro
Screenshot of xaviermalina.com — a sci-fi pixel interface inspired by The Dig, Starsiege, and Fallout

How I bullied Gemini into building a Fallout-style pixel interface because I missed 90s adventure games

I have zero business building a 3D site. I've never touched a shader. I don't know Three.js.

But I had a specific itch. And I was tired of giving Squarespace 30 bucks a month.

I wanted my personal site, xaviermalina.com, to feel like a lost memory. I wanted to recreate the specific feeling of playing LucasArts' The Dig (1995) for the first time — that sense of isolation, alien mystery, and cinematic wonder.

I didn't want a portfolio. I wanted a transmission from deep space.

The Aesthetic: "High-Tech Junk"

The vision was "survival UI." I didn't want clean vectors; I wanted crunchy pixels.

The Atmosphere (The Dig): I wanted the site to feel like Cocytus — barren, mysterious, and lit by a dying sun. We used a "Phosphor Teal" palette against deep space black to capture that lonely, cinematic vibe.

The Structure (Starsiege): The HUD layout feels heavy and industrial, paying homage to the cockpit simulations of the late 90s.

The Interaction (Fallout): The "Rock Scan" results are a direct nod to the Pip-Boy 3000 UI. I wanted that specific, tactile feeling of inspecting an item in the wasteland — rotatable, green-on-black, and brutally functional.

The Workflow: "Director" Mode

Since I couldn't write the code, I acted as the Creative Director and used Gemini as my dev team.

But let's be real: It wasn't magic. It was a fight.

My prompts weren't elegant. They were mostly me yelling about "vibes":

"No, too clean. Make it look like the monitor is broken."

"The text is too sharp. Blur it like a cheap CRT."

"The moon looks like a ball. Make it look like a pixelated wasteland."

It took hundreds of tries. I had to force the AI to debug its own math, maneuver it around weird glitches, and essentially "vibe code" my way through the friction until the pixels finally snapped into place.

The Result

Screenshot of the finished xaviermalina.com site

The site isn't perfect code. It's a hacky, glorious mess of logic that somehow works.

Hosting it on Firebase made it free. Antigravity is what I used to deploy it.

I'm happy with it. It captures that lonely, isolated feeling of deep space that I loved in games like The Dig. It scans for life signs. It detects "Weld-Bots." It judges rocks. (Spoiler: The rock's intelligence is 0/10. Threat: Negligible.)

It proves you don't need to know the syntax to build the dream. You just need the taste to know when it looks wrong, and the stubbornness to keep pushing until it feels right.

Link to Github repo for the animation, MIT license: github.com/xmalina/web_animations

Incoming Transmission: xaviermalina.com