HTML5 Experiments
I have been experimenting with the space between a still illustration and an interactive scene. These three studies take different routes: alternate drawings, a branch with weight, and a workshop built in layers.
A map drawn more than once
The Geekify map started as a much denser, full-color scene. Simplifying it to dark ink on parchment made it feel closer to a hand-drawn tabletop map, and opened up a different way to animate it.
This version cycles through six AI-generated drawings at four frames per second. Waves change shape, sails shift, smoke curls, and the dragon moves its wings. Small differences between the drawings give the whole image a flicker. It is an experiment in that handmade feeling; the frames are not perfectly registered, so some stationary details shift too.
The playback is a small HTML canvas loop. All six frames load before it starts, and reduced-motion preferences show the original drawing.
A branch with a little weight
For Newton, the illustration becomes something you can touch. The branch bends, the fruit hangs from it, and pulling the apple changes the balance of the scene.
This study uses the homepage’s WebGL mesh and spring motion. The drawing is still the surface; the movement comes from a small rig beneath it. Try dragging the apple and letting go. You can also focus it with the keyboard and use the arrow keys.
A workshop with depth
The moonlit workshop takes another approach: separate pieces of illustration arranged at different depths. Moving the pointer changes their relationship, making the foreground feel closer and the landscape feel farther away.
Lighting and small animated details add to the scene. The controls let you switch between moonlit and sunlit rooms, change the depth, or pause the motion. This is a Geekify homepage study, rather than a finished storefront.
I’m interested in how little movement a scene needs before it starts to feel inhabited. Each of these is a working sketch of that question, with a different balance between illustration, code, and interaction.