Underlay navigation
navigation / move
The LabCapabilitiesSystems
Surface
The page moves. The menu stays.
Motion explains state, or it is removed.
A functional reference for the interaction mechanics used across Brittek surfaces. Every primitive has a behavioural role, a production use, an accessibility contract and a reduced-motion end state.
- Registry
- 32 governed primitives
- Autoplay
- Off by default
- Global route motion
- Bounded curtain · reduced-motion instant
Production contract
One grammar. Several behaviours.
The live surface keeps one timing source in CSS role tokens. The library demonstrates behaviour without creating a second animation system.
- Properties
- transform · opacity · clip-path
- Timing source
- Shared hover · disclosure · nav · reveal role tokens
- Easing
- interface · orientation · linear
- Routing
- bounded curtain on the public shell; reduced-motion = instant swap; content never hidden behind animation
Behaviour has to earn its movement.
- State before spectacle
Motion must explain a state change, hierarchy, orientation, progress, feedback or completion.
- Static first
Server-rendered content remains complete before enhancement. Interactive motion may add orientation; it never hides essential content.
- Local causality
A control animates the surface it changes. Route changes may use a bounded curtain; reduced-motion keeps an instant swap and content stays readable underneath.
- Bounded duration
Production components use the shared role tokens. Long-form motion is confined to authored specimens, never routine controls.
- Reduced-motion parity
The same information and completion state is available without travel, looping or forced timing.
- No ambient loops
No marquees, shimmer loops, cursor theatre or decorative motion that competes with the content.
Operational motion
Registered Execution is the system-state example.
Architecture stays readable at rest. When execution is invoked, one route carries activity through the field and resolves back into a stable state.
This is an existing production field renderer, not a second animation implementation created for the reference page.
Thirty-two mechanics, shown as working specimens.
The reference consolidates the earlier motion studies, current live interaction patterns and the 2026.9.8 functional library. The examples below are deliberately bounded so a reference mechanic cannot accidentally become global page behaviour.
Propertiestransform · opacity · clip-path
Production roleshover · disclosure · nav · reveal
Autoplayoff by default
Route motionbounded curtain · reduced-motion instant
Reduced motionsame information state
Reconciliation rule
Nested accordions settle layout immediately and animate only revealed content. Measured height is reserved for short isolated shells. Move-class navigation does not become a modal; cover-class surfaces own modal focus. The route curtain below matches the bounded production overlay: reduced-motion swaps instantly and essential content is never hidden behind the animation.
Cover index
navigation / cover
Plus morph
disclosure / inline
Text morph
disclosure / inline
Dot field
disclosure / bounded
Surface switch
state / bounded
Paired runtime state
state / inline
Ledger row
state / inline
Step sequence
progression / bounded
Registered execution
progression / bounded
Masked reveal
transition / bounded
Systems, not disconnected deliverables.
Typographic drift
transition / bounded
Synthesis&Reduction.
Arrival
transition / bounded
brtk.
Bounded curtain
transition / bounded
Specimen / bounded public-shell curtain
ROUTE
Dual-layer rollover
state / inline
Measured disclosure
disclosure / inline
Height is measured from real content, animated once, then released back to auto. The panel never guesses a maximum height.
Measured sliding tabs
state / bounded
Architecture and system structure.
Progress carousel
progression / bounded
01 / Evidence
Show the reason before the claim.
Measured nav shell
navigation / inline
Execution sequencer
state / bounded
RESTSTATE 01 / IDLE
Command palette
navigation / cover
ESC
ARROWS / MOVE · ENTER / SELECT · ESC / CLEAR
Accordion
disclosure / inline
Observed · deterministic · inferred · reviewed · recommended.
Inspector panel
disclosure / float
A float-class inspector leaves the surrounding surface readable. It does not take modal ownership.
Tooltip
disclosure / float
0–100 · deterministic
Filter chips
state / bounded
001 · Brittek Surface
002 · Machine Surface Inspector
003 · Brittek Identity
Table sort
state / bounded
| Agent Infrastructure | 2024 |
| Brittek Surface | 2026 |
| Motion Framework | 2025 |
Notice
feedback / float
Field registered. Evidence surface updated.
Copy confirmation
feedback / inline
https://brittek.net/llms.txtValidation
feedback / inline
Skeleton to content
progression / bounded
Brittek Surface · governed routes · machine-readable outputs.
Counter reel
progression / bounded
Readiness / 00 of 100
Cross-dissolve
transition / bounded
Live adoption
The reference is already connected to production surfaces.
The catalogue is not a detached animation showcase. Selected mechanics are used where they improve state legibility, navigation, evidence handling or operational feedback.
01
Flagship Registered Execution (assemble → register → Signal route once; tiny scroll parallax), sliding practice state, Human/Machine proof Surface Switch (cross-dissolve), evidence Counter Reel, problem step sequence 01/02/03, MSI operational band.
02
Counter reel on scan progress and result scores/counts; Human/Machine surface role switch; validation and evidence disclosures.
03
Registered Execution scroll-trigger route state that resolves at rest; operational field choreography.
04
Measured sliding practice selection, bounded execution fields and state-led practice switching.
07
Bounded route curtain
Page/route change overlay on the public shell; reduced-motion = instant swap; content never hidden behind animation.
Application map
Use the mechanic that matches the job.
The registry is a production vocabulary, not a requirement to animate every surface. Most pages should use only a small subset.
01Navigation
Underlay navigation, measured local navigation and command-style indexes.
01 · 02 · 19 · 2102Disclosure
Plus/text morphs, measured short panels, accordions, inspectors and tooltips.
03 · 04 · 16 · 22 · 23 · 2403State
Surface roles, runtime notation, ledger feedback, tabs, filters and sorting.
05 · 06 · 07 · 08 · 17 · 25 · 2604Progression
Step sequences, Registered Execution, carousels, sequencers, loading and finite counters.
09 · 10 · 18 · 20 · 30 · 3105Transition
Masked reveals, typographic continuity, arrivals, bounded curtains and same-box dissolves.
11 · 12 · 13 · 14 · 3206Feedback
Notices, copy confirmation and deterministic validation.
27 · 28 · 29