Motion System

Requirement

Motion for INTO Consulting must enact meaning. It confirms state changes, reveals causality, communicates focus shifts, and clarifies sequence across interfaces, decks, video title cards, diagrams, and review surfaces.

Constraints

• Motion is not decoration.
• Reduced motion is respected on every interactive or presented surface.
• Routine hover and focus feedback use CSS, not GSAP.
• Browser-facing implementations use the tokens in tokens/into-consulting.theme.css.
• Motion does not introduce new color, type, or layout roles.

Bet

A named motion scale gives AI agents enough precision to produce consistent INTO behavior without inventing timings. The cost is less expressive freedom: if a surface needs a timing outside this system, it needs a documented medium reason.

Failure Modes

• Decorative loops make the brand feel like generic SaaS.
• Motion hides evidence or delays a decision.
• Too many objects animate at once and reduce legibility.
• Reduced-motion users lose state feedback or receive full entrance choreography anyway.
• GSAP is used for routine hover states that CSS should own.

Philosophy

Motion enacts meaning. It should answer one of these questions:

• What changed?
• What caused this?
• Where is attention moving?
• Which step is current?
• What is loading, pending, complete, or blocked?

If the motion cannot answer one of those questions, do not use it.

Duration Tokens

Token	Value	Use
--into-motion-instant	80ms	Pressed states, toggles, immediate affordance confirmation.
--into-motion-micro	120ms	Hover, active, focus-visible, small icon opacity changes.
--into-motion-quick	180ms	Button state changes, tab selection, compact disclosure.
--into-motion-measured	260ms	Drawer, popover, tooltip, command palette, inline validation.
--into-motion-considered	420ms	Section entrance, evidence reveal, diagram state change, title pacing.
--into-motion-slow	700ms	Hero entrance, video title card pacing, atmospheric transition.

Loops are capped at 1.2s and require a loading, progress, or video-timing job.

Easing Tokens

Token	Value	Semantics
--into-ease-standard	cubic-bezier(0.2, 0, 0, 1)	General state movement and UI transitions.
--into-ease-decelerate	cubic-bezier(0, 0, 0.2, 1)	Entrances, reveals, and settling into place.
--into-ease-accelerate	cubic-bezier(0.4, 0, 1, 1)	Exits, dismissals, and removing transient surfaces.
--into-ease-editorial	cubic-bezier(0.16, 1, 0.3, 1)	Content reveals, evidence sequencing, title pacing.

Choreography Rules

• Header, label, or state marker enters before body content.
• Body content enters before CTA or final decision control.
• Evidence reveals after the claim, never before it.
• Stagger interval: --into-motion-stagger-tight (40ms) for compact UI, --into-motion-stagger-default (80ms) for body content, and --into-motion-stagger-wide (120ms) for covers or title cards.
• Maximum simultaneous animating elements per viewport: four for UI, six for a presented slide or title card.
• Entrance choreography runs once per view. Re-entry uses static final state or a short focus shift, not a repeated showpiece.

State Transition Recipes

State	Duration	Easing	Properties	Rule
Hover	--into-motion-micro	--into-ease-standard	background-color, border-color, color, opacity	Clarify affordance only.
Active	--into-motion-instant	--into-ease-standard	transform, background-color	Press by 0.0625rem or equivalent.
Focus-visible	--into-motion-quick	--into-ease-decelerate	box-shadow, outline-color	Make keyboard location obvious.
Loading	--into-motion-loop	linear	transform or opacity	Use only while work is active; stop at completion.
Success	--into-motion-measured	--into-ease-decelerate	opacity, transform, color	Confirm completion without celebration animation.
Error	--into-motion-quick	--into-ease-standard	opacity, border-color, color	Make the failure visible; do not shake.
Pending approval	--into-motion-measured	--into-ease-standard	opacity, border-color	Surface reviewer or prerequisite context.
Permission denied	--into-motion-quick	--into-ease-standard	opacity, color, border-color	Keep the action visible and explain the block.
Generation in progress	--into-motion-loop	linear	opacity or transform	Show bounded progress; avoid ambient infinite loops.
Streaming text	--into-motion-micro	--into-ease-standard	opacity	Reveal text in readable chunks; do not type one character at a time unless the medium explicitly requires it.

Performance Gates

• Prefer transform and opacity.
• Avoid animating layout, width, height, top, left, filter, blur, and expensive shadows in repeated UI.
• JS animation needs cleanup, static final state, and a reduced-motion branch.

Reduced Motion

When prefers-reduced-motion: reduce is set:

• Override all duration tokens to ≤80ms for state-change feedback. Hover, focus, active, success, and error still confirm interaction; they just stop feeling like animations.
• Disable all stagger and choreography tokens entirely. No sequenced reveals. No entrance animations. Elements appear in their final state.
• Disable parallax, atmospheric loops, and animated canvas grain. Fall back to static grain from brand/texture-system.md.
• Preserve focus-visible feedback. Accessibility requires it.
• For genuinely long operations (export, generation, sync), switch from animated cue to text-with-status. Status lines never violate reduced motion.

House-Cadence Anchors

These three anchors define INTO’s cadence. If a generated motion does not match them, calibrate before shipping. INTO motion must read distinguishably from Material Design defaults (faster, more travel, more bounce) and from Apple/iOS defaults (heavier spring, more rubber-band feel). INTO is small-studio considered: restrained, precise, never decorative.

1. Button hover. --into-motion-micro plus --into-ease-standard. Color, border, and opacity only. No translate. No scale. Reads as a confirmation, not a movement.
2. Modal open. --into-motion-measured plus --into-ease-decelerate. Scrim fades in while content slides up by no more than 0.5rem. Together, not staggered.
3. Hero text entrance. --into-motion-considered plus --into-ease-editorial, with --into-motion-stagger-default between sibling lines. Label settles, then title, then body, then CTA. Each line travels no more than 0.25rem. The cadence is the point; the travel is incidental.

If these read generic, the cadence is wrong. Tune duration first, then easing, then stagger.

Hard Rules

• No bouncing.
• No overshoot.
• No 360-degree icon rotations.
• No parallax beyond a governed hero or title surface.
• No loops longer than 1.2s.
• No motion that hides evidence, delays control, or reduces legibility.
• No motion that animates a recognizable INTO mark (wordmark, square mark, four-point star, thick circle) as decoration. Marks may appear or fade through entrance choreography; they do not spin, pulse, or float.
• No motion that ignores prefers-reduced-motion.

Agent Rule

Choose the state or communication job first, then choose the named duration and easing token. If the job is not state, causality, focus, sequence, progress, or decision lock-in, omit motion and document the static choice.

See Also — Slide Motion Catalog

Deck-specific primitive motion and the four named reveal jobs live in templates/decks/slide-system.md#slide-motion-catalog. Use that catalog when building Google Slides, reveal.js, or presenter-mode deck sequences; this file remains the source for global duration, easing, reduced-motion, and hard-rule tokens.

See Also

• tokens/into-consulting.theme.css — token values for every name in this file.
• brand/depth-and-glass-system.md — depth transitions consume the motion tokens defined here.
• brand/texture-system.md — animated canvas grain is the one governed atmospheric loop; reduced motion turns it off.
• brand/button-system.md — button states bind to the state-transition table.
• contexts/design-foundations-system.html#motion — visible review specimen.
• contexts/brand-book.html#motion-depth-texture — governance summary.