← Projects

2026 / TypeScript / React / Three.js

History Hologram

A reusable 3D story engine that projects historical scenes into a Pepper's Ghost display made from an iPad and clear plastic.

Source code

Making history physical

History Hologram started at a 48-hour hackathon in Sydney, Hack Club Horizons Crux. The theme was the crux of storytelling, and our team had a slightly awkward mix of hardware, Godot, TypeScript, Go, C and Python experience.

We also had no hardware tools. Naturally, we built the only hardware project at the event.

The idea was to turn a historical story into a small Pepper’s Ghost display. Instead of only reading about ANZAC Cove, you could watch a narrated 3D scene unfold on an iPad and appear inside a clear reflector above it.

History Hologram ANZAC Cove scene

The ANZAC Cove scene running in the normal 3D view.

Finding the reflector material took far longer than expected. We spent hours comparing acrylic, polypropylene and clear film before leaving the venue to buy something that would bend and still reflect enough light. The organisers did not want to leave, so our hardware trip eventually took most of the event with us. It was not efficient, but it gave us a physical display to build for.

A story engine instead of one animation

We did not want to hardcode one ANZAC scene. Stories are described in YAML as actors and timed moments:

actors:
  - id: hero
    src: ../models/anzac-hero.glb
    position: [0, 0, 0]

moments:
  - at: 0
    label: ARRIVAL
  - at: 12
    label: FIRST LIGHT

The same timeline controls camera movement, models, narration, subtitles, ambience and effects. The React app does not know what ANZAC Cove is. It only knows how to load and play a scene.

That was the most important technical decision because another story can be made by adding assets and editing YAML rather than writing another frontend.

Building the display without a workshop

Pepper’s Ghost is a reflection trick. A clear angled surface over a bright screen reflects an image so it appears to float in space. A four-sided reflector needs the same scene rendered in four synchronized directions around the centre of the iPad.

Four synchronized views for the Pepper's Ghost reflector

Four mirrored views of the same scene for the reflector.

YAML story

timeline

React + Three.js

four mirrored views

iPad + clear reflector

We kept a normal 3D mode for development because balancing a plastic pyramid on an iPad after every change would have been miserable.

Forty-eight hours later

The presentation was not flawless. The venue was too bright, the hologram was hard to see, and the recorded narration did not stay synchronized. The physical effect looked better during testing than it did on stage.

Then we won the GitHub award.

I was genuinely surprised because everyone else could open a website while our demo depended on a web app, a 3D engine, audio, an iPad, plastic, room lighting and hope.

Physical History Hologram setup using an iPad and clear reflector

The final setup: an iPad, a clear reflector and a lot of optimism.

By the end of the weekend we had a reusable 3D story player, an ANZAC Cove scene, synchronized timelines, four-way rendering and a real physical display. The presentation exposed its rough edges, but the underlying system worked and could tell more than one story.

Source code on GitHub