EurekaGO Brand Playbook
05
Motion
System
System
The EurekaGO motion system — principles, timing, palette and application rules for the Halo animation.
The EurekaGO motion system — principles, timing, palette and application rules for the Halo animation.
EurekaGO motion is not decoration. Every animation must carry a specific idea: the system is alive, responsive, operational. The brand does not aspire to something — it already works.
The three laws of EurekaGO motion design derive directly from the positioning: systemic authority, visible operationality, zero pitch-deck energy.
The rhythm is organic, bidirectional, continuous. No bounce, no overshoot. The Halo animation expands outward and returns inward — like a system processing at a steady state.
The base cycle is 7.5 seconds. No EurekaGO animation is frantic. Speed signals urgency and superficiality; controlled slowness signals depth and system thinking.
Azure is the only color that moves in the system. Fuchsia does not animate. Ink does not animate. Only the azure component of the mark carries motion — it is the brand's operational color.
The EurekaGO pictogram is a trapezoid with "!" — a static structure in ink/paper. The Halo System adds three concentric azure bands around the mark, animated in sequence to create the "Respiro" (Breath) pattern.
The Halo bands operate on two simultaneous layers: outer strokes (clipped outside the triangle) and inner fills (stacked, layered). This creates a coherent propagation both outward and toward the center of the mark.
The "Respiro" (Breath) pattern is bidirectional: the three bands fade out in outward succession (exhale), then fade back in inward succession (inhale). The cycle is continuous and seamless — frame 0% and frame 100% are identical.
Total cycle duration: exhale + inhale + hold. Each band uses 1/6 of the cycle for its transition, with holds of 1/3. The ease-in-out function ensures zero velocity at the edges of every hold — no jerk, no bounce.
Applied to every transition segment. Guarantees zero velocity at the start and end of each transition — movement is always smooth, never abrupt.
The animation is designed to loop infinitely without discontinuity: the final frame is identical to the first, so the cycle restart is perceptually invisible.
@keyframes pulse-L1 { 0% { opacity: 1; } /* hold: all on */ 16.66% { opacity: 0; } /* L1 off — exhale starts */ 83.33% { opacity: 0; } /* hold: off */ 100% { opacity: 1; } /* L1 on — inhale complete */ } @keyframes pulse-L2 { 0% { opacity: 1; } 16.66% { opacity: 1; } /* hold while L1 exits */ 33.33% { opacity: 0; } /* L2 off */ 66.66% { opacity: 0; } /* hold: off */ 83.33% { opacity: 1; } /* L2 on — inhale */ 100% { opacity: 1; } } @keyframes pulse-L3 { 0% { opacity: 1; } 33.33% { opacity: 1; } /* hold while L1+L2 exit */ 50% { opacity: 0; } /* L3 off — all dark */ 66.66% { opacity: 1; } /* L3 on first — inhale starts */ 100% { opacity: 1; } }
The DARK version of the Halo uses deep teal tones, pre-composed against an ink background (#0A0A0A). The three bands decay toward the background — the mark "emerges" from the dark when all bands are on, and dissolves into ink when they fade out.
The Halo DARK must be used exclusively on Ink (#0A0A0A) surfaces. Not on cream, not on white, not on colored surfaces. The band gradient is calibrated specifically to merge with ink.
The LIGHT version uses the three tints of the light azure scale, pre-composed against a cream background (#F5F3EC). The progression runs from the most saturated azure (L1, inner) to near-paper (L3, outer), creating an effect of radiated light.
The Halo LIGHT should be used on Cream (#F5F3EC) surfaces or, carefully, on White. Not on ink — use the DARK version for dark backgrounds. Band L3 is calibrated to merge with cream: on white it may appear too detached.
The pictogram is built on a 100×100 viewBox. The unified triangle — with vertices at the coordinates below — is the parent shape from which both the Halo bands and the interior fills derive. Bar and dot in paper/ink cover the triangle to form the "!" glyph.
| Elemento | Coordinate |
|---|---|
| ViewBox | 0 0 100 100 |
| Triangolo — Apex (A) | 54.6884, 5.0000 |
| Triangolo — Bottom Right (BR) | 54.6884, 95.0000 |
| Triangolo — Bottom Left (BL) | 37.5628, 95.0000 |
| Bar — vertici | A · (54.6884, 70.1307) · (40.7286, 83.5519) |
| Dot — vertici | BL · BR · (54.6884, 79.6332) |
| Halo stroke-width L1 | 6 — inner band |
| Halo stroke-width L2 | 12 — middle band |
| Halo stroke-width L3 | 18 — outer band |
| ClipPath — outside-tri | Full rectangle (−100 −100 → 200 200) with a triangle hole (fill-rule: evenodd). Retains only the outer half of the strokes. |
When animation is unavailable — prefers-reduced-motion environments, PDF, print, static contexts — the mark appears in the "All ON" state: all bands visible, maximum chromatic presence. Do not use intermediate states as a static version.
The Halo animation has a precise function: brand identity marker in high-visibility digital contexts. It is not a UI animation — it is a brand expression. Its use must be controlled and intentional.
The master animation files live in the 60_ANIMATIONS/ folder. Do not modify timing or geometry values without updating this document.
| File | Versione | Note |
|---|---|---|
| 260523_Pyctogram EurekaGO Animated_DARK.html | v18 | Halo DARK on ink. Geometry r9, 7.5s cycle. Primary reference file. |
| 260523_Pyctogram EurekaGO Animated_LIGHT.html | v19 | Halo LIGHT on cream. Same geometry and timing. Light azure scale palette. |