motorheadz gameboy

a playable, skeuomorphic Game Boy in the browser — built as the interactive home for the MotorHeadz NFT collection. it boots up like the real thing (startup chime, loading screen and all), and you drive the whole experience with the D-pad and the A/B/start buttons.

it's less a website and more a little toy. press the buttons. turn the sound on. find the menu.

live: https://motorheadz.xyz/ · collection: opensea · me: @jvmi_

the boot sequence

the whole thing is a state machine that mimics powering on a Game Boy:

flowchart LR
    Idle["💤 idle<br/>(click to power on)"] --> Loading["▦ loading screen<br/>+ startup chime"]
    Loading --> Sound["🔊 sound on / off?"]
    Sound --> Press["press start"]
    Press --> Home["🏠 home menu"]
    Home --> App["app screen"]
    App -.back.-> Press
    Home -.back.-> Sound

Loading

the screen lives in src/components/screens/ — one component per state (IdleScreen, LoadingScreen, SoundScreen, PressStartScreen, HomeScreen, AppScreen). App.tsx wires them together and decides what plays when.

controls

it's a real device, so it has real buttons:

button	what it does
D-pad	move around the menu
A / B	select / go back
start	advance through screens
select	🎨 cycle the Game Boy color theme
click anywhere	powers it on from the idle screen

the menu links out to the MotorHeadz world — mint, the collection, twitter, and the blog.

stack

it's an old-school Create React App project (this is from 2022 — a bit of a time capsule):

• React 18 + TypeScript
• Recoil for state (button history, sound, active theme)
• Framer Motion for the screen transitions
• use-sound for the audio (startup chime, clicks, engine, music)
• SCSS for all the device + screen styling

running it

yarn install
yarn start      # http://localhost:3000
yarn build      # production build

layout

src/
├── App.tsx                    # the state machine — boot flow + button wiring
├── state.ts / constants / types
├── components/
│   ├── GameboyLayout/         # the device shell
│   ├── ButtonsLayout/         # d-pad + buttons cluster
│   ├── screens/               # one component per "screen" (idle → loading → … → app)
│   └── ui/                    # the parts: Display, DPad, CircleButton, FlatButton, FlameText, LinkCard
└── assets/                    # audio (startup chime, engine, music) + MotorHeadz art

thanks for stopping by ✌🏽