Live tiles
Atmosphere, drawn live — no stock photo, no video file
Every scene on this site is a handful of primitive shapes described as data. Which is exactly why an AI can write you a new one.
The fastest way to make a website look like everybody else's is to buy the same photograph they did. The second fastest is to use no imagery at all, which is how a real business ends up looking like an unfinished project.
These are the third option. Each one is a small set of shapes — a beam, an arch, a crowd, some drifting light — placed deliberately and animated gently. They are running right now, on this page.
Nine of them, live
Real scenes from this site, not mock-ups made for a gallery.
Ceremony
An aisle and chairs. No people drawn, and it still reads as a wedding.
Dancefloor
Beams through haze, moving on their own clocks so the room never pulses in unison.
City
Windows and towers — the same handful of rectangles, arranged with intent.
Wellness
Rings paced at a resting breath, about ten seconds, because the cadence is the message.
Cinema
A screen, a glow, and the suggestion of a room around it.
Tasting
Glassware and light. Separated from the bourbon scene by the shape of the glass, not the colour.
Marquee
Bulbs on a frame. The most literal scene here and still not a photograph.
Community
A crowd implied by silhouette and spacing rather than drawn face by face.
Production
Rigging and trusses — the room being built rather than the finished room.
The vocabulary
Every scene above is built from the same set of primitives. There is no per-scene artwork — a ceremony and a dancefloor are different arrangements of the same shapes, which is why a new one costs a description rather than a design project.
Light
beamglowwashburstbokehbulbsneonstarmoonreflectshadowStructure
archrailwallwindowsgridrectcylinderconeaislelecternmarqueescreenpresentationPeople
crowdsilhouettechairsmicMotion
arccurveripplesmotesconfettiliquidbranchObjects
gobletbowlrecordpendantscloudbarsshapegroupHow they are made
A scene is data, not a drawing
Every tile is a short, readable description — which shapes, where in the frame, what colour, how they move. Nothing is a video file, an image, or a hand-written animation. That is what makes the next point possible.
So an AI can author one
Describe the feeling you want in a sentence and an assistant can produce a scene for it, because writing a scene means writing structured data rather than drawing. The repository ships the rules it needs — the shape vocabulary, the composition guidance, and the cost limits.
It is checked, not just rendered
A scene is measured before it ships: does the composition hold, is the copy channel clear, is it within budget, and is it meaningfully different from every other scene. Two pages that quietly share one scene is a real failure mode and there is a checker whose whole job is catching it.
Cards and heroes are different jobs
A card puts its subject in the middle. A hero keeps the middle clear because your headline lives there and carries weight on both sides instead. Mounting one where the other belongs is the fastest way to make good art look bad.
It respects the visitor
There is a cost ceiling per scene, and motion stops for anyone who has asked their device to reduce it. Atmosphere is not worth a hot laptop or a headache.
How this compares to the usual ways
Most sites animate one of four ways, and all four are reasonable. It is worth knowing where this sits, including where the usual answer is the better one.
Lottie / After Effects
A designer animates in After Effects and exports JSON that a runtime plays back.
Beautiful, and the standard answer for a reason. But the artwork is an EXPORT — it cannot take your brand colours at runtime, and changing anything means going back to the designer.
Framer Motion / GSAP
Animate real page elements with a JavaScript library.
Excellent for interface motion — a menu, a card, a page transition — and we use that too. It is not built for painting a scene; a lighting rig made of animated page elements is a lot of elements.
A video loop
Record or render a video and autoplay it behind the headline.
The simplest to make and by far the heaviest to serve. Fixed colours, fixed shape, and nothing in it can respond to the page or the visitor.
Hand-written CSS motion
Write the movement directly into the stylesheet.
Free and fast for a shimmer or a pulse. It runs out well before a scene with depth, and long files of it are famously risky to change.
What ours buys, in one line each
- The scenes take your brand colours, because they are described rather than exported.
- They weigh almost nothing — no video, no animation runtime, no exported artwork.
- They can be written by an assistant, because writing one means writing structured data.
- They can be tested, which is the part nobody expects and the part that keeps them right.
And what it costs
Every approach trades something. This one trades the cursor for a number, and the bill comes due in a specific way worth showing rather than glossing.
You author with numbers, not a cursor
A lamp shade is a width, a height and a taper — not something you drag until it looks right. That is exactly what lets a machine check it, and it is also how a scene can be wrong in a way nobody notices until a person opens the page.
A real one, from this site
A hanging lamp was authored with its width measured against the frame’s width and its height against the frame’s height. On a card it was a slightly squat lamp. On a wide hero the same numbers drew it eight times wider than tall, and it read as a flying saucer. Nothing about the scene had changed — the frame got wider.
So the rules become tests
That one is now impossible: a shade measures against a single dimension and holds its proportions on any frame. A separate test asserts that every light beam starts at the lamp throwing it — which was wrong in two scenes, and the second was found only by sweeping the whole set after the first was reported. You cannot unit-test a video.
Common questions
How do you make a website feel alive without stock photography?
With live scenes drawn from a vocabulary of primitive shapes — light, structure, people, motion and objects — composed into an animated tile. Nothing is a photo or a video file, so nothing looks like the same stock image every competitor bought, and the whole scene is a small piece of structured data rather than a media asset.
Can an AI create a custom scene for my business?
Yes. Because a scene is described as data rather than drawn, an assistant can author a new one from a sentence describing the feeling you want. The repository ships the shape vocabulary, the composition rules and the cost limits an assistant needs to produce one that passes the same checks as the built-in scenes.
Will animated backgrounds slow my site down or cause accessibility problems?
Each scene has a cost ceiling that is checked rather than assumed, and motion stops for visitors whose devices request reduced motion. A scene is a small piece of data, not a video download.
Make one for your business
The template ships a paste-ready recipe: the shape vocabulary, what makes a scene good, the cost limits, and the traps. Hand it to your assistant with a sentence about the feeling you want. The repository is always the most current reference.