N°001 PRETTY LADY AUDIO
CTRL 00127
MIXTAPE
VOL.1
EVO2026
▶ NOW PLAYING
You Can Feel It
Frank Ivy TRK 11/12
02:05
03:23
TRANSMISSION://LYRICS
"Calling you home"
Loading...
OBSERVATION FEED
CAM-02 // DECK-B● REC
3D WEB DESIGN — 2026

Mixtape Vol.1

An interactive 3D music player built with Three.js and Blender. The project started as an experiment in bringing 3D product design into the browser. A custom cassette deck model sits at the centre of a retro poster layout, with synced lyrics, playback controls, and a live security feed aesthetic. The goal was to push what's possible with 3D interactivity on the web without compromising on load times. Still refining the pipeline, but the foundation is there.

PROJECT Pretty Lady Audio
ROLE 3D Web Designer / Developer
YEAR 2026
SCOPE 3D Modelling, Web Development, Audio Integration

Modelling the deck

The cassette deck was modelled in Blender, starting with a clay render to nail the form and proportions. Once the geometry was right, textures were layered on: rust, exposed wiring, scratched metal, worn buttons. The weathered look was intentional. The vibe sits somewhere between Star Wars and Nostromo. From there it was exported and loaded into Three.js for rendering in the browser.

Clay render, 0 degrees
CLAY
Textured render, 0 degrees
TEXTURED
Clay render, 20 degrees
20°CLAY
Textured render, 20 degrees
20°TEXTURED
Clay render, 45 degrees
45°CLAY
Textured render, 45 degrees
45°TEXTURED
Clay render, 90 degrees
90°CLAY
Textured render, 90 degrees
90°TEXTURED
Clay render, 135 degrees
135°CLAY
Textured render, 135 degrees
135°TEXTURED
Clay render, 180 degrees
180°CLAY
Textured render, 180 degrees
180°TEXTURED
Clay render, 0 degrees
CLAY
Textured render, 0 degrees
TEXTURED
Clay render, 20 degrees
20°CLAY
Textured render, 20 degrees
20°TEXTURED
Clay render, 45 degrees
45°CLAY
Textured render, 45 degrees
45°TEXTURED
Clay render, 90 degrees
90°CLAY
Textured render, 90 degrees
90°TEXTURED
Clay render, 135 degrees
135°CLAY
Textured render, 135 degrees
135°TEXTURED
Clay render, 180 degrees
180°CLAY
Textured render, 180 degrees
180°TEXTURED

Synced lyrics, built from scratch

Each track has a timed lyric map that syncs to the audio. Lines appear, scroll, and fade using a custom animation engine. No libraries, just requestAnimationFrame and a lot of fine-tuning.

CTRL1 AUDIO ENGINE LIVE
▶ NOW PLAYING
You Can Feel It
Frank Ivy TRK 11/12
00:00
03:23
TRANSMISSION://LYRICS
CTRL1 TYPEFACE SPEC
ZEN DOTS 400
ABCDEFGHIJ
KLMNOPQRS
TUVWXYZ
0123456789
OXANIUM 800
ABCDEFGHIJ
KLMNOPQRS
TUVWXYZ
0123456789
IBM PLEX MONO 500
ABCDEFGHIJ
KLMNOPQRS
TUVWXYZ
0123456789
#C44B28
#E8E3D6
#1A1A18
#6B6B5E

Next Project — Campaign Design