Logo Evolution Transition

Created: March 2026

A standalone animated artifact showing the visual evolution from the 2018 Objectuve logo (bullseye + arrow) to the 2026 V11 mark (tapered progress ring + gold dot). Designed to be screen-recorded as a 1080x1080 square video for social media during the relaunch.

Not updated for Logo refinement — V12 (2026-08-07), on purpose. This is a self-contained, frozen artifact — Orion's V12 task package explicitly scoped it out ("historical evolution artifact, deliberately shows the old mark"). The "Wordmark" phase below still describes the pre-V12 synthesised-italic treatment; that's correct for what this recording shows, not a description of the current ObjectuveLogo.vue wordmark. See V12 for the current oblique treatment.

Location

marketing_landing/logo-evolution/index.html

What It Does

The animation runs ~12 seconds and contains these phases:

Phase	Duration	Description
Fade in	0.5s	2018 bullseye appears on dark background
Hold	~2s	Static 2018 mark (exact original SVG paths)
Crossfade + morph	~3s	2018 mark fades as parametric ring appears; ring opens from 360 to 270 degrees, taper forms, dot migrates from center to gap and turns gold, flat blue shifts to gradient
Hold V11	~2s	Clean 2026 mark at rest
Reveal replay	~1.5s	V11 ring redraws from scratch (documented reveal animation), dot pops with spring
Wordmark	~1s	"Objectuve" in Outfit 800 italic gradient text

Technical Details

• Self-contained HTML -- no build step, no npm dependencies
• GSAP 3 Core (CDN) for timeline and tweening
• Google Fonts (Outfit, Inter) via CDN
• Parametric SVG -- arc math extracted from ObjectuveLogo.vue, rebuilds ring path each frame via buildArcPath() with animatable parameters (sweep, radii, taper offset)
• 2018 mark uses exact original SVG paths (not a recreation)
• Crossfade alignment -- 2018 and parametric rings are size-matched (measured via bounding box) for seamless transition

How to Record

1. Open http://localhost:5177/logo-evolution/ (start the marketing server with npx serve in marketing_landing/)
2. Resize browser to 1080x1080
3. Press H to hide the controls overlay
4. Press Space to play (or append ?autoplay to the URL)
5. Screen-record using macOS Screenshot (Cmd+Shift+5) or OBS

Keyboard Controls

Key	Action
Space	Play animation
R	Reset to initial state
H	Toggle controls overlay

Last updated: 2026-08-07 — added a pointer to Logo refinement — V12; the artifact itself is unchanged and intentionally not updated for V12 (see note above)