App Portfolio 01—02
Apps with a life of their own.
Interactive web apps that run on any phone or computer, designed and built from the first pixel.
Live app · Ambient web app
firefly.
A quiet, interactive pixel-art forest at night. Fireflies gather around your cursor and scatter when you click, frogs hop between the lily pads, the pond ripples where you touch it, and the whole clearing has a soundscape of its own. It installs like an app and works offline.
Play it here
Step into the clearing.
This is the real app, running right here. Move over the forest to gather the fireflies, click to scatter them, and touch the water. Hold any icon to set its volume.
Switch to phone and the forest swaps to its portrait painting.
Sound starts with your first click inside, and stops when you scroll away. Open full screen (opens in a new tab)
Inside the clearing
Everything in it is alive.
-
Fireflies
They drift and blink on their own, gather around your cursor and slowly fall into sync, just as real fireflies do. Click, and they scatter.
-
The pond
Touch the water and ripples spread in crisp pixel rings, while the moon glints on the surface and the reflections waver.
-
Frogs & dragonflies
Frogs sit on the lily pads, hop between them and croak now and then. Glowing dragonflies hover, dart, and hover again.
-
Firefly jars
Jars at the foot of the big tree, their fireflies bouncing off the glass and lighting the ground around them.
-
Rain & pixies
Rain falls at three depths and lands as rings on the pond. Now and then a pixie appears in a puff of sparkles and drifts through.
-
The night sky
Stars twinkle in the gap between the trees, mist hangs low over the ground, and once in a while a star shoots across.
Under the hood
Made to feel calm on any screen.
- 01
Sound made in code
The breeze, crickets, owl, frogs and rain are generated live with the Web Audio API, each with its own volume. Only the lullaby is a recording.
- 02
Sharp at any size
The painting is drawn at your screen’s real resolution with hard pixel edges, and every creature sits on the painting’s own pixel grid. Nothing ever blurs.
- 03
Two paintings, one forest
A landscape painting for computers and a portrait one for phones, each mapped so the pond, moon and jars sit exactly where the creatures expect them.
- 04
Installs like an app
Add it to a home screen and it opens full screen, works offline, and keeps the screen awake while the forest plays.
- 05
Light on batteries
Phones run it at a steady 30 frames a second, your settings are remembered, and with reduced motion on, everything moves slower and calmer.
Design kit
Palette
- Night
#08121A - Deep wood
#102038 - Moonlit
#306070 - Moon
#F8E8B8 - Firefly
#E8F898 - Meadow
#70A080 - Pond
#4078B0 - Toadstool
#A03048
Type
Silkscreen
Hints & notices
tap anywhere to hear the forest
Hand-drawn letters
The wordmark, pixel by pixel
Live app · Studio experiment
FORM.
An interactive 3D sculpture made of tens of thousands of luminous particles. Drag to turn it, hold to gather it in, and reshape it into six forms, each with its own colours, motion and sound. When you have something you like, export it as a high-resolution image.
Play it here
Shape it yourself.
This is the real app, running right here. Drag to turn it, hold to gather the particles, and scroll to zoom. Open the controls to change its form, colour, density and motion, then export what you make.
On a phone, the side panel becomes a compact dock.
Inside, scrolling zooms the sculpture: move off it to carry on down the page. Sound starts with your first click. Open full screen (opens in a new tab)
Six forms
One cloud, six forms.
-
Lattice
A knotted, open lattice that catches the light along its folds. Shown in Lumen.
-
Sphere
A rippling sphere with a loose ring of particles around it. Shown in Glacier.
-
Ribbon
A single band that loops and twists back through itself. Shown in Ember.
-
Torus
A woven ring, its mesh lines bending as it turns. Shown in Orchid.
-
Wave
A wide, rolling surface, like wind moving across water. Shown in Mono.
-
Cloud
Loose particles drifting like smoke around a soft core. Shown in Lumen.
Under the hood
Tens of thousands of points, every frame.
- 01
Simulated on the graphics card
Up to 65,536 particles, each moved on the GPU every frame. A curl-noise flow makes them drift like smoke rather than clump, and they fly between forms with a little turbulence in flight.
- 02
Sound that follows the form
A soft generative soundscape built live with the Web Audio API: each form has its own root note, holding to gather swells a chord, and a gentle chime marks each change. No audio files.
- 03
Tuned to every device
It checks the processor, memory and screen, then sets the particle count, resolution and glow to suit: 65,536 particles on a strong computer, 16,384 on a modest phone.
- 04
Export a print-ready image
Export renders the sculpture you have made as a PNG up to 3,840 pixels across, named after its form and the date.
- 05
Calm by default
It respects reduced-motion settings, rests its sound when the tab is hidden, and remembers whether you like the sound on.
Design kit
Palette
- Void
#050505 - Lumen
#EEF1E8 - Lime
#C6FF3D - Moss
#5D6B3C - Glacier
#6FD3FF - Ember
#FF7A3D - Orchid
#C59BFF
Type
Geist
The wordmark & controls
FORM.
Geist Mono
Labels & hints
DRAG TO TURN · HOLD TO GATHER
