Orbit
Orbit
Three dashed rings and one satellite, rotated forever by a behavior that returns a single degree value.
Livealy · The V10 Experiment
Livealy builds living websites. A visitor asks in plain words and the site answers with a real page — written, composed, and designed for that one person, kept forever at its own address. This page pushes the new Scene V10 wire as hard as it will go.
Every point of light on this screen is a wire-native vector — zero raster images were harmed in the making of this page.
TYPED WIRE
REAL CSS
POINT CLOUDS
SEVEN BEHAVIORS
NO TEMPLATES
STATIC TRUTH
ONE CERTIFIED DOCUMENT
ZERO RASTER BYTES
From a question to a page
Nothing on a Livealy site is a template. Every generated page crosses this pipeline, and the rail on the right tracks your descent through it.
01
A visitor types into the ask bar, or clicks any phrase that catches their eye. That sentence becomes the whole brief: who is asking, in which language, from which page. No forms, no menus of intents.
02
The model authors typed semantics — headings, tones, actions, resources — never HTML and never pixels. If it does not say a map belongs on the page, no code invents one from the wording.
03
The result compiles into Scene V10: a strict typed document with palette contrast floors, spacing rhythms, and hard budgets. Anything invalid never ships — the certifier rejects it before a single visitor sees it.
04
No solver, no measurement pass, no imposed line breaks. CSS grid solves the layout, behaviors run in an isolated worker, and the finished page publishes at a permanent address a visitor can share forever.
Pixel point cloud
The wordmark below is not an image. It is 96 dots in a single wire-native vector, sitting on its own ghost grid, breathing with a six-line behavior. Resize the window; it is crisp at every width because nothing here was ever a pixel.
96 filled cells, 329 grid positions, one path element, zero raster bytes.
The design system
Colour is roles, spacing is rhythm names, and type rides one fluid scale — which is exactly what lets the owner's Design Mode dials move a finished page without breaking it.
Palette
ground
#000000
surface
#0d0d0d
alternate
#f2f2f2
emphasis
#161616
text
#ffffff
mutedText
#a6a6a6
onAlternate
#0a0a0a
onEmphasis
#ffffff
accent
#ffffff
onAccent
#000000
border
#333333
focus
#ffffff
Twelve exact colours, every one certified against contrast floors in light and dark schemes. The label on each swatch is ordinary text over an explicit paint — the readable-ink resolver flips it black or white on its own. The monochrome is the brand.
Rhythm
hug
tight
beat
breath
movement
section
Six named steps, from hug to section. The wire never says 24px; it says what the distance means, and the Air dial can breathe the whole page wider or tighter in one move.
Type
Display
Heading
Title
Lede — for the sentence that frames a section.
Body — Space Grotesk carries the display voice on this page, Inter carries the reading voice, and both ship as packaged woff2 with metric overrides so the fallback can never shift the layout.
Detail — quiet supporting copy.
MICRO — the smallest rung on the scale.
Motion
Simple entrances are free — sections rise or fade as they arrive. Everything fancier on this page is a behavior: a tiny pure function that receives typed inputs and returns values for declared channels.
Behaviors
The waveform beside this paragraph is being driven, right now, by the exact function printed below it. The function cannot touch the page — it returns values, and the runtime applies them to declared handles on declared channels. Kill JavaScript and the wave simply holds still, complete.
export default function wave(frame) {
const t = frame.inputs.time;
const drift = Math.sin(t * 0.5) * 26;
return {
"wave-a": { transform: "translateX(" + drift.toFixed(1) + "px)" },
"wave-b": {
transform: "translateX(" + (Math.cos(t * 0.38) * -34).toFixed(1) + "px) translateY(" + (Math.sin(t * 0.7) * 6).toFixed(1) + "px)",
opacity: 0.62 + Math.sin(t * 0.7) * 0.2,
},
"wave-dots": {
transform: "translateX(" + drift.toFixed(1) + "px)",
opacity: 0.55 + Math.sin(t * 1.3) * 0.35,
},
};
}The wire
Everything you are scrolling through is one JSON document — no HTML was written, no CSS files, no framework components. The excerpt on the right is this page's own hero, verbatim. A designer could read it aloud: layer the fields, pin the height to the viewport, say the headline in the giant style.
Write the page a designer would say out loud — and let the browser do the labour.
{
"protocol": "scene:v10",
"id": "v10-experiment",
"design": {
"palette": { "ground": "#000000", "text": "#ffffff", "accent": "#ffffff" },
"typography": { "familyDefaults": { "display": "Space Grotesk", "text": "Inter" } },
"reveal": "rise"
},
"sections": [{
"id": "arrival",
"root": {
"kind": "container",
"layout": { "layer": true, "minBlockSize": "calc(100svh - 3.5rem)" },
"children": [
{ "kind": "vector", "id": "hero-field-a", "decorative": true, "…": "92 generated dots" },
{ "kind": "text", "style": "giant", "headingLevel": 1,
"paragraphs": [{ "runs": [{ "text": "The page is alive." }] }] }
]
}
}]
}Certification
Before a V10 document can exist as a page, it passes a strict schema, referential integrity, CSS grammar checks, palette floors in both colour schemes, behavior admission, and hard budgets. These are this page's own numbers against those limits.
| Law | Limit | This page |
|---|---|---|
| Canonical wire | 224 KB | ≈ 80 KB |
| Nodes | 600 | 224 |
| Tree depth | 12 | 6 |
| Behaviors | 8 | 7 — the marquee gave its slot back |
| Embeds | 3 | 2 |
| Sections | 20 | 12 |
| Text contrast | 4.5 : 1 floor | 21 : 1 — white on black |
| Raster images | — | 0 |
Line studies
Five studies in wire-native geometry — swipe or scroll through them. The first one never stops turning.
Orbit
Three dashed rings and one satellite, rotated forever by a behavior that returns a single degree value.
Meridian
A one-point perspective field: nine lines and a horizon are enough to make black space read as a floor.
Interference
Two families of concentric circles fifty-six units apart. The moiré where they argue is not drawn — it emerges.
Scatter
Sixty-four points drawn from a seeded generator — the same cloud every time this page is built, never an image.
Signal
A square pulse over a dashed baseline: the entire aesthetic of this page in one path.
Questions
A platform for living websites. You give it your knowledge; it gives every visitor a site that can answer them personally — with real designed pages, not chat bubbles. Ask it yourself and watch a page get made for you.
No. A chatbot hands you paragraphs in a scrolling transcript. Livealy answers with a page — hierarchy, imagery, structure, actions — because a page is how ideas are actually presented. The answer lives at its own permanent address you can share.
It persists. Every completed answer gets a durable, unlisted permalink that reloads instantly without another model call. Asking again is a new page, not a cache hit — no visitor is ever served someone else's answer.
The owner. Every Livealy site carries a design genome — palette, typeface, spacing, motion — and a live inspector to move it. Ask about Design Mode or press D on a site you own.
Livealy
Everything this experiment threw at Scene V10 — the point clouds, the sticky rail, the behaviors, the budgets — ships in every Livealy site. The black turns to white here only to prove the same wire holds at both ends.
Composed by hand in the Scene V10 wire · one JSON document · 7 behaviors · 0 raster images
An experiment by Livealy — the protocol is unreleased and this page exists to bend it.