agentemblem

Logo animation example

Animate an SVG logo
in React.

AgentEmblem samples the visible shape of an SVG or PNG and redraws it as particles. Each agent state moves those particles differently while keeping the original silhouette recognizable.

Custom artwork is optional. To start with an included circle, square, spark, or cursor, see the React guide. Coding assistants can use the Markdown implementation reference.

Choose a source format

Start with SVG when possible. It stays sharp, keeps clean transparency, and preserves fine strokes. Transparent 32-bit PNG files also work well at 256 pixels or larger.

Raw SVG markup

Pass a complete SVG string when the artwork comes from app data or a CMS.

Imported asset URL

Import a local SVG or PNG through your bundler and pass the resulting URL directly to source.

Data or object URL

Use a data URL or object URL for user-uploaded artwork and temporary previews.

Remote image

Remote URLs work when the image host permits cross-origin canvas access.

Import and animate a logo

import { AgentEmblem } from "agent-emblem";
import logoUrl from "./brand-mark.svg";

export function AnimatedLogo() {
  return (
    <AgentEmblem
      source={logoUrl}
      state="thinking"
      size={96}
      density="auto"
      shape="circle"
      dotScale={0.28}
      animateVisibility
      animateMotion
    />
  );
}

Preserve logo fidelity

Trim transparent padding and use artwork with a clear silhouette and negative space. Fine details need more room than a geometric mark. For 16–20 pixel UI, use a compact brand mark instead of a detailed full logo.

Use transparent artwork. AgentEmblem can separate a uniform background from the mark, but transparent SVG and PNG files produce more predictable results.

Animate purposefully

Choose the state that matches the agent’s current work. Thinking traces the contour, loading draws outward, composing writes through the silhouette, researching sweeps across the mark, and voice states pulse through its bounds.

Keep rendering efficient

AgentEmblem shares prepared masks between component instances, and the canvas backing store matches the rendered element’s physical pixel size. Reuse the same source string or URL so the browser can reuse that work.