Underlay navigation
move · transform + opacity · physical
No. 01360 ms--motion-revealorientationRM · Immediate surface displacement.
StudioCapabilitiesSystems
The page moves. The menu stays.
Motion explains state, or it is removed.
Thirty-three governed interaction mechanics used across Brittek surfaces — each with an intent, a production use and a reduced-motion end state.
Thirty-three mechanics, shown as working specimens.
Navigation
04 specimensCover index
cover · none · native dialog
No. 02No travelno easingRM · Dialog opens in final state.
Measured nav shell
inline · height · physical
No. 19360 msorientationRM · Menu snaps open/closed.
Command palette
cover · none · selection swaps
No. 21No travelno easingRM · Palette opens in final state.
ESC
ARROWS / MOVE · ENTER / SELECT · ESC / CLEAR
Disclosure
07 specimensPlus morph
inline · rotate · state
No. 03140 ms--motion-navinterfaceRM · Glyph changes without travel.
Text morph
inline · translateY · state
No. 04140 ms--motion-navinterfaceRM · Label swaps immediately.
Dot field
bounded · transform + opacity · proximity
No. 05No travellinear interpolationRM · Loop never starts under reduced motion; decorative aria-hidden field.
Transform + opacity via one scalar. Loop on pointer only; settles ~640ms. Touch inert. Decorative.
Measured disclosure
inline · height · physical
No. 16360 msorientationRM · Panel snaps to final height.
Height is measured from real content, animated once, then released back to auto. The panel never guesses a maximum height.
Accordion
inline · content clip + opacity · enter
No. 22360 ms--motion-revealorientationRM · Layout settles immediately.
Observed · deterministic · inferred · reviewed · recommended.
Inspector panel
float · opacity + transform · enter
No. 23140 ms--motion-navorientationRM · Panel appears immediately.
A float-class inspector leaves the surrounding surface readable. It does not take modal ownership.
Tooltip
float · opacity + transform · hover
No. 24120 ms--motion-disclosureinterfaceRM · Tooltip appears without travel.
0–100 · deterministic
State
08 specimensSurface switch
bounded · colour + transform · state
No. 06120 ms--motion-disclosureinterfaceRM · Surface switches immediately.
Paired runtime state
inline · none · state text swaps
No. 07No travelno easingRM · Text state changes only.
Ledger row
inline · translateX · hover
No. 08120 ms--motion-disclosureinterfaceRM · Static focus treatment.
Dual-layer rollover
inline · translateY + skew reset · hover
No. 15120 ms--motion-disclosureorientationRM · Static label remains.
Measured sliding tabs
bounded · width + transform · state
No. 17140 ms--motion-navinterfaceRM · Selected tab changes immediately.
Architecture and system structure.
Execution sequencer
bounded · none · direct state selection
No. 20No travelno easingRM · Direct deterministic selection.
RESTSTATE 01 / IDLE
Filter chips
bounded · none · result set swaps
No. 25No travelno easingRM · Result set changes immediately.
001 · Brittek Surface
002 · Machine Surface Inspector
003 · Brittek Identity
Table sort
bounded · indicator rotate · state
No. 26140 ms--motion-navinterfaceRM · Rows reorder immediately.
| Agent Infrastructure | 2024 |
| Brittek Surface | 2026 |
| Motion Framework | 2025 |
Progression
06 specimensStep sequence
bounded · indicator transform · state
No. 09140 ms--motion-navinterfaceRM · Active step changes immediately.
Live build record
bounded · wave assembly · enter
No. 10360 ms--motion-revealorientationRM · Resolved field remains visible.
Progress carousel
bounded · translateX + progress · enter
No. 18360 ms--motion-revealorientationRM · Manual step change only.
01 / Evidence
Show the reason before the claim.
Skeleton to content
bounded · opacity · enter
No. 30360 ms--motion-revealorientationRM · Loaded content replaces placeholder.
Brittek Surface · governed routes · machine-readable outputs.
Counter reel
bounded · numeric count · enter
No. 31360 ms--motion-revealease-out cubicRM · Final value renders directly.
Assembly sequence
bounded · transform + opacity · physical · 900ms / 42ms stagger
No. 33900 msease-out cubicRM · Jumps to resolved under reduced motion; scrub remains the source of truth.
One scalar · 900ms physical · 42ms stagger · not a preloader.
Transition
05 specimensMasked reveal
bounded · clip-path + transform · enter
No. 11360 ms--motion-revealorientationRM · Content stays visible.
Systems, not disconnected deliverables.
Typographic drift
bounded · opacity + translateX · cinema
No. 12720 ms2 × --motion-revealorientationRM · Complete phrase rendered.
Synthesis&Reduction.
Arrival
bounded · opacity + translateY · enter
No. 13720 ms2 × --motion-revealorientationRM · Identity is present immediately.
Bounded curtain
bounded · clip-path + transform · state
No. 14480 msROUTE_CURTAINGSAP power4.inOutRM · Target view switches directly.
ROUTE
Cross-dissolve
bounded · opacity · state
No. 32360 ms--motion-revealinterfaceRM · View swaps immediately.
Feedback
03 specimensNotice
float · opacity + translateY · enter/state
No. 27360 ms--motion-revealorientationRM · Notice appears/disappears directly.
Field registered. Evidence surface updated.
Copy confirmation
inline · none · status label swaps
No. 28No travelno easingRM · Confirmation text changes only.
https://brittek.net/llms.txtValidation
inline · clip-path + opacity · state
No. 29140 ms--motion-navorientationRM · Error is visible immediately.
Specification
Full inventory
Navigation
04 primitivesUnderlay navigation, measured local navigation and command-style indexes.
| No. | Primitive | Duration | Easing | Reduced motion | Production use |
|---|---|---|---|---|---|
| 01 | Underlay navigationtransform + opacity · physical | 360 ms--motion-reveal | orientation | Immediate surface displacement. | Primary site navigation. |
| 02 | Cover indexnone · native dialog | No travelnative dialog; opens in final state | — | Dialog opens in final state. | Command and reference overlays only. |
| 19 | Measured nav shellheight · physical | 360 msmeasured height | orientation | Menu snaps open/closed. | Secondary local navigation. |
| 21 | Command palettenone · selection swaps | No travelselection moves without travel | — | Palette opens in final state. | Reference and internal operating surfaces. |
Disclosure
07 primitivesPlus/text morphs, proximity fields, measured short panels, accordions, inspectors and tooltips.
| No. | Primitive | Duration | Easing | Reduced motion | Production use |
|---|---|---|---|---|---|
| 03 | Plus morphrotate · state | 140 ms--motion-nav | interface | Glyph changes without travel. | Compact disclosure controls. |
| 04 | Text morphtranslateY · state | 140 ms--motion-nav | interface | Label swaps immediately. | Paired open/close controls. |
| 05 | Dot fieldtransform + opacity · proximity | No travelpointer-driven; per-frame lerp 0.22 | linear interpolation | Loop never starts; grid at rest. | Pointer-proximity matrix specimens; bounded fields — not ambient page chrome. |
| 16 | Measured disclosureheight · physical | 360 msmeasured height, then released to auto | orientation | Panel snaps to final height. | Short isolated disclosure shells. |
| 22 | Accordioncontent clip + opacity · enter | 360 ms--motion-revealicon 140ms; layout settles first | orientation | Layout settles immediately. | Nested evidence/reference material. |
| 23 | Inspector panelopacity + transform · enter | 140 ms--motion-nav | orientation | Panel appears immediately. | Bounded inspection detail. |
| 24 | Tooltipopacity + transform · hover | 120 ms--motion-disclosure | interface | Tooltip appears without travel. | Short technical definitions. |
State
08 primitivesSurface roles, runtime notation, ledger feedback, tabs, filters and sorting.
| No. | Primitive | Duration | Easing | Reduced motion | Production use |
|---|---|---|---|---|---|
| 06 | Surface switchcolour + transform · state | 120 ms--motion-disclosure | interface | Surface switches immediately. | Editorial/instrument comparisons. |
| 07 | Paired runtime statenone · state text swaps | No travelstate text swaps | — | Text state changes only. | Machine state notation. |
| 08 | Ledger rowtranslateX · hover | 120 ms--motion-disclosure | interface | Static focus treatment. | Records and system indexes. |
| 15 | Dual-layer rollovertranslateY + skew reset · hover | 120 ms--motion-disclosure | orientation | Static label remains. | Primary and secondary controls. |
| 17 | Measured sliding tabswidth + transform · state | 140 ms--motion-nav | interface | Selected tab changes immediately. | Mode and surface selectors. |
| 20 | Execution sequencernone · direct state selection | No travelrange input selects state directly | — | Direct deterministic selection. | Runtime/state demonstrations. |
| 25 | Filter chipsnone · result set swaps | No travelresult set swaps | — | Result set changes immediately. | Archive and evidence filters. |
| 26 | Table sortindicator rotate · state | 140 ms--motion-nav | interface | Rows reorder immediately. | Technical tables. |
Progression
06 primitivesStep sequences, the live build record, carousels, sequencers, loading, finite counters and assembly.
| No. | Primitive | Duration | Easing | Reduced motion | Production use |
|---|---|---|---|---|---|
| 09 | Step sequenceindicator transform · state | 140 ms--motion-nav | interface | Active step changes immediately. | Process and diagnostic sequences. |
| 10 | Live build recordwave assembly · enter | 360 ms--motion-reveal+ 42ms stagger per column | orientation | Resolved field remains visible. | Live build records. |
| 18 | Progress carouseltranslateX + progress · enter | 360 ms--motion-revealprogress bar 140ms linear | orientation | Manual step change only. | Bounded editorial sequences; autoplay opt-in. |
| 30 | Skeleton to contentopacity · enter | 360 ms--motion-reveal | orientation | Loaded content replaces placeholder. | Bounded loading states; the MarkLoader (No. 13 Arrival, brtk.) appears only after a genuine 300ms wait; no shimmer loops. |
| 31 | Counter reelnumeric count · enter | 360 ms--motion-revealfinite count, requestAnimationFrame | ease-out cubic | Final value renders directly. | Finite measured score/state changes. |
| 33 | Assembly sequencetransform + opacity · physical · 900ms / 42ms stagger | 900 ms+ 42ms stagger · 12 nodes | ease-out cubic | Jumps to resolved; scrub still works. | Authored specimens / finite figure resolve — never route preloaders. |
Transition
05 primitivesMasked reveals, typographic continuity, arrivals, bounded curtains and same-box dissolves.
| No. | Primitive | Duration | Easing | Reduced motion | Production use |
|---|---|---|---|---|---|
| 11 | Masked revealclip-path + transform · enter | 360 ms--motion-reveal | orientation | Content stays visible. | Selected editorial arrivals. |
| 12 | Typographic driftopacity + translateX · cinema | 720 ms2 × --motion-reveal+ 60ms stagger per word | orientation | Complete phrase rendered. | Short authored display moments. |
| 13 | Arrivalopacity + translateY · enter | 720 ms2 × --motion-reveal360ms identity, then 360ms register | orientation | Identity is present immediately. | Bounded identity/runtime specimen; the MarkLoader (components/motion/Arrival) after a genuine 300ms wait, once, no loop. |
| 14 | Bounded curtainclip-path + transform · state | 480 msROUTE_CURTAIN220ms enter + 260ms exit | GSAP power4.inOut | Target view switches directly. | Specimen only since APPEARANCE-03A (2026-10-18): a paper-panel wipe documented at 220ms enter + 260ms exit. Route changes no longer use it; they fade the committed route in over --motion-nav. |
| 32 | Cross-dissolveopacity · state | 360 ms--motion-reveal | interface | View swaps immediately. | Same-box representation changes. |
Feedback
03 primitivesNotices, copy confirmation and deterministic validation.
| No. | Primitive | Duration | Easing | Reduced motion | Production use |
|---|---|---|---|---|---|
| 27 | Noticeopacity + translateY · enter/state | 360 ms--motion-reveal | orientation | Notice appears/disappears directly. | Completion and system feedback. |
| 28 | Copy confirmationnone · status label swaps | No travellabel swaps; clears after 1600ms | — | Confirmation text changes only. | Machine-resource copy controls. |
| 29 | Validationclip-path + opacity · state | 140 ms--motion-nav | orientation | Error is visible immediately. | Forms and instrument inputs. |
Timing tokens
| Token | Value | Role |
|---|---|---|
| --motion-hover | 60ms | Hover colour and underline changes. |
| --motion-press | 70ms | Pressed state. |
| --motion-focus | 80ms | Focus ring arrival. |
| --motion-disclosure | 120ms | Small state changes: switches, ledger rows, tooltips. |
| --motion-nav | 140ms | Indicators, icons and short panels. |
| --motion-reveal | 360ms | Content arrival and measured height; the production ceiling. |
| --ease-interface | cubic-bezier(0.2, 0, 0, 1) | State changes on controls. |
| --ease-orientation | cubic-bezier(0.22, 1, 0.36, 1) | Arrivals and spatial orientation. |
Operating rules
State before spectacle. Explain state, hierarchy, orientation, progress, feedback or completion.
Static first. Server-rendered content is complete before enhancement; motion never hides it.
Local causality. A control animates the surface it changes; routes use one curtain.
Bounded duration. Production uses role tokens; long motion stays in authored specimens.
Reduced-motion parity. Same information and end state, without travel, loops or forced timing.
No ambient loops. No marquees, shimmer, cursor theatre or competing decorative motion.
Operational motion
The live build record is the system-state example.
Architecture stays readable at rest. When execution is invoked, one route carries activity and resolves to a stable state — the existing production field renderer, not a second implementation.
Live adoption
The reference is already connected to production surfaces.
Selected mechanics only where they improve state legibility, orientation, evidence handling or operational feedback.
01
Flagship live build record and user-invoked Human/Machine Surface Switch only; commercial content stays static.
02
Counter reel on progress and scores; Human/Machine switch; validation and evidence disclosures.
04
Sliding practice selection, bounded execution fields and state-led practice switching.
07
Bounded route curtain
Public-shell route changes; specification in primitive 14.