01 — The brief

A whole ocean, in one web page.

I wanted a racing game that feels like a holiday brochure for the deep sea: choose a fish, choose a route, and swim. No engine and no asset pipeline. The canyon is a tube bent along an equation or a traced circuit, the coral is instanced geometry, the light is a shader, and the surf and the seagulls are synthesised by the browser as you race.

Role: Concept, game design & development
Type: Personal showcase, free to play
Built with: three.js r128, GLSL, Web Audio, Bootstrap 5.3, Alfuix, Sass
Plays on: Keyboard on desktop, touch on phones; two players share one keyboard
Year: 2026

Challenge

Speed, a chase and rivals

A racer that feels fast, a predator that is always closing in, rivals to beat, a season to win and a friend to race, scores to keep, loading like a page and running on a phone.

Approach

Equations, shaders, synths

Each track is one closed curve, from an equation or traced from a map. Caustics, fog and both looks are hand-written GLSL, and Web Audio synthesises the surf, the gulls and every sound effect.

Outcome

Four ways to play, two looks

Run & Escape, Grand Race, a two-player split screen and an eight-round Championship, with fifteen fish on eight tracks, in a realistic Classic ocean or a neon Cyber tunnel, and a log and a season for every player, from 2,200 lines of JavaScript.

02 — How it plays

Outswim the shark, outrace the field, a friend or a whole season.

Four ways to play on the same eight tracks, with the arrow keys, W A S D, touch buttons or a drag: swim in four directions to escape the shark, or steer left and right in a race. A six-step start screen sets up the mode, the players, the fish, the track (a Championship calendar during a season), the rivals and the difficulty.

Move your pointer: you are the shark

Run and Escape: the Mega Shark closes in over the sunlit canyon floor, a line of yellow fish ahead of it

Classic

Solo · High score

Run & Escape

Collect small fish, dodge obstacles and stay ahead of the Mega Shark across four levels, a track each. Every hit costs speed and the gap closes; if the shark catches you, the run is over. Only track I is open at first: reaching a track in a run unlocks it as a start.

4 levels · 5 tools · combo up to x5 · tracks unlock as you reach them

Cyber

Solo · Versus

Grand Race

Three laps against three AI rivals you pick, or a fresh random field. Every racer holds the canyon’s middle depth, so it is all about your line: hold the gas, slow for the sharp bends and fire nitro on the straights. The rivals follow the same physics and grab the same nitro cells.

3 laps · 3 rivals you pick · gas, slow & nitro

Two-player race: the screen split down the middle, each half with its own position, lap and speed gauge, and a shared map and race clock at the top

Classic

Split screen · Versus

Two-player race

Race a friend side by side on one keyboard: Player 1 on the left with W A S D, Player 2 on the right with the arrows, each with a nitro tank and a name over their fish. Go head to head, or bring one or two AI rivals.

2 players · 0 to 2 rivals · one keyboard

Cyber

Solo · Season

Championship

A season of eight Grand Race rounds, one per track in order, against the same three rivals at the same difficulty. Only a win unlocks the next track; lose and you race that round again. Points build into standings, the rivals sharpen every round, and the season is saved under your name, so you can pick it up after closing the browser.

8 rounds · 25 · 18 · 15 · 12 pts · win to unlock

Run & Escape · Try it: earn points

Five tools unlock with your score

Each has its own key and a cooldown: Turbo bursts ahead, Magnet pulls fish in, 2X doubles your points, Shield smashes whatever you touch and Laser clears the next 140 m. A race has none of them.

score 0

Turbo50
Magnet100
2X Points250
Shield500
Laser800

Grand Race · Try it: hold the gas

Gas, slow and nitro

Off the gas, the water slows you to a cruise; hold Slow to flare the fins and drop hard before a bend. Nitro takes you past top speed while the tank lasts, and nitro cells on the track refill it.

Change fish

Try it: pick a difficulty

Five hazards, one level at a time

The intended challenge: obstacles build up over the laps, and a new kind joins at every level.

Threat at the start: 8%
Speed kept after a hit: 50%
Obstacle size: ×1.0
Moving ones: ×1.0

Level IPufferfishData blocksRock spiresPylonsup to 45% · 110 m apart
Level IIPufferfishData blocksRock spiresPylonsSea nettlesNeon mines (new)up to 55% · 100 m apart
Level IIIPufferfishData blocksRock spiresPylonsSea nettlesNeon minesMoray eelsLaser lances (new)up to 65% · 92 m apart
Level IVPufferfishData blocksRock spiresPylonsSea nettlesNeon minesMoray eelsLaser lancesReef archesHex barriers (new)up to 75% · 85 m apart
RacePufferfishData blocksRock spiresPylonsSea nettlesNeon minesup to 65% · 120 m apart

joins at this level. Obstacles stand in slots a set gap apart; the threat, the share of slots in use, climbs to the cap by the end of lap 2. None appears within 120 m ahead of you, and each track keeps the same layout every retry.

03 — The shoal

Fifteen fish. Fifteen special moves.

Every fish has four stats and one ability. Each ability is passive or automatic, so there are no extra keys to learn, and the AI rivals use theirs too. Pick a fish; you can recolour yours in the game.

01 / 15

Needle-bill sprinter

Sailfish

Istiophorus platypterus

The fastest swimmer in the ocean. Blazing top speed, wide turning arcs. Best on smooth tracks.

Special ability

Sail trim

After 1.2 s on a straight it raises its sail for +6% top speed, until the next bend.

Speed: 10
Acceleration: 6
Handling: 6
Attack: 5

Top speed: 314 km/h
Nitro: +65%
Full tank: 3.6 s

04 — The tracks

Eight routes, drawn two ways.

Four tracks are one line of maths each; four are traced from track maps. Either way, the game wraps a 14-metre tube around a closed curve. Pick one: the school of fish behind this page swims it.

Top view

// I · Coral Circuit:
// a circle that breathes three times a lap
const r = 300 + 55 * Math.sin(t * 3);
return [
  Math.cos(t) * r,
  40 * Math.sin(t * 2) + 25 * Math.cos(t * 3),
  Math.sin(t) * r,
];

// II · Twin Trench: a lemniscate,
// one lobe 70 m above the other
const k = 1 + Math.sin(t) ** 2;
return [
  380 * Math.cos(t) / k,
  70 * Math.sin(t),
  440 * Math.sin(t) * Math.cos(t) / k,
];

// III · Abyss Dive: twice a lap
// it plunges 140 m and climbs back
const r = 290 + 50 * Math.sin(t * 2);
return [
  Math.cos(t) * r,
  140 * Math.sin(t * 2),
  Math.sin(t) * r,
];

// IV · Rapid Slalom:
// five bends in and out every lap
const r = 270 + 80 * Math.sin(t * 5);
return [
  Math.cos(t) * r,
  45 * Math.sin(t * 3),
  Math.sin(t) * r,
];

// V · Manta Ridge: traced from a map,
// 22 points of [x, z, depth], 6 m a pixel
cp: circuit(6, [
  [150, 38, 0], [162, 30, 10], [160, 20, 22],
  [148, 17, 26], [125, 20, 22], [105, 24, 16],
  [92, 30, 10], [86, 40, 4], [72, 52, -6],
  // … 13 more, down to 34 m below the start
]),

// VI · Shipwreck Bay: traced from a map,
// 25 points, a corkscrew from +32 m to −20 m
cp: circuit(5.6, [
  [96, 136, -18], [70, 140, -20], [40, 140, -20],
  [22, 136, -18], [16, 122, -12], [18, 100, -6],
  [24, 84, 0], [34, 72, 8], [30, 58, 18],
  // … 16 more points
]),

// VII · Volcanic Vents: a traced figure-8;
// the low pass dives 80 m under the high one
cp: circuit(5.6, [
  [75, 60, -40], [95, 72, -34], [118, 84, -22],
  [138, 82, -8], [146, 66, 0], [140, 46, 8],
  [128, 30, 16], [110, 22, 24], [92, 26, 32],
  // … 11 more points
]),

// VIII · Pearl Strait: traced from a map,
// a long strait with a hairpin at each end
cp: circuit(7.5, [
  [30, 26, 0], [60, 20, 4], [90, 14, 8],
  [118, 10, 10], [134, 14, 12], [138, 26, 10],
  [128, 36, 4], [118, 45, -2], [118, 57, -8],
  // … 10 more points
]),

climb 124 m
tightest bend 110 m
1,260 plants & corals

Side view · depth over one lap

05 — Classic | Cyber

One ocean, two moods.

Same tracks, same physics, same fish. The materials, the shaders, the hazards’ costumes and the lens on top change, and you can switch at the top of the start screen. Even the browser tab’s icon follows.

Classic: the dolphin swims a sunlit canyon of rock and sand, with coral, kelp and caustics on the floor

Cyber: the same spot as a glowing grid tunnel, the dolphin and fish drawn in neon

Classic Cyber

Try it here

Switch this page to Cyber

What changes between the Classic and Cyber looks
Part	Classic	Cyber
Water	Sunlit canyon	Grid tunnel
Fish	Shaded anatomy	Glowing particles
Hazards	Pufferfish, eels	Data blocks, lances
Nitro	Golden pearls	Cyan capsules
Race line	Canyon floor	Neon road
Lens	Soft bloom	Chromatic, scanlines

06 — Under the hood

No engine. Just the browser.

2,200 lines of JavaScript in thirteen plain scripts on top of three.js. No game engine, no build step for the code, and no sound or texture files.

// a track: a traced circuit's own points, or 24 samples of its equation
const pts = TK.cp ? TK.cp.map((p) => new V3(...p))
  : Array.from({ length: 24 }, (_, i) => new V3(...TK.f(i / 24 * TAU)));
curve = new THREE.CatmullRomCurve3(pts, true);
// the canyon: a 14 m tube along it, 900 rings deep
const tube = new THREE.TubeGeometry(curve, 900, 14, 24, true);

// one wave of surf, from looped noise: it builds louder for 2–4 s,
// crests, then washes out over 3–5.5 s (its filter opens and closes
// with it, and foam fizzes in at the crest)
const up = 2 + Math.random() * 1.8, top = t + up + 0.2 + Math.random() * 0.5,
  end = top + 3 + Math.random() * 2.5, pk = 0.5 + Math.random() * 0.5;
g.setValueAtTime(0.1, t); g.linearRampToValueAtTime(pk, t + up);
g.setValueAtTime(pk, top); g.linearRampToValueAtTime(0.1, end);

// Grand Race: the gas pulls hard at low speed and fades near the top,
// like climbing through the gears
const throttle = (ac, v, top) => ac * 0.45 * Math.max(0.2, 1 - 0.55 * v / top);
// off the gas the water drags you back towards a cruise; Slow flares
// the fins: 14 m/s² more, down to a crawl at 20% of top speed
const DRAG = (v) => 6 + v * 0.09, SLOW = 14, CRAWL = 0.2;
// nitro: how long a full tank lasts, how far past top speed it takes you
const nitroT = (sp) => 2.6 + 0.2 * sp[3], nitroMul = (sp) => 1.45 + 0.04 * sp[3];

// Slipstream (Spanish Mackerel), in a race: 3 to 25 m behind
// another racer and within 4 m of its line, +8% top speed
if (r.ab == 'draft') r.drf = FM && RAC().some((o) => {
  if (o === r) return false;
  const du = wrapS(o.p - r.p) * LEN;
  return du > 3 && du < 25 && Math.hypot(o.x - r.x, o.y - r.y) < 4;
});

2,200 lines, 13 scripts
0 audio files
three.js r128

The Run and Escape HUD in Cyber: level, lap, distance, time and threat top left, score, shark gap and a live minimap top right, five tools bottom left and the speed gauge at the bottom — The HUD, mid-run in Cyber

Lap, time and threat, the shark’s distance, a live minimap of the route and the five tools, each with its key and cooldown. The gauge’s last line is the fish’s ability.

The Grand Race HUD in Cyber: the player's Mako Shark under its name plate beside a Spanish Mackerel rival under its own, a HAIRPIN LEFT sign at the top, position and minimap top right, and the speed gauge with its nitro tank and the fish's ability at the bottom — The HUD, mid-run in Cyber

Lap, time and threat, the shark’s distance, a live minimap of the route and the five tools, each with its key and cooldown. The gauge’s last line is the fish’s ability.

Caustics in a shader

Moving cellular caustics light the rock, coral and fish, with exponential fog below and a rippling Snell’s window overhead.

A dolphin in a string

The dolphin is a Draco-compressed .glb stored as base64 and decoded at start. Players can load their own .glb in its place.

1,260 plants, five draws

Kelp, branching and brain coral, sponges and sea grass are instanced, and they sway in the vertex shader, not in JavaScript.

Two views, one pass

In split screen both cameras draw into one render target side by side, then share a single post-processing pass that centres its lens effects on each half.

Rivals with no shortcuts

You pick the AI rivals, or the game draws a new field each race; in a Championship the same three return every round, a little sharper each time. They use the players’ physics and abilities, ease off in time for every bend, steer round what is ahead and fire nitro only when the way is clear.

Fair by design

Obstacles stand a set gap apart and never on a trail of small fish, nothing comes in a lap’s first 220 m, nothing pops in within 120 m ahead, and a retry gives the same layout.

Surf from noise

The ocean behind the game is filtered noise: two waves roll in and wash out on their own timers over a far-off swell, and now and then a gull calls, from a rasping oscillator. No music, no files.

A log and a season for every player

Type a name and the game keeps that player’s Captain’s log in cookies: best score, race wins, best time on each track and the last 12 results, with a hall of fame across the device. Their Championship season and unlocked tracks are saved the same way.

Dive in yourself.

Type your name, pick a fish and a track, then see how long you can stay ahead of the Mega Shark, beat three rivals, win an eight-round season, or race a friend on the same keyboard. Best with a keyboard; it plays on phones with touch controls too.

Runs in Any WebGL browser
Players 1 or 2
Controls Keyboard & touch
Price Free

Play Ocean Run More of my work

07 — The maker

One maker. Five hats on the sonar.

I made Ocean Run on my own, from the first idea to the last line of code. Each contact on this sonar is one of the hats I wore: let the sweep find them, or pick one.

Pick a contact, or use the arrow keys

Sonar readout Mohammad Azad · Senior UI/UX Designer & UI Engineer

Contact 01 / 05BRG 038°RNG 0.74

Product designer

I decided what Ocean Run is, and what it isn’t: a racer that loads like a web page and plays on a phone, four ways to play on eight tracks, a season that unlocks one track per win, fifteen fish that each do one thing best, two looks, a log for every player, and no engine or asset files to download first.

browser game
4 modes
2 looks

Years: 13+
Hats: 5
Lines of JS: 2,200
Scripts: 13

References & credits

Personal project, not a product. All images on this page are captures from the game. The dolphin is used under CC BY 4.0.

Dive into Ocean Run.

A whole ocean, in one web page.

Speed, a chase and rivals

Equations, shaders, synths

Four ways to play, two looks

Outswim the shark, outrace the field, a friend or a whole season.

Run & Escape

Grand Race

Two-player race

Championship

Five tools unlock with your score

Gas, slow and nitro

Five hazards, one level at a time

Fifteen fish. Fifteen special moves.

Sailfish

Sail trim

Eight routes, drawn two ways.

One ocean, two moods.

Switch this page to Cyber

No engine. Just the browser.

Caustics in a shader

A dolphin in a string

1,260 plants, five draws

Two views, one pass

Rivals with no shortcuts

Fair by design

Surf from noise

A log and a season for every player

Dive in yourself.

One maker. Five hats on the sonar.

Product designer

UI designer

UX designer

UI developer

Coder

References & credits

Dive into Ocean Run.

A whole ocean, in one web page.

Speed, a chase and rivals

Equations, shaders, synths

Four ways to play, two looks

Outswim the shark, outrace the field, a friend or a whole season.

Run & Escape

Grand Race

Two-player race

Championship

Five tools unlock with your score

Gas, slow and nitro

Five hazards, one level at a time

Fifteen fish. Fifteen special moves.

Sailfish

Sail trim

Eight routes, drawn two ways.

One ocean, two moods.

Switch this page to Cyber

No engine. Just the browser.

Caustics in a shader

A dolphin in a string

1,260 plants, five draws

Two views, one pass

Rivals with no shortcuts

Fair by design

Surf from noise

A log and a season for every player

A podium, then a result card

Dive in yourself.

One maker. Five hats on the sonar.

Product designer

UI designer

UX designer

UI developer

Coder

References & credits