Turn an existing logo, app icon, SVG mark, or set of brand variants into a geometry-led animated identity: first analyze the logo's parts and negative space, then propose distinct loader and motion concepts, prototype the selected directions, and build a polished looping logo cycle. Use when the user asks for an animated logo, logo cycle, branded loader or spinner, logo morph, app-icon theme cycle, or wants several creative motion directions derived from the logo itself. Do not use for static logo design, generic loading indicators with no brand asset, or decorative motion unrelated to a logo.
Turn an existing logo, app icon, SVG mark, or set of brand variants into a geometry-led animated identity: first analyze the logo's parts and negative space, then propose distinct loader and motion concepts, prototype the selected directions, and build a polished looping logo cycle. Use when the user asks for an animated logo, logo cycle, branded loader or spinner, logo morph, app-icon theme cycle, or wants several creative motion directions derived from the logo itself. Do not use for static logo design, generic loading indicators with no brand asset, or decorative motion unrelated to a logo.
license
MIT
Animated Logo Cycle
Create motion that could only belong to the supplied logo. The logo's geometry,
negative space, material variants, and visual rhythm must determine the
choreography. A fade, scale, blur, or rotation is a supporting technique, not a
concept by itself.
Quick reference
Need
Read
Motion families the logo's own geometry can support
references/choreography-guide.md
Worked examples of geometry-led cycles
references/logo-cycle-case-studies.md
The specification format for the chosen cycle
templates/motion-spec.md
Easing, springs, ambient-sequence rules, performance, reduced motion
references/motion-principles.md
Decorative-duplicate naming, reduced motion as a requirement
references/accessibility-contract.md
Evidence boundaries, frame analysis, feel checks
references/evidence-and-verification.md
An ambient brand loop is not UI feedback. The sub-300ms budget does not apply
to it — see references/motion-principles.md §9 for the rules that do. Everything
else in that file, especially the performance and reduced-motion sections, applies
in full.
Non-negotiable workflow
Do not jump from an asset to production code.
Establish the intended use and constraints.
Inspect the real assets and any reference recording.
Write a logo-anatomy model.
Propose genuinely different concepts.
Stop and let the user select directions.
Prototype the selected directions in isolation.
Stop and let the user select the final choreography.
Implement, verify, and document the chosen cycle.
The two selection gates are required. The user owns the creative choice.
1. Establish the brief
Ask for every decision that cannot be proven from the project. Keep related
questions together, but do not silently choose defaults for brand decisions.
Required decisions:
Context: navbar identity, loader, onboarding, launch page, app icon,
splash screen, or another placement.
Exploration count: how many concepts to prototype. Recommend 3–5 when the
user has no preference.
Color policy: preserve one color, cycle supplied brand variants, or
explore a user-approved palette.
Motion character: restrained, precise, elastic, playful, mechanical,
liquid, dimensional, or another defined quality.
Implementation target: framework, rendering environment, supported
browsers, expected display sizes, and whether a motion library is already in
use.
Source of truth: which SVG, raster exports, icon variants, design tokens,
or reference videos are authoritative.
Also establish whether the animation is decorative or communicates state. That
determines accessible naming and whether a static alternative is sufficient.
2. Inspect before imagining
Inspect repository instructions, current dependencies, existing logo usage, and
dirty work before touching code. Preserve unrelated changes.
light, dark, monochrome, tinted, material, and size variants;
fill and stroke ownership;
SVG groups, paths, primitive shapes, masks, clip paths, and filters;
repeated modules, symmetry, diagonals, axes, corners, and optical center;
negative-space shapes that must remain legible;
raster variants that share an identical crop and can be layered safely;
SVG paths that are structurally compatible for interpolation;
protected invariants: clear space, proportions, corner radii, stroke weight,
brand colors, and the exact resting silhouette.
Render and inspect the logo at its real target sizes. A concept that works at
128px can become noise at 20px.
Logo-anatomy output
Write a compact table:
Part
Geometry
Relationship
Motion affordances
Must preserve
Example: small square
Rounded rectangle
Carves the large square
Orbit, corner travel, size trade
Gap and size ratio
Separate observations from interpretations:
Observed: directly supported by source assets or code.
Inferred: a plausible design reading that still needs user approval.
Unknown: information that cannot be established from the available
evidence.
3. Analyze reference motion
When a video or frame sequence is supplied:
Probe duration, dimensions, frame rate, and decoded frame count.
Preserve first and last frames.
Inspect the complete arc with contact sheets.
Inspect every transition at a denser sampling rate.
Step through frames around anticipation, peak velocity, handoff, and settle.
Compare the recording with current source code independently.
Never treat current code as proof of what an older recording shows, or a video
as proof of the current implementation.
Extract:
resting poses and dwell lengths;
beat boundaries and overlaps;
transform origin and optical pivot;
acceleration, peak velocity, and deceleration;
swaps hidden by blur, occlusion, edge-on rotation, masks, or peak motion;
camera/crop changes used to make room for transformed geometry;
exact loop seam and whether the final frame equals the first;
frame drops, flashes, size pops, and other visible defects.
If shared reverse-engineer-motion tooling is available, use it for frame
extraction and evidence packaging. Otherwise create a new non-destructive
analysis directory; never overwrite the user's frames.
4. Generate geometry-led concepts
Propose the user-approved number of concepts. Each must have a different motion
grammar, not merely different colors, easing, or duration.
For each concept include:
a short, memorable name;
the specific logo property that inspired it;
a one-sentence purpose or emotional reading;
its loader/spinner form;
its complete cycle form;
the ordered beats;
color behavior;
the likely rendering strategy;
risks at small sizes, reduced motion, or loop boundaries.
Useful starting families are listed in references/choreography-guide.md. Use
only the families supported by the actual logo.
Reject concepts that:
would work unchanged for almost any logo;
obscure the mark for most of the cycle;
depend on random motion;
break the logo's protected proportions without a purposeful recovery;
require illegible sub-pixel detail at the target size;
cannot return to the exact resting frame;
differ from another proposal only through surface styling.
5. Selection gate: concepts
Present the concepts together so the user can compare them. Recommend one, with
reasons, but do not make the decision for the user.
Do not write production integration code until the user selects which concepts
to prototype.
6. Prototype selected directions
Build selected concepts in an isolated harness with an instant variant switcher.
Keep production components untouched during exploration.
The prototype must provide:
replay and pause;
normal speed and slow motion;
light and dark backgrounds;
the real target sizes;
reduced-motion preview;
visible variant name;
an exact static rest frame for comparison.
Three variants means three different choreographies. Do not create one
animation with three parameter presets.
7. Write the motion specification
Use templates/motion-spec.md. Define the whole cycle before polishing code.
Every timeline must include:
Rest — recognizable static identity.
Anticipation — optional wind-up that prepares the main move.
Primary action — the clearest geometry-led transformation.
Handoff — the identity or material swap, ideally hidden at peak motion
or by the logo's own geometry.
Follow-through — secondary parts resolve after the main mass.
Settle — return to exact resting geometry.
Dwell — sufficient stillness before repetition.
Sub-beats may overlap. Overlap often turns several visible tricks into one
continuous action.
Timing and easing
Beat
Easing
Note
Entrance, exit, settle
ease-out — cubic-bezier(0.23, 1, 0.32, 1)
Arrival reads as decisive
On-screen travel between poses
ease-in-out — cubic-bezier(0.77, 0, 0.175, 1)
Visible departure and arrival
Autonomous wind-up before a fast handoff
ease-in
Legitimate here only because no user input is waiting
Constant travel (continuous orbit, uniform path)
linear
Never for a beat with a destination
Material settle, elastic character
Spring, bounce: 0 default
0.1–0.3 only if a preceding beat carried momentum
User-triggered replay control
Immediate response, 100–160ms
This part is UI and obeys the UI budget
Do not apply sub-300ms UI timing to an ambient brand sequence. An ambient
loop is not feedback; it is governed by references/motion-principles.md §9.
Preserve forward velocity across a visual swap. If the incoming layer
represents the same moving object, it must not restart from zero.
Give the cycle stillness. A detailed loop needs contrast between motion and
rest. Dwell is a designed value, not leftover time.
Specify the numeric values only after observing the prototype at target size —
duration and easing are design variables here. The shape of the choice above is
not: an entrance still uses ease-out whatever its duration turns out to be.
8. Choose the rendering strategy
Choose the simplest strategy that preserves the concept.
Situation
Preferred strategy
Reason
Predetermined SVG choreography
CSS keyframes on nested groups
Stable under main-thread load
Several same-size raster/material variants
Layered images plus WAAPI or CSS
Clean handoffs without redrawing assets
Distinct choreography for each state hop
WAAPI with a small scheduler
Per-hop control and explicit cleanup
Interactive, gesture-led, or interruptible motion
Motion/springs
Carries velocity and retargets naturally
Compatible vector silhouettes
SVG path interpolation
True shape morph when topology permits
Incompatible paths
Masks, clip paths, transforms, or crossfade
Avoids broken path interpolation
Complex authored illustration with no DOM requirement
Rive/Lottie or a verified frame sequence
Use only when simpler web primitives cannot reproduce it
Keep transform functions in the same order across keyframes so browsers
interpolate them predictably. Use wrapper groups when camera framing, rotation,
and part transforms would otherwise compete for one transform.
9. Build the cycle controller
The visual timeline and lifecycle controller are separate concerns.
The controller must:
render an exact static rest state before hydration;
preload or decode every required raster layer before the first handoff;
prevent duplicate loops;
finish the current cycle rather than cutting it off when practical;
defer future cycles while the document is hidden;
optionally defer while the pointer is over a small identity mark;
react if reduced-motion preference changes during the session;
cancel animations, timers, and listeners on unmount;
restart from a known resting state after cancellation or error.
For reduced motion, keep the static logo. If the motion communicates state,
provide a non-spatial state indication rather than silently removing meaning.
Use aria-hidden="true" for a decorative duplicate whose surrounding link or
heading already names the brand. Otherwise expose one stable accessible name;
never let each animated layer announce itself.
10. Performance and fidelity
Prefer transform and opacity. Never transition: all, never
layout-driven animation.
Use clip-path and masks when they express the logo's own geometry;
clip-path is compositor-friendly and causes no layout shift.
Keep blur under 20px and brief. Verify Safari and low-power hardware
specifically — filter cost there is materially higher.
Apply will-change only to transform, opacity, or filter, only around
active motion, and remove it after. Never will-change: all.
Avoid JavaScript per-frame rendering for a predetermined timeline. CSS and
WAAPI run off the main thread and stay smooth while the page is loading; a
requestAnimationFrame loop does not. This matters most for a logo, which
typically animates during page load.
Keep the logo's optical centre stable unless displacement is intentional.
Verify edge-on 3D frames do not expose a flash or a mirrored intermediate.
Ensure filters, masks, and SVG IDs stay correct with multiple instances on
one page. Duplicate IDs are the most common cause of a second logo rendering
wrong.
11. Selection gate: final choreography
Show the prototypes at normal speed and slow motion. Let the user choose one
direction or explicitly combine named beats from multiple directions.
Only then integrate the final component.
12. Verification
Verify behavior, not just compilation:
compare first and final frames with a pixel diff;
inspect the whole cycle frame by frame;
review at 0.25× and 0.5× speed;
test every target size, theme, and device-pixel ratio;
test hidden-tab, hover/pause, unmount, and repeat behavior;
test initial load with a busy main thread;
test prefers-reduced-motion before mount and when changed at runtime;
inspect for dropped frames and expensive paint/filter work;
confirm the logo never flashes unloaded content;
confirm no visual size pop occurs at the cycle seam.
Unit tests should cover scheduling and lifecycle. Browser tests or recorded
frames must cover visual choreography; timer tests alone cannot prove motion
quality.
Common mistakes
Mistake
Fix
A concept that would work for any logo
Derive it from this logo's geometry and negative space
Three parameter presets presented as three concepts
Three different choreographies, or say there are fewer
Production integration before the selection gates
Both gates are required; the user owns the creative choice
Sub-300ms UI budget applied to an ambient loop
Ambient sequences follow motion-principles.md §9
ease-in used to delay a user-triggered replay
ease-in is only for autonomous wind-up
Incoming layer restarts from zero mid-swap
Preserve forward velocity across the handoff
Loop seam pops or flashes
Final frame must equal the first, exactly
Concept verified only at 128px
Render and inspect at every real target size
rAF loop driving a predetermined timeline
CSS or WAAPI, so it survives page load
Reduced motion removes a state signal silently
Keep the static logo; signal state non-spatially
Every animated layer announces itself
One stable accessible name, or aria-hidden on decorative duplicates
Duplicate SVG filter/mask IDs across instances
Namespace the IDs per instance
Cycle keeps running in a hidden tab
Defer future cycles on visibilitychange
Required deliverables
End with:
brief and confirmed decisions;
logo-anatomy table;
concept comparison, including rejected ideas;
selected motion specification;
isolated prototype location;
implementation notes and source files;
verification evidence and remaining uncertainties.
