Skip to content

WorkInteractiveDevelopment

One River, Two Memories

The 1838 Battle of Blood River / Ncome, told from two perspectives.

Live site (opens in a new tab)Code (opens in a new tab)
Role
Design and development
Year
2026
Context
Postgrad (PGDip), PP 410
Stack
Astro · Vanilla JS · GSAP ScrollTrigger · Lenis · Canvas API · Firebase Hosting
One River, Two Memories open in a browser on a MacBook Pro

Desktop

One River, Two Memories on an iPhone

Mobile

01The challenge

Tell one of South Africa's most contested days, the 1838 Battle of Blood River / Ncome, from two perspectives, without collapsing them into a single story. And make it something you move through, not a page you read.

“Same water. Same banks.” in serif type over dark, rippling water
Live site, captured October 2026.

02The approach

  1. 01

    One medium, not six

    History, interaction, animation, sound, development and storytelling are treated as one material. The scroll is the narrator.

  2. 02

    Two memories

    The same river and the same day, held side by side, each perspective given its own space in the telling.

  3. 03

    Lean by design

    Astro and vanilla JavaScript keep the build light. GSAP ScrollTrigger sequences the scenes, Lenis smooths the scroll and the Canvas API handles what the DOM can't.

Screens05 Scroll
The river's two names side by side: iNcome, the Zulu name, and Blood River, the Voortrekker name
Live site, captured October 2026.
An aerial view of the river through dry land, with narration about the two memories connected to it
Live site, captured October 2026.
King Dingane kaSenzangakhona's story card beside an engraved portrait, the river winding behind him
Live site, captured October 2026.
Andries Pretorius's story card beside a seated portrait of him, the river winding between them
Live site, captured October 2026.
The aftermath as a split timeline, 1881–1902: “Authority Under Pressure” on the Zulu side, “The British Enemy Returns” on the Voortrekker side
Live site, captured October 2026.

03Highlights

  1. 01Scroll-driven scene sequencing with GSAP ScrollTrigger
  2. 02Lenis smooth scrolling synced to GSAP
  3. 03Canvas API rendering alongside the DOM
  4. 04Static Astro build on Firebase Hosting

Built with

  • Astro
  • Vanilla JS
  • GSAP ScrollTrigger
  • Lenis
  • Canvas API
  • Firebase Hosting

04Credits

Enzo De Vittorio
Design and development
Client
The heritage of the Zulu and the Afrikaans Voortrekkers