Motion never carries indispensable information. The static state is the one a screen reader and a printer get.
Blitz Motion Lab · Atomic assets
A living UI, one asset at a time
Every visual has a static reference. 40 assets also have a live variant, 12 brand signatures and 6 automations extend the language, and 13 diagram scenes are mounted in the heroes of the site, all without leaving the minimal tone of BlitzAPI.
40 LIVE VARIANTS12 SIGNATURES6 AUTOMATIONS13 SCENES LIVE · 31 SPECS
A single behaviour per variant, declared in the catalog. No page picks a duration, an easing or a keyframe.
No complex timeline, no scene that monopolizes a section. Ambient loops run 8s or more.
The system preference restores the static version automatically, through the global blanket.
01
4 MOVEMENTSMotion vocabulary
Four movements, a closed vocabulary
Durations are tokens (tokens.css); the sample next to each name runs at the real duration.
A status, a port or a discovery breathes locally.
One measure moves slowly without changing the content.
A change reveals itself by sequence, stroke or orbit.
A connector suggests a transfer or a resolution.
02
40 PAIRSStatic ↔ Live
The live variants, side by side
Left column: the static reference. Right column: the same asset with animated: true, running only the movement declared in the catalog.
Pulse
A status, a port or a discovery breathes locally.
3.6s15 ASSETS
Progress
One measure moves slowly without changing the content.
5s6 ASSETS
Flux
A change reveals itself by sequence, stroke or orbit.
7.2s11 ASSETS
Dash
A connector suggests a transfer or a resolution.
8s8 ASSETS
03
12 SIGNATURESBrand signatures · Level 2
More expressive, still contained
Micro-sequences that give the key moments a personality: discover, resolve, verify, synchronize, reveal a signal. One canvas, at most three states, one intention. Each signature below says where the site mounts it.
MAX 3 STATES1 CANVAS6.4s to 8sNO NARRATIVE SCENE
Data scanDiscover
Explore a corpus or an object
Identity resolveResolve
Go from unknown to found
Data streamOperate
Show an active transfer
Trust stampTrust
Confirm a validation
Cascade focusResolve
Walk three short steps
System syncOperate
Synchronize two systems
Signal revealDiscover
Reveal a signal
JSON cursorTrust
Suggest a structured response
Raw to recordResolve
Converge raw fragments into a clean record
Brand orbitOperate
Bring life to a section with no business object to show
Waterfall cascadeResolve
Descend the tiers down to the match
Signal timelineDiscover
Reveal a signal over time
| Signature | Family | Purpose | Mounted on (SignatureBand) |
|---|---|---|---|
scan | discover | Explore a corpus or an object | Not mounted in a band (available to Figure and UseCaseSplit showcase) |
resolve | resolve | Go from unknown to found | Not mounted in a band (available to Figure and UseCaseSplit showcase) |
stream | operate | Show an active transfer | hub mcp |
verify | trust | Confirm a validation | Not mounted in a band (available to Figure and UseCaseSplit showcase) |
cascade-focus | resolve | Walk three short steps | Not mounted in a band (available to Figure and UseCaseSplit showcase) |
sync | operate | Synchronize two systems | hub integrations |
signal-draw | discover | Reveal a signal | Not mounted in a band (available to Figure and UseCaseSplit showcase) |
json-cursor | trust | Suggest a structured response | hub developers |
converge | resolve | Converge raw fragments into a clean record | family enrichment · use case crm-hygiene · use case profile-enrichment · team revops |
orbit | operate | Bring life to a section with no business object to show | family identity · use case data-resolution · team gtm-engineers · team developers |
cascade | resolve | Descend the tiers down to the match | family search · use case find-decision-makers · team outbound-specialists |
timeline | discover | Reveal a signal over time | family jobs · use case build-tam · team agencies |
04
6 RECIPESAutomation generator
Automations readable at a glance
A trigger, a Blitz engine, a result. Recipes are declarative specs of two to four nodes, with roles from the icon registry, no coordinates and no free timeline.
2 TO 4 NODES1 BLITZ ENGINE2 BEAMSLINEAR FIRST
Contact enrichment3 NODES · LINEAR
Enrich a person, then confirm a usable contact.
PERSON01
ENRICH02
VERIFIED03
PERSON01
ENRICH02
VERIFIED03
Email resolution3 NODES · LINEAR
Turn an unknown address into a resolved work email.
UNKNOWN01
RESOLVE02
WORK EMAIL03
UNKNOWN01
RESOLVE02
WORK EMAIL03
Phone resolution3 NODES · LINEAR
Resolve and qualify a direct dial.
UNKNOWN01
RESOLVE02
DIRECT DIAL03
UNKNOWN01
RESOLVE02
DIRECT DIAL03
People search3 NODES · LINEAR
Turn an ICP query into a people dataset.
QUERY01
SEARCH02
RESULTS03
QUERY01
SEARCH02
RESULTS03
Company refresh3 NODES · LINEAR
Refresh a company record, then sync the data.
COMPANY01
REFRESH02
SYNCED03
COMPANY01
REFRESH02
SYNCED03
Hiring signal3 NODES · LINEAR
Detect a hiring signal and create a GTM action.
SIGNAL01
QUALIFY02
GTM ACTION03
SIGNAL01
QUALIFY02
GTM ACTION03
JSON · automation-recipes.json
{
"id": "contact-enrichment",
"name": "Contact enrichment",
"intent": "Enrich a person, then confirm a usable contact.",
"alt": "A person record enriched by BlitzAPI into a verified contact",
"nodes": [
{
"id": "person",
"kind": "icon",
"role": "person",
"label": "PERSON"
},
{
"id": "blitz",
"kind": "blitz",
"label": "ENRICH"
},
{
"id": "verified",
"kind": "icon",
"role": "verified",
"label": "VERIFIED"
}
]
}05
13 LIVE · 31 SPECSMotionScene · Level 3
A diagram is data
A JSON spec (canvas, nodes, flows, labels, metrics) becomes an animated SVG composed from the primitives: blueprint grid, node cards, the engine, flow paths with auto routing and staggered reveal. The same spec serves a wide tier and a derived compact tier for narrow frames.
Width ≈ the real width of the host frame: 720 for a product band, 560 for a hero proof frame or a team column. The compact tier is derived, never written.
Three nodes per section scene (card → engine → result), rarely four. Beyond, the scene competes with the text.
One mono eyebrow per proof zone, carried by the HTML (sceneLabel). A labels[] entry in the spec would duplicate it.
specs/<directory>/<slug>.json, mounted by slug through import.meta.glob. Remove the JSON, the frame disappears.
specs/use-cases/profile-enrichment.json · 560×320 · 4 nodesspecs/hubs/developers.json · 560×360 · 6 nodesspecs/teams/gtm-engineers.json · 560×240 · 3 nodesJSON · specs/use-cases/profile-enrichment.json
{
"id": "uc-profile-enrichment",
"alt": "A partial profile and company data flowing through BlitzAPI enrichment into a complete profile",
"canvas": {
"width": 560,
"height": 320
},
"grid": {
"variant": "dots"
},
"nodes": [
{
"id": "in0",
"kind": "card",
"x": 22,
"y": 60,
"w": 148,
"h": 64,
"label": "PARTIAL PROFILE"
},
{
"id": "in1",
"kind": "card",
"x": 22,
"y": 196,
"w": 148,
"h": 64,
"label": "COMPANY DATA"
},
{
"id": "engine",
"kind": "engine",
"x": 240,
"y": 120,
"w": 80,
"h": 80,
"label": "ENRICH"
},
{
"id": "out0",
"kind": "result",
"x": 382,
"y": 98,
"w": 156,
"h": 124,
"label": "COMPLETE PROFILE"
}
],
"flows": [
{
"from": "in0",
"to": "engine"
},
{
"from": "in1",
"to": "engine"
},
{
"from": "engine",
"to": "out0",
"tone": "accent",
"dur": 3
}
],
"labels": [
{
"x": 22,
"y": 38,
"text": "[ 550M+ PROFILES ]"
}
]
}| Directory | Specs | Mounted in | Status |
|---|---|---|---|
specs/use-cases/ | 5 | UseCaseHero proof frame (T3) | live |
specs/hubs/ | 3 | UseCaseHero proof frame (Developers, Integrations) | live |
specs/teams/ | 5 | PainsSection scene column (T4) | live |
specs/blog/ | 3 | Figure block at the head of an article | dormant (blog routes removed in September) |
specs/products/ | 13 | former diagram band of the product template | dormant (band removed with the hero KPIs) |
specs/home/ | 2 | home sections (specs kept for reference) | not mounted |
| Node kind | Default size | Meaning |
|---|---|---|
card · terminal | 148×64 | A source or a command; mini content simulated |
engine | 80×80 | The Blitz engine, square, glyph on accent |
result | 156×124 | A result card |
query · filter | 164×92 · 164×112 | Typed query or ICP filters with key/value fields |
json · person · company · dataset | 164×112 | Data objects with their fields |
signal | 164×96 | A detected event |
endpoint | 180×104 | A method + path card |
06
4 LEVELSProduction contract
Motion stays a parameter
A generator, a page or an author only asks for animated: true; the catalog imposes the movement compatible with the asset. Four levels, four closed contracts.
One business object or state, standalone.
57 kinds · 40 liveA brand micro-sequence in one canvas.
12 signatures · max 3 statesA short functional flow, built by nodes.
6 recipes · 2 to 4 nodesA diagram composed from a spec, mounted in a hero or a figure.
31 specs · 13 live{
"kind": "resolver",
"variant": "email",
"animated": true,
"alt": "Email resolution in progress"
}