logo-animation
This skill should be used when the user asks to "animate our logo", "make a logo intro/stinger", "build a brand reveal", "create an app splash animation", "loop a loader logo", "draw on our SVG mark", "morph an icon into the wordmark", or "sync the logo to a sound-logo". Covers web (SVG/Lottie), video, and app-splash delivery.
- Installs
- 2.9K
- Last 24h
- +95
- Trending rank
- #2059
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/iart-ai/motion-design-skills --skill logo-animation- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads logo-animation automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Logo Animation
Bring a brand mark to life with one clear idea, on-brand geometry, and a crisp settle. Animate for web (SVG/Lottie), video intros/outros, or app splash screens, and always ship a static end-frame fallback.
When to use
- Build an intro stinger, sign-off, app splash, or loader idle loop.
- Reveal a brand mark on a landing hero or sizzle reel.
- Draw on an SVG mark, wipe/build it in piece by piece, or morph an icon into a wordmark.
- Sync the final settle of the mark to a sound-logo beat.
Core principle
Pick ONE technique per logo — draw OR build OR morph — not all at once. Reveals run 0.8–2.5s. Never distort brand geometry; scale and fade are safe, skew and squash usually are not. Respect clearspace (keep the mark's minimum margin clear of motion debris). Always provide a prefers-reduced-motion path that shows the final mark with no motion.
Technique map
| Technique | Best for | Mechanism |
|---|---|---|
| Stroke draw-on | Line marks, monograms, signatures | stroke-dashoffset 1→0 |
| Mask wipe / reveal | Filled shapes, gradients | animate a <clipPath> / <mask> rect |
| Build-on (stagger) | Multi-piece marks, grids | per-group opacity+transform, staggered |
| Morph | Icon ↔ wordmark, shape→logo | GSAP MorphSVG or matched path interpolation |
| Idle loop | Loaders, ambient splash | seamless cyclic transform (rotate/pulse) |
| Wordmark | Logotypes | per-letter mask/translate stagger |
Quick start: SVG stroke draw-on
The fastest on-brand web reveal. Each path draws itself, then fills settle in.
<svg viewBox="0 0 200 80" id="logo">
<path class="ink" d="M10 60 L40 20 L70 60" fill="none"
stroke="#111" stroke-width="6" stroke-linecap="round"
pathLength="1" stroke-dasharray="1" stroke-dashoffset="1"/>
</svg>
<style>
@keyframes draw { to { stroke-dashoffset: 0; } }
#logo .ink { animation: draw 1.1s cubic-bezier(.65,0,.35,1) forwards; }
@media (prefers-reduced-motion: reduce) {
#logo .ink { animation: none; stroke-dashoffset: 0; }
}
</style>
pathLength="1" normalizes every path to length 1, so one stroke-dasharray/offset value works regardless of geometry. Stagger multiple strokes with animation-delay.
Quick start: build-on with stagger (GSAP)
import gsap from "gsap";
// each <g class="piece"> is one mark component
gsap.from(".piece", {
opacity: 0, scale: 0.85, transformOrigin: "50% 50%",
duration: 0.5, ease: "back.out(1.6)", stagger: 0.08,
onComplete: () => gsap.to("#mark", { scale: 1, duration: 0.2, ease: "power2.out" })
});
Group order matters: reveal the base/container first, then accents, then the wordmark last so the eye lands on the name.
Sound-logo sync
When audio exists, the brand's final settle frame must land exactly on the sonic accent (the "ding"/whoosh peak). Decide the audio first, find the peak timecode, then time the reveal so the mark snaps to full opacity/scale on that frame. A 1.0s reveal landing a 1.2s mnemonic feels premium; a settle that floats free of the sound feels cheap. Add a tiny overshoot-and-settle (scale 1.04→1.00 over ~0.15s) on the beat for impact.
Delivery targets
- Web, interactive / hero: inline SVG + CSS or GSAP. Smallest payload, crisp at any size, scriptable.
- Product / app, designer-made: Lottie (
.jsonexported from After Effects via Bodymovin). Uselottie-webor@lottiefiles/dotlottie-web; setloop,autoplay, and a poster fallback frame. - Video intro/outro: Remotion (React) or After Effects render to ProRes/H.264. Pre-render at 2x for crispness.
// Lottie delivery with reduced-motion guard
import { DotLottie } from "@lottiefiles/dotlottie-web";
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
const dl = new DotLottie({
canvas: document.querySelector("#logo-canvas"),
src: "/logo.lottie", autoplay: !reduce, loop: false,
});
if (reduce) dl.addEventListener("load", () => dl.setFrame(dl.totalFrames - 1));
Output checklist
- Animated mark in the target format (SVG/Lottie/video).
- Static final-frame fallback (SVG or PNG) for reduced-motion and posters.
- One clear technique, reveal ≤2.5s, brand geometry intact, clearspace respected.
- Sound-logo settle aligned to the audio peak (if audio present).
Deliver & verify (standalone HTML)
Packaged helper (
scripts/):scripts/seek-shot.sh anim.html 0 1.5 3freezes the?t=Nharness and screenshots each moment;scripts/contact-sheet.sh sheet.png frame-*.pngtiles them for one-glance review. Seescripts/README.md.
Logo animation spans web/SVG/Lottie, video, and app splash. For web/SVG/Lottie delivery use this standalone-HTML loop; for a video logo sting, render via the remotion-video verify loop instead.
For web/SVG/Lottie, ship one .html file that opens directly in a browser — inline SVG markup plus the reveal (CSS or one CDN GSAP <script>), self-contained. One file is the right tier.
Output contract:
- One
.htmlfile: the inline SVG (or Lottie canvas) + the reveal in inline<style>/<script>. - One animation driver — the CSS
@keyframesdraw/build, or a single GSAP timeline; not both. - Include the freeze harness below, matched to the technique, so any moment can be screenshotted deterministically.
Freeze harness — pin a frame for screenshots. Match the mechanism to the technique:
<script>
const t = new URLSearchParams(location.search).get("t");
if (t !== null) {
const T = parseFloat(t);
// CSS stroke-draw / build-on:
document.querySelectorAll("#logo *").forEach(el => {
el.style.animationDelay = (-T) + "s";
el.style.animationPlayState = "paused";
});
// GSAP timeline instead? → tl.pause(); tl.seek(T);
// SMIL <animate>? → const s = document.querySelector("svg"); s.pauseAnimations(); s.setCurrentTime(T);
// Lottie? → dl.setFrame(Math.round(T * fps));
}
window.__ready = true; // ready signal for headless wait
</script>
Verify loop — render → freeze → screenshot → check:
- Open the file frozen at start / mid / end of the reveal (≤2.5s):
…/logo.html?t=0,?t=<dur/2>,?t=<dur>. - Screenshot each frozen frame.
- Check fidelity (matches the mark, one clear technique) and artifacts — brand geometry undistorted, clearspace clear of motion debris, no half-drawn strokes left at the end frame, the static final frame is the true logo.
- Iterate: if any check fails (e.g. a half-drawn stroke at
?t=<dur>or distorted geometry mid-reveal), fix the stroke-dashoffset/duration/easing, re-render the same?t=N, and re-screenshot to confirm the fix — loop until every frame is clean.
npx playwright screenshot --wait-for-timeout=500 "file://$PWD/logo.html?t=1.1" frame-mid.png
Before you finish:
- Opens standalone in a browser — no console errors, no missing CDN.
- One technique/driver;
?t=Nfreezes the exact frame correctly. - Screenshotted at start / mid / end — geometry intact, clearspace respected, final frame is the clean mark.
prefers-reduced-motionhonored (final static mark shown, no motion) + static end-frame fallback shipped.- Reveal ≤2.5s; if audio present, the settle lands on the sound-logo peak.
Reference files
references/logo-patterns.md— runnable code for every technique: stroke draw-on, mask wipe build-on, GSAP MorphSVG morph, seamless idle loop, Lottie delivery, plus timing tables (0.8–2.5s), brand clearspace rules, and reduced-motion fallbacks.
FAQ
What does the logo-animation skill do?
This skill should be used when the user asks to "animate our logo", "make a logo intro/stinger", "build a brand reveal", "create an app splash animation", "loop a loader logo", "draw on our SVG mark", "morph an icon into the wordmark", or "sync the logo to a sound-logo". Covers web (SVG/Lottie), video, and app-splash delivery.
How do I install logo-animation?
Run npx skills add https://github.com/iart-ai/motion-design-skills --skill logo-animation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/logo-animation/ (personal) or .claude/skills/logo-animation/ (project).
Which AI agents can use logo-animation?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is logo-animation safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains logo-animation?
It is published by iart-ai in iart-ai/motion-design-skills. It has 2,940 recorded installs.
More from iart-ai/motion-design-skills
motion-art-direction
iart-ai/motion-design-skills
This skill should be used when the user asks to "direct a motion graphics video", "do creative/art direction for a video", "define a motion language", "set the tone and pacing", "make the animation feel consistent", "decide what to animate (and what not to)", "turn a brief/brand into motion choices", or needs the senior creative judgment that sits above specific techniques (gsap/lottie/shader). Covers motion language, tone & energy, pacing/rhythm, motion hierarchy, restraint, and cross-shot consistency.
animation-principles
iart-ai/motion-design-skills
This skill should be used when the user asks to "make this animation feel natural", "fix motion that feels stiff/floaty/cheap", "my animation looks robotic", "choose an easing curve", "how do I use the Graph Editor", "add overshoot or bounce", "Easy Ease isn't enough", "make snappy motion", "pick a duration for this transition", "stagger a list animation", "sync animation to a beat", or "review motion for good timing". It is the tech-agnostic foundation for deciding how something should move.
shot-composition
iart-ai/motion-design-skills
This skill should be used when the user asks to "compose a frame", "set up a grid", "plan shot composition", "place the focal point", "decide where elements enter and exit", "add a parallax/camera move", "adapt a layout for 16:9 / 9:16 / 1:1", or "keep content inside safe areas". Covers grids, safe areas, focal hierarchy, and 2D/3D camera framing.
beat-sync-editing
iart-ai/motion-design-skills
This skill should be used when the user asks to "cut to the beat", "fix the pacing", "edit this sequence", "sync cuts to music/BPM", "add a match cut / J-cut / L-cut", "build a speed ramp", or "plan a shot sequence / edit timeline". Covers editing rhythm, transitions, retiming, and translating an edit plan to an NLE or a code timeline (Remotion/AE frames).
color-motion
iart-ai/motion-design-skills
This skill should be used when the user asks to "build a color palette for a motion piece", "make a gradient background", "animate a color transition", "interpolate colors smoothly", "fix muddy/gray gradients", "convert colors to OKLCH", "color-grade a video for mood", "fix washed-out After Effects renders", "gamma shift", "Rec.709 vs sRGB", "colors shifted after rendering", or "match preview to final video". Covers palette construction, gradients, perceptual interpolation (OKLCH/Lab), grading order, and video/render color management.
after-effects
iart-ai/motion-design-skills
This skill should be used when the user asks anything about Adobe After Effects — to "write an After Effects expression", "make a wiggle / loopOut / inertial bounce", "rig a control with a slider / null", "build a MOGRT / Essential Graphics template", "export AE to Lottie or Media Encoder"; OR to "export from After Effects", "export with transparency / an alpha channel", "fix a black background on export", "choose ProRes vs H.264", "which codec / what bitrate for 1080p / 4K", "stop H.264 disappearing from the Render Queue"; OR when "After Effects is slow / laggy / crashing / froze", "RAM preview won't play in real time", "AE is using all my memory / render takes forever", "how do I speed up After Effects"; OR to "organize my After Effects project", "relink missing footage", "fix broken links after moving files", "set a folder structure / naming conventions", "batch rename layers", or "write an ExtendScript / .jsx script". Covers expressions & rigging, export recipes, performance triage
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.