The coast at the bottom of our homepage is a program, not a picture
No stock art, no video, no library. One canvas and a few thousand lines of TypeScript written for it. Here is what is going on in there, and why it matters for your project.
Every dot is a particle
About eight thousand dots, each with a home position, a spring pulling it back, drag, and a collision group. Your pointer pushes them aside and drags them along; they bounce off each other and settle. Nothing is an image. There is one canvas and the code that draws on it.
One vanishing point
The scene is laid out in one-point perspective. A point at depth z on the ground lands at horizon plus a constant over z, and is drawn one over z the size it has at the shoreline. The rows of water, the shore, the dock, the longhouse, the trees and even the leaping fish all follow that single law, so they agree with each other.
One light
The sun by day and the moon by night are the only light. Each dot on the hills knows the slope under it and brightens or darkens by its angle to the light, with a rim along the ridge. A glitter path runs down the water under the sun. The house, the dock and the pines are lit on the sun’s side. Even the viking’s colours are graded warm by day and cool by moonlight, and his highlight and cast shadow swap sides as the sun crosses.
A day in five minutes
The palette is keyed to a clock. Morning haze, a full day, dusk as the sun sinks behind the fjord wall, stars and a crescent moon, then dawn. The far ranges are paler and bluer than the near ones, the way distance works in real air.
Weather and wildlife
Waves roll in continuously toward the shore. Gusts cross the sky as short wisps, roughen the water, lean the grass and the pines and bend the smoke from the longhouse. Gulls fly through by day. A fish leaps now and then, always in open water, never through the dock.
Leif, the resident viking
He is not a drawing but a rig: a few dozen numbers (where he looks, how his arms sit, whether the laptop is open) that render to an SVG, which is sampled into a grid of coloured cells. His clips are keyframes sampled at twelve frames a second, with the rules hand animators use: anticipation before an action, a hold after it, squash on landing. A small director decides his day: typing, glancing up, waving at the ship, a stroll along the shore.
Solid things are solid
A dot field would normally show the sea through a figure standing in front of it. Before any solid object is drawn, a disc of the page colour goes under each of its dots, wide enough to cover the gaps, so the viking, the ship and the house hide what is behind them.
Play with it
The strip under the scene is live. Scrub the day with the timeline or run it at 10x or 60x. Hold the mouse button and Leif chases your pointer; park it over his head and he jumps for it, and hugs it if he catches it. Open Tinker to add gulls, fish, shooting stars or flying saucers, and to change how far your pointer pushes the dots. Drag the panel wherever you like.
It costs you nothing above the fold
The scene starts only when you scroll it into view and pauses when you scroll away. Far layers skip the physics pass. It honours the reduced-motion setting, drops the ship on phones, and holds the display’s frame rate. If you leave the page alone for two minutes on a desktop, it takes over as a screensaver.
We do not start from a template
Most web shops assemble sites from themes and plugins, and the ceiling of what they can make is the ceiling of what somebody else already made. We write software. The scene above exists because we wanted it to, and the same is true of anything you want on your site or in your business.
The only limit is your imagination and your creativity. Bring the idea. We bring the engineering.
Start a project- A product configurator that shows the real thing as the customer changes it
- A live dashboard of your business that your team actually opens every morning
- A calculator, quote tool or booking flow that feels like part of your brand, not a widget
- An animated explainer that shows how your service works instead of telling
- A map, a timeline or a floor plan people can explore
- A game or interactive piece for a campaign, a trade show or a classroom
- Internal software that replaces the spreadsheet everyone hates
- Anything else you can describe. If you can picture it, it can be built.
See what we have shipped on the portfolio and custom software pages.