Video & Motion - Hermes Intelligence

Motion Principles

Five rules governing every animation in the Hermes visual system.

Purposeful

Every animation communicates something. Entrance animations signal new information. Transitions signal context change. If motion doesn't serve a purpose, remove it.

Smooth

Spring easing cubic-bezier(.16,1,.3,1) for UI entrances. Never use linear for anything except progress bars and scan lines.

Staggered

Sequential elements enter with 220ms stagger between cards and 50ms between characters. Creates a cascade rhythm that feels intentional, not simultaneous.

Layered

Background grid appears first, then content, then overlays. Each layer has its own timing. Deep layers are slower, surface layers are snappier.

Dark Luxury

Deep Space base with saturated accent colors. Vignette framing on video edges. Subtle noise texture. The aesthetic of a premium intelligence terminal, not a SaaS dashboard.

Easing Library

Click each track to see the easing in action.

Spring Reveal cubic-bezier(.16,1,.3,1)

Card/text entrances, modal opens, element reveals. Default for all UI motion.

Smooth ease-in-out

Scene transitions, page changes, cinematic wipes. 400-800ms duration.

Linear linear

Progress bars and scan lines only. Never for UI element motion.

CSS Variables

--ease-spring: cubic-bezier(.16,1,.3,1);
--ease-smooth: ease-in-out;
--ease-linear: linear;
--stagger-card: 220ms;
--stagger-char: 50ms;

Animation Patterns

Live CSS-only demos of core animation patterns used across all cinematics.

Strategic

Character Reveal

Blur + translateY + stagger per character

50ms stagger · 600ms duration · spring easing

Card Cascade

translateY + opacity with stagger

220ms stagger · 500ms duration · spring easing

Metric Ring

SVG stroke-dasharray animation

1.2s duration · 0.3s delay · spring easing

Pulse Dot

Infinite opacity oscillation for status indicators

2s cycle · ease-in-out · staggered offsets

SCANNING

Scan Line

Top-to-bottom sweep for processing states

2s cycle · linear · infinite

0

STRATEGIC SIGNALS

Count-Up Number

Eased interpolation from 0 to target

1.5s duration · ease-out · integer steps

Cinematic Templates

Four reusable cinematic sequences. Each auto-plays on scroll with a replay button.

Hermes

Intelligence

Intro Sequence

Logo reveal + tagline + constellation grid fade-in. Use for video openers and demo starts.

Sebastian Kaczmarczyk

CPO

Lower Third

Name/title bar with accent color slide-in. Use for speaker identification and labels.

SCENE A

SCENE B

Scene Transition

Wipe with product color shift. Use between major content sections.

Ready to Deploy?

hermes-intelligence.com

Outro

Brand mark + CTA + fade to black. Always end videos with this sequence.

Canvas Patterns

Documented recipes from vextrum_cinematic.html for Canvas-based animations.

Constellation Grid

70 nodes with proximity-based edges. Nodes drift slowly; edges form when distance < threshold. Color transitions match scene mood.

Core Pattern

class ConstellationGrid {
  constructor(canvas, nodeCount = 70) {
    this.edgeThreshold = 120;
    // Nodes drift, edges form on proximity
  }
}

Knowledge Graph

Typed nodes (entity, concept, source) with directional edges. Data packets animate along edges as colored dots. Used in pipeline visualization scenes.

Core Pattern

class KnowledgeGraph {
  constructor(nodes, edges) {
    this.packets = [];
    // Data dots animate along edges
  }
}

Gauge Render

Arc stroke-dash with color thresholds. Green > 70%, amber 40-70%, red < 40%. Central percentage label in JetBrains Mono.

Core Pattern

function drawGauge(ctx, cx, cy, r, pct) {
  const startAngle = 0.75 * Math.PI;
  // Arc from start to pct-proportional end
}

Color Grading by Scene

Which accent colors convey which emotional tone in cinematic sequences.

Gold

Warmth, premium, power

Intro, engine, prestige

Teal

Growth, data, intelligence

Ingestion, products, data flow

Violet

Synthesis, complexity

Pipeline, AI processing

Blue

Intelligence, trust

Delivery, corporate, briefs

Red

Alert, urgency

Red team, warnings, threats

Reference Cinematics

Existing HTML presentations that exemplify these motion guidelines.

Vextrum Cinematic

Full 8-scene cinematic demo with constellation grid, knowledge graph, pipeline visualization, and metric gauges. The gold standard for brand video.

vextrum_cinematic.html

Agora Promo

Media monitoring product cinematic with animated data flows, real-time pulse visualizations, and discourse analysis scenes.

agora_promo.html

Hermes Cinematic

Master brand cinematic showcasing the full Hermes Intelligence platform with animated product transitions and market intelligence scenes.

hermes_cinematic.html