Skies and backdrops
A shader sky lit by the pointer, a gradient mesh, drifting orbs, light rays, waves and a perspective grid.
Particles and weather
Starfield, floating particles with links, snow, a confetti burst and film grain.
Build the site. Then make it move.
A drag-and-drop editor, an AI builder that times every step and runs to the end, and a timeline on every block.
Animation mode, this page's opening
One document. Three renderings.
A site is a single document of blocks. The editor, the preview and the published page are drawn from it by the same renderer, so what you arrange is what visitors get.
// one block, as the document stores it
{ "type": "heading",
"props": { "text": "Open late on Fridays", "level": 1,
"anim": { "tracks": [ { "on": "view", "keys": [
{ "t": 0, "v": { "y": 40, "opacity": 0 } },
{ "t": 1, "v": { "y": 0 }, "ease": "spring" } ] } ] } },
"style": { "base": { "fontSize": "72px" },
"mobile": { "fontSize": "40px" } } }- The editorDrag blocks, edit text where it sits, style each device apart. Every change is one undo step.
- The previewThe draft as a visitor would see it, rendered fresh each time.
/p/… - The published pageFrozen when you publish, on the studio or on your own domain.
An AI builder that shows its work.
It interviews you, drafts three design concepts, judges them against each other and builds the one that wins. The estimated cost is on screen before you start.
- InterviewA few questions about what you do and who it is for.
- ConceptsThree directions, each with its own type, colour and layout.
- JudgeThe concepts are compared and one is chosen, with the reasons.
- PlanPages and sections, each with a brief.
- WriteEvery page written in parallel, then assembled into blocks.
- PicturesPhotos found and placed, licences recorded.
- ReviewA browser reads each page and the AI fixes what fails.
0:00
Every step is timed, and you watch the times come in. There is no clock cutting the build short: the concept, the plan, every page, the pictures and the review all run to the end. The only limit is the cost cap you set.
Then a browser checks every page.
Each page is opened in a real browser at desktop and phone size, measured, and read against the design checklist. What fails goes back to the AI as edits, saved as a version of its own.
- The opening fits the first screenHeadline in two lines, buttons in view.
- Nothing spills sideways on a phoneDisplay sizes shrink, nothing covers the copy.
- One accent, one corner radiusUsed the same way in every section.
- Buttons read clearlyLabels on one line, text that contrasts with the fill.
- No templated rhythmNo row of three identical cards, no label above every heading.
- Every line re-read for senseFiller words, stand-in names and made-up numbers go.
Twenty-two effects in five packs.
Put one behind a section or on a single block, shape it with sliders, and choose what phones get. Effects run only while they are on screen.
Text
Spring letters that dodge the pointer, words made of particles, odometers.
Scroll
A marquee that leans with the scroll, stacked cards, a pinned sideways gallery, a route that draws itself.
tilt + glare
Pointer
A page cursor, a picture that trails the pointer, a tilt with a glare, ripples.
This page: 8 of 12 effect points. A shader sky costs 5, floating particles 3, most others 1 or 2. Go over and Publish asks first.
Keyframes on every block. A timeline under the page.
Animation mode opens a drawer under the page with a layer for everything that moves. The one at the top of this page is a small copy of it.
- A
- Open Animation mode. Layers on the left, bars and keys on a ruler of seconds.
- Space
- Play from the playhead. Drag it and the whole page holds at that moment.
- K
- Add a key at the playhead on the selected block.
- R
- Record. Drag a block across the page and the path becomes keys over the time it took.
- Shift⌘C
- Copy a block's tracks and paste them onto another.
- ⌘Z
- Undo anything. Every drag of a bar or a key is one step.
Each key can set position, scale, rotation, 3D tilt, skew, opacity and blur. Curves between keys are shaped in the graph editor, moves can follow a motion path, and tracks play when a block comes into view, when the page opens, along the scroll or on hover.
Every published site has a pause button.
Visitors who find motion hard can stop it with one press, and a device that asks for reduced motion gets the still version from the start. This page has one too.
No published page loads anything from another server.
Fonts come through the studio, video players wait for a click, and the visit counter talks only to us. Your visitors' addresses stay here.
Forms
Replies land in your inbox and in a list you can filter and export. Spam is screened without a puzzle.
Analytics
Visits, sources and how long people read each section, counted without cookies.
A consent bar by region
Visitors from places whose rules ask for it see a short bar first. Everyone else is simply counted.
Your own domain
Point a DNS record at the studio and the certificate and server are handled for you.
The bar for motion.
Afterlight is a made-up festival of light, built as an example page. The effect library was ported from it, and it is what the studio's motion is measured against.
See the example