Foundations · Motion
Assemble. Reveal. Settle.
Motion is assembly: modular pieces arrive in order, become legible, and lock into place. The same discipline used to compose a Mino shapes how Tetrifox interfaces move—then they stay put.
stagger → opacity / transform → spring → still
- 01Assemble
- 02Reveal
- 03Settle
0.12s stagger · spring lock
Mino shown in its settled state.
Mino shown in its settled state.
The system
Presets.
Choose motion by purpose, not taste. Every variant, duration, and easing below is read from the shared runtime configuration and demonstrated on the same Mino.
Fade up · full motion
Fade up selected; Mino is settled.
Fade up selected; Mino is settled.
Accessibility
Reduced motion.
Reduced motion changes presentation, not meaning. The effective preference governs reveals, the Mino stage, the pattern field, CSS micro-interactions, and smooth scrolling together.
This is the same saved preference exposed in the footer: System follows the operating system; Reduced and Full are explicit overrides.
Pattern field · full
- Reveals
- once
- Mino
- user-triggered
- Pattern
- visible only
- Micro-interactions
- fast
- Scroll
- smooth
Preference proof ready. Effective motion is full.
Restraint
What moves.
Motion has a budget. Spend it on orientation and assembly; keep structure, reading, and scroll position still.
Surface
Hero content
Trigger
Page mount
Behavior
fadeUp · once
Stop condition
Settled after reveal
Surface
Section headers
Trigger
First viewport entry
Behavior
fadeUp · once
Stop condition
Settled after reveal
Surface
Grid cell content
Trigger
First viewport entry
Behavior
Exported stagger · once
Stop condition
Settled after assembly
Surface
Illustrations
Trigger
After explanatory text
Behavior
fadeIn · once
Stop condition
Fully visible
Surface
Pattern field
Trigger
Visible + full motion
Behavior
Contained canvas exception
Stop condition
Offscreen, hidden, reduced, unmounted
Moves
- Section headers — fade up once when they enter.
- Grid cell content — stagger only when order matters.
- Hero content — reveal once on mount.
- Illustrations — fade in after their explanation.
Stays still
- Header and footer chrome.
- Borders, grid lines, and settled content.
- Anything tied to scroll progress.
- Any surface without a named reduced state.
The one exception
The pattern field.
The pattern field is the only ambient exception. It runs only inside a contained cell, only while visible, and only when the effective preference allows motion.
Extension — Dock, Recompose, and Lattice remain grounded proposals, not shipped presets.
assembled / revealed / settled
Then it stays put.