A site made of data
Everything this engine can do
Every band below is data — no page here contains a line of code. Open the fold under each one to see exactly what was declared.
Read how it is declaredWords
Headings, prose, emphasis, links and lists — emphasis is a FIELD, never a tag, which is what keeps a paragraph data.
A third-level heading
A lead is the same paragraph wearing a different tone.
Plain words, emphasised, slanted, code() and a link.
- An item as plain text
- An item with emphasis
Occupied is not Used
How this band is declared
[
{
"kind": "stack",
"appearance": "measure",
"children": [
{
"kind": "heading",
"level": 3,
"text": "A third-level heading"
},
{
"kind": "text",
"tone": "lead",
"text": "A lead is the same paragraph wearing a different tone."
},
{
"kind": "rich",
"spans": [
{
"text": "Plain words, "
},
{
"text": "emphasised",
"emphasis": "strong"
},
{
"text": ", slanted",
"emphasis": "em"
},
{
"text": ", "
},
{
"text": "code()",
"emphasis": "code"
},
{
"text": " and a "
},
{
"text": "link",
"href": "https://next.torqhub.net"
},
{
"text": "."
}
]
},
{
"kind": "list",
"items": [
"An item as plain text",
{
"spans": [
{
"text": "An item with "
},
{
"text": "emphasis",
"emphasis": "strong"
}
]
}
]
},
{
"kind": "heading",
"level": 3,
"spans": [
{
"text": "Occupied "
},
{
"mark": "not-equal",
"alt": "is not"
},
{
"text": " Used"
}
]
},
{
"kind": "callout",
"tone": "note",
"text": "A note: something a reader may skip without losing the thread."
}
]
}
]Ready blocks
Twelve of them ship with the engine. A block is a stored tree with named fields: using one substitutes values and runs nothing.
A feature card
A title, a body and an optional link.
12
ready blocks
21
node kinds
18
doors
A block is a stored tree, not a call. Copying one copies a file.
A comparison card
Two figures side by side, each with its caption.
at any scale
1×
before
4×
after
Can an agent invent its own block?
Yes. It writes the same kind of data file the shipped ones are, or copies one under a new name and alters it.
How this band is declared
[
{
"kind": "grid",
"columns": 3,
"children": [
{
"kind": "use",
"module": "feature-card",
"values": {
"title": "A feature card",
"body": "A title, a body and an optional link."
}
},
{
"kind": "use",
"module": "feature-card",
"values": {
"title": "With a link",
"body": "The link appears only when it is given.",
"link_label": "Open",
"link_href": "https://next.torqhub.net"
}
},
{
"kind": "use",
"module": "price-card",
"values": {
"plan": "A plan",
"price": "$0",
"note": "A price card",
"cta_label": "Choose",
"cta_href": "#m-contact"
}
}
]
},
{
"kind": "use",
"module": "stat-row",
"values": {
"a_value": "12",
"a_caption": "ready blocks",
"b_value": "21",
"b_caption": "node kinds",
"c_value": "18",
"c_caption": "doors"
}
},
{
"kind": "grid",
"columns": 2,
"children": [
{
"kind": "use",
"module": "quote",
"values": {
"text": "A block is a stored tree, not a call. Copying one copies a file.",
"author": "From the engine’s own notes"
}
},
{
"kind": "use",
"module": "compare-card",
"values": {
"title": "A comparison card",
"body": "Two figures side by side, each with its caption.",
"scale": "at any scale",
"a_value": "1×",
"a_caption": "before",
"b_value": "4×",
"b_caption": "after"
}
}
]
},
{
"kind": "use",
"module": "faq-item",
"values": {
"question": "Can an agent invent its own block?",
"answer": "Yes. It writes the same kind of data file the shipped ones are, or copies one under a new name and alters it."
}
},
{
"kind": "use",
"module": "cta-band",
"values": {
"title": "A call-to-action band",
"body": "Its own colour, so it cannot be missed.",
"button_label": "Talk to us",
"button_href": "#m-contact"
}
}
]Arrangement
Stacks, grids and boxes. A band is a container; how wide its contents sit is a decision the node makes.
A box, plain
A box as a card
A box with accent
How this band is declared
[
{
"kind": "grid",
"columns": 3,
"children": [
{
"kind": "box",
"tone": "plain",
"children": [
{
"kind": "text",
"text": "A box, plain"
}
]
},
{
"kind": "box",
"tone": "card",
"children": [
{
"kind": "text",
"text": "A box as a card"
}
]
},
{
"kind": "box",
"tone": "accent",
"children": [
{
"kind": "text",
"text": "A box with accent"
}
]
}
]
},
{
"kind": "divider"
},
{
"kind": "stack",
"direction": "row",
"gap": "1rem",
"children": [
{
"kind": "use",
"module": "action-button",
"values": {
"label": "A button",
"href": "#m-contact"
}
},
{
"kind": "use",
"module": "action-button",
"values": {
"label": "And another",
"href": "#words"
}
}
]
}
]Tables and code
A wide table scrolls inside its own box, because the page body must never scroll sideways.
| Node kind | What it does | Does the site supply code |
|---|---|---|
| text | a paragraph | no |
| table | a table | no |
| island | its own component | YES |
| form | a form | the destination only |
- kind: text
text: "Это и есть узел — имя вида и его поля."How this band is declared
[
{
"kind": "table",
"headers": [
"Node kind",
"What it does",
"Does the site supply code"
],
"rows": [
[
"text",
"a paragraph",
"no"
],
[
"table",
"a table",
"no"
],
[
"island",
"its own component",
"YES"
],
[
"form",
"a form",
"the destination only"
]
]
},
{
"kind": "code",
"language": "yaml",
"text": "- kind: text\n text: \"Это и есть узел — имя вида и его поля.\""
}
]Things that answer
A switch, a fold-out, a component the site owns, and a form. Only the last two need the site to supply anything.
What to show
A switch and its panes are pure CSS, with no script at all.
The second pane. Switching works with JavaScript off.
A counter — a component the site owns
Write to us
The destination is a NAME this site resolves — a page can point at one and can never invent one.
How this band is declared
[
{
"kind": "switch",
"label": "What to show",
"children": [
{
"kind": "pane",
"name": "First",
"children": [
{
"kind": "text",
"text": "A switch and its panes are pure CSS, with no script at all."
}
]
},
{
"kind": "pane",
"name": "Second",
"children": [
{
"kind": "text",
"text": "The second pane. Switching works with JavaScript off."
}
]
}
]
},
{
"kind": "stack",
"appearance": "measure",
"children": [
{
"kind": "island",
"name": "Counter",
"props": {
"start": 0,
"step": 1
},
"label": "A counter — a component the site owns"
}
]
},
{
"kind": "use",
"module": "section-head",
"values": {
"title": "Write to us",
"lead": "The destination is a NAME this site resolves — a page can point at one and can never invent one."
}
},
{
"kind": "stack",
"appearance": "measure",
"children": [
{
"kind": "form",
"to": "contact",
"submit": "Send",
"note": "It works with scripts switched off: the browser submits it.",
"fields": [
{
"name": "name",
"label": "Your name",
"required": true
},
{
"name": "email",
"label": "Email",
"type": "email",
"required": true,
"placeholder": "you@company.com"
},
{
"name": "topic",
"label": "About",
"type": "select",
"options": [
"A site on this engine",
"Something else"
]
},
{
"name": "message",
"label": "Message",
"type": "textarea",
"required": true
},
{
"name": "consent",
"label": "I agree to be written back to",
"type": "checkbox",
"required": true
}
]
}
]
}
]Movement
A page NAMES an arrival; what the name means is values in a file an agent may write. Stagger hands the arrival to a container’s children, one after another.
drift-up
Fade and rise.
unblur
Out of blur and desaturation.
tilt-in
Rotate and scale, with a spring.
How this band is declared
[
{
"kind": "grid",
"columns": 3,
"motion": {
"do": "tilt-in",
"stagger": 150
},
"children": [
{
"kind": "use",
"module": "feature-card",
"values": {
"title": "drift-up",
"body": "Fade and rise."
}
},
{
"kind": "use",
"module": "feature-card",
"values": {
"title": "unblur",
"body": "Out of blur and desaturation."
}
},
{
"kind": "use",
"module": "feature-card",
"values": {
"title": "tilt-in",
"body": "Rotate and scale, with a spring."
}
}
]
},
{
"kind": "stack",
"appearance": "measure",
"children": [
{
"kind": "callout",
"tone": "note",
"text": "The light and dark switch and the language links live in the frame at the top of every page. Neither costs a page anything to declare."
}
]
}
]Pictures and video
An embed takes a provider and an id — never a URL, so a page cannot point a reader at anything it likes.
How this band is declared
[
{
"kind": "stack",
"appearance": "wide",
"children": [
{
"kind": "embed",
"provider": "youtube",
"videoId": "aqz-KE-bpKQ",
"title": "An embedded video, as an example"
}
]
}
]What is NOT here
An honest inventory is worth more than a flattering one.
How this band is declared
[
{
"kind": "stack",
"appearance": "measure",
"children": [
{
"kind": "callout",
"tone": "warn",
"text": "There is no chart block yet: numbers are shown by the stat row and the comparison card, and a real chart would need either a picture or a component the site writes itself. There is no navigation between many pages beyond the frame’s own links. And scroll-linked movement — something that follows the scrollbar rather than arriving once — is a site’s own component, not vocabulary."
}
]
}
]Declared motion