Skip to content
Rahul Nainala
LiveOn my own · 202614 / 15

The Elder Wand

A cinematic scroll through the history of one object, in real-time 3D and six rendered films.

A rendered film frame: three hooded figures on an arched bridge in misty woods, met by a fourth, with an italic caption below
Act II, the tale: one of six rendered films, scrubbed by the same scroll as the 3D.
acts, from the prologue to the archive card
8
short Blender / Cycles films between the real-time scenes
6
ScrollTrigger scrubbing the whole story
1
layers under every film: video, poster, real-time scene
3

Overview

An interactive archive about a single object. Scroll, and its history unfolds around it: the making, the trail of masters, the great duel, the tomb and the last duel. Real-time React Three Fiber carries the wand, the close-up inspection and an allegiance thread with a knot for every master; six short Blender films bridge the big moments. A fan-made, non-commercial study: no film footage, stills or likenesses.

More screens

The wand in real time beside a lit workbench, with a rail of knots at the left edge and a name on the thread
Act III: the allegiance thread, one knot per master, with the real-time wand riding it.

Problem → built → result

Problem
Rendered film and real-time 3D on one scroll, without the seams showing.
Built
One scrubbed GSAP timeline driving the camera, the wand, the lights, six films, the HUD and the sound.
Result
8 acts · 6 films · one scroll state

Features

  • Real-time wand with shaders for the wood, its core and a resonance pulse; depth of field, bloom and grain by quality tier
  • The allegiance thread: lit up to the current master, dashed where the record is broken, and the wand rides it
  • Films scrubbed by scroll time inside a letterbox, with cuts to black between them
  • All copy as semantic HTML in reading order; reduced motion cuts each section to its final frame

Decisions

  1. 1

    One scroll state.

    One paused GSAP timeline is built from the chapter data and scrubbed by a single ScrollTrigger. Jumping anywhere renders every earlier tween, so any scroll position gives the same frame.

  2. 2

    No per-frame React.

    GSAP tweens a plain rig object that the render loop reads. React state changes only on structural events: a new section, a new master, the sound toggle.

  3. 3

    Every film has a floor.

    Each cinematic falls back from video to its poster to a real-time scene, a failed 3D scene falls back to a still, and the story reads as HTML without WebGL2.

  4. 4

    Sound is opt-in.

    Chapter beds, the wand's voice and the toll when it changes hands are procedural Web Audio, off until asked for, and nothing depends on them.