Hands-on: drive the truck. Speed past the radar and your stopping distance is drawn next to the 15 km/h one.
The kernel: choose "cross now" and watch the 25 t tractor at the zebra, in slow motion, before the rule appears.
Pick a shift: three walk-and-decide roles and five hands-on modes, each with a preview and its keys.
Every checkpoint is a real call with three options. One is safe; the others are tempting.
Wrong call under the crane: the suspended container comes down on the walkway.
Hands-on: run the RTG crane. Sway, load height and twist-locks are live; the controls are the decision.
Hands-on mistakes replay your own recorded run from outside, with your real numbers on screen.
After a safe call you act it out: hold E to put on PPE, clip a harness, file the report.
Wrong call at height: a step off a wet container roof, 5.2 m up.
Hands-on: ammonia leak. Read the windsock and walk crosswind to the upwind muster point.
The quay: STS cranes, the vessel and the lashing crew checkpoints, all built in code with three.js.
Shift report: clean calls, near misses replayed, and the Indonesian regulation behind each checkpoint.

Inspiration

In 2024 Indonesia recorded 462,241 work-accident cases, 55% more than in 2022 (Kemnaker, data.go.id). Ports are one of the worst places to get it wrong. In February 2026 a dockworker drowned at Tanjung Perak when containers fell from a listing ship. In 2024 a container fell onto a truck cab at Tanjung Priok and killed the driver.

The safety induction (K3) a new worker gets before that first shift is usually a slideshow and a signature. Immersive training works better: a 2024 meta-analysis of 52 studies (Scorgie et al., Safety Science) found it beats traditional training on knowledge and retention, and companies like Molca already run VR safety patrols for Pelindo terminals. But VR needs headsets, a vendor and a training room. The 22-year-old yard checker hired last week gets a laptop and a login.

So we asked: how much of that immersive lesson can a browser tab deliver?

What it does

ShiftReplay puts you on a container terminal on your first shift. You walk the yard in first person, and at each checkpoint you face the call a real worker faces. A container truck is 40 m away and the driver is watching the crane, not you. Cross now?

Make the wrong call and you don't get a red X. The camera leaves your body and you watch, in slow motion, what would have happened: the 25 t tractor at the zebra crossing, the box dropping off the crane, the step off a wet container roof. The captions give the speed, the mass and the stopping distance. Only then does the rule appear, the real Indonesian regulation behind it. Then you choose again, with your wrong answer struck out.

3 walk-and-decide roles, 11 checkpoints: yard checker, reach stacker operator, lashing crew
5 hands-on modes where the controls are the decision: drive the truck, run the RTG crane with a swinging pendulum load, signal as the banksman, hunt hazards as a safety inspector against a 90 s clock, escape an ammonia leak by reading the windsock. A mistake here replays your own run, recorded frame by frame, with your real speed, load height or gas ppm on screen.
Action steps after every right call: hold E to clip your harness, press SPACE the moment the driver waves. The safe behaviour becomes something you do, not something you read.
Shift report: clean calls, the near misses you needed a replay for, and the rule behind each one.
Six real regulations (Permenaker 5/2018, 8/2010, 8/2020, 9/2016; UU 1/1970; PP 50/2012), English and Bahasa Indonesia, and a port soundscape synthesised live.
Zero friction: one link in any desktop browser. No headset, no install, no account, no server, no API key.

How we built it

Built by a team of three with Claude Code and the Devpost Learn skill pack, inside the hackathon window. Planning came first. scope.md pinned the kernel in one line ("the lesson is the replay, not the quiz") and a cut list: no VR, no physics engine, no 3D model files. Then prd.md, spec.md, and a checklist of eight vertical slices, each with a mechanical check and a hands-on check by us.

three.js r186 is the only runtime dependency. The whole terminal (container stacks, RTG and STS cranes, trucks, vessel, workers) is built in code from primitives. About 1,500 container corner castings are batched into one InstancedMesh.
Content is data, behaviour is a state machine. Every checkpoint is one object in scenario.js (situation, three options, replay, action, rule, EN + ID). hazards.js runs walk → decide → replay → act → report. A new checkpoint is a new object, not new code.
Replays: scripted scenes with their own camera path at 0.55× speed. The hands-on modes record state every frame and rebuild your last seconds from outside. The gas plume is a pure function of time, so its replay is exact.
Sound is synthesised in WebAudio: wind, diesel idle, reversing beeper, gulls, ship horn, impact.
Look: GTAO ambient occlusion + SMAA, a CC0 HDRI sky and PBR surfaces from Poly Haven. Vite 8, deployed as static files on Cloudflare Pages.

AI assistance and who did what

We built ShiftReplay with Claude Code as the coding agent, driven by the Devpost Learn skill pack.

The coding agent interviewed us one question at a time and wrote the planning docs from our answers, wrote nearly all of the code in src/ (including the procedural textures and sound), ran the build and screenshot checks for each slice, and drafted the README and this write-up.
We picked the problem, the audience and the kernel, approved every planning doc before any code, played every build and decided what changed (roles, action steps, the realism pass, the five hands-on modes, plain-language copy), checked each slice in a real browser, chose the CC0 assets, decided what was cut, researched and sourced the accident data and regulations, made the demo video, and edited and fact-checked this page.
Aarief Fawwaz and Alief Fauzan: scoping and planning with the skill pack, the sim (roles, replays, five hands-on modes, realism pass), plain-language copy and UX, Cloudflare deploy, README and submission, playtesting.
Umar Muhdhor: planning, accident data, regulation and market research, demo video, visuals, playtesting, QA and feedback.

Nothing in the sim calls an AI service at runtime: no API key, no network dependency. Third-party work (three.js, Vite, Poly Haven CC0 HDRI and textures, Inter font, a MusicGen-generated soundtrack for the video) is credited in the README.

Tools and credits

Code: JavaScript, three.js r186 (only runtime dependency), Vite 8, pnpm, WebGL, WebAudio; static hosting on Cloudflare Pages
AI assistance: Claude Code (coding agent) with the Devpost Learn skill pack; demo-video soundtrack generated with Meta's MusicGen
Assets: Poly Haven CC0 HDRI sky and PBR textures; Inter font (OFL); ascii-magic-art on the landing page. Everything else (geometry, textures, sound) is generated in code
Data: Kemnaker (data.go.id), BPJS Ketenagakerjaan, ILO Safety and health in ports, Scorgie et al. 2024 (Safety Science), news reports on the Tanjung Perak and Tanjung Priok incidents
Simulated, not real: replays are scripted scenes and small hand-written models, not a physics engine; regulation summaries are paraphrased and not yet reviewed by a K3 practitioner; desktop only (keyboard and mouse)

Challenges we ran into

"It looks like Roblox." That was our honest reaction to an early build. The fix was ambient occlusion, anti-aliasing, framed containers, capsule-limbed workers and a real CC0 sky. Bloom whited out the sky, so it went back to opt-in.
Shadows swam while walking. The shadow camera now follows the player and snaps to texels. Along the way, one worker's face turned out to be on the back of the head.
Port jargon. Words like spreader, twist-lock and bight lost first-time players. Every situation, option and rule was rewritten in plain words, in both languages.
Tooling: npm could not resolve Vite 8's peers (switched to pnpm), three r186 dropped PCFSoftShadowMap, and headless Chrome could not render the scene, so verification moved to a real browser.

Accomplishments that we're proud of

The kernel lands. The slow-motion truck-lane replay is what people remember, not the quiz.
Going from watching the crane operator to being one, and having the sim replay the accident you just caused.
A full 3D port, eight roles, two languages and one dependency, opening in a browser tab in seconds.

What we learned

Planning documents are not paperwork. The one-line kernel in the scope decided every trade-off: the replay got the budget, physics and VR got cut.
Playing the build beats imagining it. Everything after slice 3 came from playing it and saying out loud what felt wrong, and the revisions log in checklist.md shows each turn.
With a coding agent, our job moved to deciding what matters and checking that it actually landed on screen.

What's next for ShiftReplay

A review of the regulation summaries by a certified K3 practitioner before any real induction use
More scenes from the same hazard format: a petrochemical plant, a mine haul road
An instructor view showing which checkpoints a cohort gets wrong
Touch controls for tablets

Try it

Open https://shiftreplay.pages.dev/play/ in a desktop browser (Chrome, Edge, Firefox or Safari) with a keyboard and mouse. No login. Pick Yard checker, walk to the truck lane and choose "Cross now. 40 m is plenty."

Proof of concept, not certified training. Regulation names are real; the summaries are paraphrased.