Immersive UI / Interactive Web / Webflow Build

Cyberpunk Redone

A Night City Terminal, Rebuilt for the Browser

We took the neon terminal UI from Cyberpunk 2077 and made it run in a browser. Then it grew. The terminal became a doorway, and behind the doorway sat a messaging inbox, a five-station radio with a live player, an in-universe NET browser, and a vehicle marketplace called AutoFixer.

What this is

This is lab work. No brief, no client, no deadline anyone else set. The studio lab exists for exactly this kind of thing: pick a technique, push it until it breaks, see what holds. The entire build runs inside Webflow. A neon-on-black CRT shell, beveled HUD frames, scanline texture, and a stack of screens that each carry the fiction somewhere new.

The hard part is that a recreation lives or dies on detail. Frame geometry. In-universe copy. The station selector. The vehicle pages. The cold terminal logic running underneath. Miss the glow or the typography or the way a panel responds to a click, and the whole thing reads as a costume. Land them together and you stop seeing a webpage and start seeing the interface.

How we built the feeling

Two things did the heavy lifting: how the surface looks, and how the world talks.

The surface stays hard. Beveled frames, cyan on near-black, scanline texture, panels that respond like a machine instead of a website. Nothing rounds off. Nothing fades in gently. A terminal is convincing because it behaves like one, so the behaviour came first.

Then there's the language, and this is where most recreations get lazy. Every line of copy belongs to Night City. The NET browser runs on "KEYSTONE," serves addresses like NETDIR://NCITY.PUB, and wears a "powered by NETWATCH" tag. The radio panel stamps album art with fake system metadata. The messages greet you with "Hey Choomba." Drop one generic button or one normal headline anywhere in there and the spell is gone, so nothing generic survived the edit.

The radio is where the recreation stops being a picture and starts working. It's a real audio player wired into the fiction: five channels, transport controls, a scrubber that actually scrubs, and an album-art panel that updates with in-universe readouts while a track plays. The sound isn't sitting next to the interface. It's part of it.

From there the world opens out. The inbox sets the mood through character correspondence. The browser lists a directory of Night City sites. AutoFixer goes furthest, all the way down into a full marketplace. Same recreation, tested from five different angles.

The Build

A connected, multi-system terminal experience, all in Webflow.

  • Terminal Shell: A neon-on-black CRT frame with screen glow, beveled HUD panels, scanline texture, and a three-tab system bar for Messages, Radio, and NET. Every screen sits inside it.
  • Messaging Inbox: A selectable message list with full bodies, written in Night City slang from characters like PixelWitch and NeonWave.
  • Radio Panel: The standout screen. Five channels including 107.3 Morro Rock and 98.7 Body Heat Radio, a real audio player with a working scrubber and transport controls, and an album-art panel showing live in-universe system readouts as each track plays.
  • NET Browser: A KEYSTONE browser with a live address bar opening a directory of eight self-contained Night City sites. WNS News and the Mayor's Office run full news pages. Delamain is a corporate brochure with a four-tab internal nav. SamuraiWeb is a band fan page. Night Corp and NCPD play as in-universe outage screens, a NETWATCH block notice and a downed-server page, each with a subscribe form. A recurring easter-egg thread about a mysterious netrunner runs through the news and the notices and quietly ties the directory together.
  • AutoFixer Marketplace: The deepest screen. A vehicle marketplace with a manufacturer sidebar (Thorton, Archer, Mizutani, Makigai, Quadra), individual vehicle pages carrying in-universe lore, favorite controls, and a content-gating mechanic that locks vehicles behind in-fiction progress. A genuine browse-and-discover flow underneath the fiction.
  • In-Universe Copy System: Every headline, address, label, and microcopy line written to stay inside Night City, holding the whole world together.
Cyberpunk Redone

A Web Experience People Want to Live In

This is how we keep the craft sharp. The same instinct shows up in the work we ship for clients.

SEE ALSO

Other projects from our lab

Cyberpunk Redone Mockup
VISUAL / UI / TERMINAL

Cyberpunk Redone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Fallout Terminal Mockup
VISUAL / UI / TERMINAL

Fallout Terminal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Drake Rebuild Mockup
3D / SPACIAL EXPERIENCE / E-COMMERCE

Drake Related

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

UK Flag
English