S_Trope: A Digital Zoetrope
Krpano beyond 360°: an interactive machine blending analogue and digital, playing 1920s musical animations through a zoetrope built with JavaScript, CSS and Howler.js.
An artistic and technical project where we explored how far krpano can go beyond the 360° world — and extracted techniques we now apply to real projects.
- Researching the limits of krpano beyond its standard 360° and 3D use
- Audio engine with Howler.js — choose song, adjust speed and volume
- CSS with absolute and relative positioning to simulate analogue mechanics
What is the S_Trope Machine?
A digital device blending the analogue and digital worlds. It plays music and displays images in an old-fashioned style — animated sequences set to popular music from the 1920s.
The application is fully interactive and works as a game: what is it and how do you use this gadget? You'll find out when you get it right.
How it works
The mechanism reproduces the principle behind the original 19th-century zoetropes, but digitally.
The shutter
An opaque plate simulating wood passes in front of the image strip at a user-controllable speed. When the shutter speed is high enough, the rapid alternation between opaque and visible triggers persistence of vision — the brain stops perceiving individual flickers and interprets the images as continuous motion.
The animation strip
Simultaneously, a circular strip of images rotates at a constant, adjustable speed. Each frame represents a moment from the original animation.
The sweet spot
The animation effect only occurs when both speeds find their balance: the shutter and the strip. If the shutter is too slow, you see flickering. If the strip isn't synchronised, the image warps or jumps. When everything clicks — the animation appears fluid, exactly like a real zoetrope.
The audio
Music is powered by Howler.js. The sound is visually represented as a waveform that accompanies playback. The music speed is tied to the strip's rotation speed — speed it up and the music accelerates; slow it down and it decelerates. Exactly like a real vinyl record. The user picks a song, and the audio engine handles the synchronisation.
User flow
- Pick a 1920s song
- Start the machine
- Adjust the shutter speed until the flickering disappears
- Synchronise the strip speed until the animation is fluid
- Adjust the volume if you like
- Enjoy the animation
From the lab to the client
The techniques we discovered in this experiment we've since applied in real projects:
- Advanced layer management — multi-layer compositions with precise z-index, useful for virtual tours with overlapping interactive elements
- Frame-by-frame animations — step-through transitions inside krpano, applied to product showcases and immersive experiences
- Audio-visual synchronisation — audio events tied to visual actions, integrated into tours with narration and ambient music
What started as a one-hour technical test ended up being one of the experiments that brought us the most techniques for real projects.
