CHAPTER 9 — BRAND MOTION SYSTEM

Brando Brand Guidelines v1.0

Motion is a core part of Brando’s identity. It represents the flow of meaning, the transfer of semantic rules, and the activation of governance within AI systems.

Brando’s motion system is not decorative animation — it is the visual metaphor for how brand policies move through an LLM.

This chapter defines how movement, transitions, timing, and behavioral cues embody the Brando brand.

9.1 Motion Philosophy

Brando motion must always feel:

1. Quietly Intelligent

It moves with purpose, not excitement.

2. Controlled

Motion reflects governance, not chaos.

3. Semantic

Movements symbolize relationships, flows, or activation.

4. Minimal

No unnecessary flourish or playful elasticity.

5. Atmospheric

Inspired by the Northern Lights — soft, directional, evolving.

9.2 Motion Principles

Principle 1 — Structure Leads

Movement always follows an underlying framework:

grid
graph
path
flow

Motion never appears random.

Principle 2 — Slow, Calm, Confident

Brando avoids sharp acceleration. Motion should be subtle and easing-based.

Principle 3 — Direction Matters

Motion implies meaning.

Left → Right = progression
Bottom → Top = elevation
Diagonal (30–45°) = semantic flow
Radial Outward = activation
Radial Inward = consolidation / policy merging

Never animate downward or chaotically.

Principle 4 — Negative Space is Active

Movement occurs within ample whitespace. It must feel spacious, breathable, premium.

Principle 5 — Aurora Influence

Motion embodies:

soft gradients
flowing trails
luminous shifts
atmospheric smoothing

But only in hero or expressive moments.

9.3 Timing System

Brando’s timing fundamentals:

Durations

Fast: 120–160ms
Standard: 240–320ms
Slow: 400–600ms
Hero / Atmospheric: 2–6 seconds

Easing

Default: cubic-bezier(0.25, 0.1, 0.25, 1) (standard ease-in-out — calm, controlled)
Hero motion: cubic-bezier(0.4, 0.0, 0.2, 1) (smooth and cinematic)

Never use:

bounce
spring physics
elastic easing
overshoot

Brando does not wiggle. Brando glides.

9.4 Motion Behaviors by Element

Below are the core motion behaviors applied to Brando’s visual system.

9.4.1 Semantic Nodes (Core Token)

Nodes represent entities in a policy graph. Their animation must reflect meaning activation, not decoration.

Behaviors

Pulse: 1–2px expansion, 1.5s loop, 40% opacity fade
Glow: Aurora Cyan or Aurora Green soft glow, subtle
Connect: When a node links, a line animates between nodes with smooth easing
Highlight: 240ms color shift to accent, then settle back

Rules

Never bounce
Never jitter
Never overshoot

Node behavior = semantic activation.

9.4.2 Edges (Graph Connections)

Edges represent relationships and rules.

Behaviors

Draw-In Motion: Line draws from node A → B
Directional Shimmer: A faint light moves along the edge to show flow
Edge Activation: Slight brightening on interaction (hover/click)

Rules

Always straight
Never wavy
Never animated in loops
Must maintain 45° or 90° pathing

9.4.3 Aurora Ribbon (Hero Element)

A soft, atmospheric gradient ribbon inspired by the Northern Lights.

Behaviors

Gradient Drift: Slow shifting colors — 2 to 5 seconds per cycle
Soft Parallax: Layers moving at different low speeds
Subtle Wave: Very low amplitude sine movement

Rules

Never fast
Never bright neon glow
Never occupy the entire screen
Use in hero/expressive contexts only

9.4.4 Typography Motion

Typography only moves in:

hero moments
transitions
data explanations

Behaviors

Fade-Up: 180–240ms, smooth opacity
Slide-Up 8px: Minor vertical rise with ease
Staggered Reveal: 80–100ms per line

Rules

No letter-by-letter animation
No kinetic typography
No bounce
No excessive distance

Motion should feel authoritative.

9.4.5 UI Components Motion

Buttons

Hover: opacity shift + 1px cyan underline
Press: slight darkening
No scaling

Tabs

Underline slides under selected tab
Duration: 200ms

Cards

Soft shadow elevation on hover
Max 2–4px rise

Modals

Fade-in: 180ms
Fade-out: 160ms
No slide-from-top or zoom

9.5 Hero Motion System

Hero animations are the most expressive face of Brando.

Components:

Aurora ribbon
Semantic nodes
Edges
Typography

Behavior:

atmospheric drift (2–6 seconds)
nodes softly pulsing
edges connecting sequentially
occasional semantic shimmer
text gliding into place

The feeling:

intelligent
elegant
stable
futuristic
cinematic

9.6 Interaction States & Graph Animations

When interacting with the Brand Policy Graph UI:

On Hover

node grows +2px
edge brightens slightly
label fades in

On Click

node locks to accent color
edges animate outward
related nodes glow subtly

On Filter / Change

nodes reorganize with 240ms eased transitions
edges redraw intelligently

This shows the living structure of the policy graph.

9.7 Motion Do’s and Don’ts

✔ DO

Use slow atmospheric motion
Focus on meaning, not decoration
Align motion with graph structure
Keep movements subtle
Use accent glows sparingly
Maintain timing consistency

✖ DON’T

Use elastic or spring motion
Animate text letter-by-letter
Flash or flicker
Spin elements
Overwhelm with gradients
Animate every element at once
Use cartoon-style movement

9.8 Motion in the Context of Brando’s Identity

Motion expresses:

the semantic “flow” of policies
the activation of brand rules
the stability of governance
the elegance of structured meaning
the natural intelligence of an aurora

It is a visual representation of how Brando works.

Brando motion is not entertainment. It is explanation.

9.9 Implementation Tokens (CSS/JS)

“These are motion primitives for engineers.”

CSS Variables

:root {
  --motion-fast: 150ms;
  --motion-standard: 280ms;
  --motion-slow: 480ms;
  --motion-hero: 4s;

  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-hero: cubic-bezier(0.4, 0.0, 0.2, 1);
}

JavaScript Timing Patterns

const BRANDO_MOTION = {
  fast: 150,
  standard: 280,
  slow: 480,
  hero: 4000,
  ease: "cubic-bezier(0.25, 0.1, 0.25, 1)",
  easeHero: "cubic-bezier(0.4, 0.0, 0.2, 1)",
};

These provide a consistent motion experience across all surfaces.