Guides · · Maxwell Prehoda
12 Logo Animation Examples, From Pixar's Lamp to Logos Made With AI, and What Each Teaches
The logo animations people remember do one thing well: they make the mark behave like the brand. Pixar's lamp has a personality, Google's dots listen and think, Netflix's opening is half sound. A good logo animation is short, lands on the exact static logo, and works with the sound off as well as on.
Below are twelve examples, from film studio classics to logo reveals people made recently with Claude, each labelled with the situation it suits, the format it ships in and the trap to avoid. The famous ones are linked to a reference page we checked; the recent ones are credited to their creators and linked from our Motion Prompts directory. Two are ours.
1. Pixar's hopping lamp (Luxo Jr.): Best for character-driven logos that act out a personality
Platform: Studio production logo, from a 1986 short
Pixar's logo comes from a film. Luxo Jr., written and directed by John Lasseter, debuted at SIGGRAPH in 1986, and the little lamp became the studio's mascot. When the short was re-released with Toy Story 2 in 1999, it carried a line that explains the whole idea: "This is why we have a hopping lamp in our logo."
The lesson is that a logo animation can be a tiny performance. The lamp has weight, curiosity and timing, which says more about what Pixar makes than any static mark could. It also shows the value of one recurring character over a series of one-off effects.
Our Brand Mascot Wave studio prompt below is our own take on the idea: an original terracotta-pot mascot that hops into a studio cove and waves before the brand settles.
Watch out for: Character animation is expensive to do well and obvious when done badly. If you cannot afford real acting, keep the logo geometric and let timing carry the personality.
2. DreamWorks: the boy fishing on the moon: Best for story brands that want a painterly, cinematic open
Platform: Studio production logo (painting plus ILM animation)
The DreamWorks logo began as Steven Spielberg's idea, was painted by illustrator Robert Hunt, who used his son as the model, and was turned into a motion piece by Industrial Light & Magic, animated by Wes Takahashi, with music by John Williams.
It is a scene, not a mark: a camera moves through clouds to a boy on a crescent moon who casts a line. The logo works because the image already tells you what the studio sells, wonder and story, before the wordmark appears.
Copy the structure, not the budget: an establishing move, a single memorable image, then the name.
Watch out for: Long cinematic opens are made for theatres. Online, people skip anything over a few seconds, so cut a short version that reaches the logo fast.
3. MGM's Leo the Lion: Best for heritage brands refreshing a famous motion mark
Platform: Studio production logo, CGI version since 2021
The lion goes back to 1916, when Howard Dietz chose it as the mascot of Goldwyn Pictures, MGM's predecessor, and the MGM version with a roaring lion began in 1924. For decades it was live footage of real lions.
In 2021 MGM unveiled a CGI-animated Leo based on his 1957 footage, which Wikipedia describes as the first major redesign for the mascot in over six decades, along with a new monogram and fanfare.
The lesson for any brand with a recognised animation: change the craft, keep the gesture. People recognise the roar and the framing, so the redesign kept both and modernised everything around them.
Watch out for: Recreating something people love in a new technique invites close comparison. Test the new version against the old one with people who know it before you launch.
4. Google's dots: a logo that listens: Best for product logos that also act as UI states
Platform: Google identity system (2015)
When Google redesigned its identity in 2015, it defined three forms: the full logotype, a compact G, and four animated dots. Google Design describes the dots as a dynamic and perpetually moving state of the logo, used for interactive, assistive and transitional moments.
The dots have states, listening, thinking, replying, incomprehension and confirmation, and their movement follows consistent paths and timing along geometric arcs with a standard set of quick easing curves. The logo becomes the interface: you can tell what the assistant is doing by how the brand moves.
This is the most useful example on this list for product teams. Ask what your logo could communicate in the app, not just at the start of a video.
Watch out for: A logo used as a status indicator has to follow the same accessibility rules as any loader: a reduced-motion version, and text for screen readers, because motion alone is not an announcement.
5. Netflix and Intel: the sound is half the logo: Best for logos that play before content or end every ad
Platform: Audio logo paired with a short visual
Some logo animations are recognised with your eyes closed. Netflix's "ta-dum" audio logo has been in use since 2014, according to Wikipedia's caption on its recording. Intel's "bong" was composed by Walter Werzowa in 1994, and his Wikipedia page notes the claim that it is broadcast somewhere in the world once every five minutes.
Both pair a very short visual with a very short sound, and both are used constantly, which is how they became memorable. The motion is tuned to the sound, not the other way around.
If your logo will appear at the start of videos or the end of ads, design the sound and the motion together, and make the hit of the animation land on the hit of the audio.
Watch out for: Most social video autoplays muted. A logo animation that only works with sound needs a visual that stands on its own.
6. LottieFiles: logo animations that ship in apps: Best for animated logos inside websites and mobile apps
Platform: Lottie JSON and dotLottie, free and paid plans
A logo animation that has to play inside a product, on a splash screen, a loading state or a website header, usually ships as Lottie, a vector animation format that renders natively on the web, iOS and Android. LottieFiles hosts a large library of free and premium animations, including logo pieces such as an Apple TV mnemonic logo, plus Lottie Creator for making your own.
Its dotLottie format is a compressed version of Lottie, which LottieFiles says is 90 percent smaller than a GIF. For a logo that has to be crisp at any size, vector beats video.
If you would rather generate the Lottie with a coding agent, Diffusion Studio's open-source Text to Lottie skill builds Lottie animations from text in Claude Code or Codex.
Watch out for: Lottie supports most but not all After Effects features. Effects like some blurs, glows and expressions may not export, so design within what the format can play.
7. Pixel2Motion by NolanLai: Best for animating a logo when you only have a PNG
Platform: Open-source skill for Codex and Claude, outputs SVG and CSS
Most logo animation starts with a clean vector, and many teams only have a raster file. Pixel2Motion is a skill that fixes that first: it fits a minimal, smooth SVG to a PNG, JPG, WebP or screenshot and checks it against the original, then writes CSS choreography that targets the SVG's named parts, such as the mark, the dot and the wordmark.
The output is a static `logo.svg`, a `motion.css`, an HTML showcase, a motion brief with timing notes and frame captures used to check the motion. Our listing notes it choreographs with Disney's 12 principles and always lands on the verified static logo.
Landing exactly on the real logo is the rule every logo animation should follow, and this pipeline builds the check in.
Watch out for: Auto-vectorised logos are close, not identical. If the brand has an official SVG, start from that and use the tool only for the motion.
8. TypingMind logo reveal by Tony Dinh: Best for slow, satisfying reveals for product launches
Platform: Made with Claude Opus 5.5 from a one-line prompt
Tony Dinh asked Claude for an impressive motion design video of a slow-reveal transition that assembles and eventually reveals the TypingMind logo. The result builds step by step, pieces assembling into the mark.
The prompt is the useful part: it is one sentence, it names the structure (slow reveal, assembly) and the end state (the real logo), and nothing else. Our listing notes you can attach your own logo file to the same prompt and swap in your brand name.
Slow assembly suits launch videos and keynotes, where the audience is already watching and the reveal is the moment.
Watch out for: Slow reveals are wrong for anything people see repeatedly, like an app open or a video intro on every episode. Make a short cut for those.
9. Kinetic identity bumper by TechHalla: Best for creator channels and brands with a loud, graphic style
Platform: HTML/CSS, made with Claude Opus 5.5
A 20-second loopable identity bumper styled like a street poster that moves: three typefaces, a strict black, magenta and acid-green palette, print misregistration on impacts, all on a 120 BPM grid.
It shows the other way to animate a logo: not a reveal at all, but an identity system in motion. The palette, the type and the beat grid carry the brand, so the name can appear several times in different forms.
The prompt behind it is long and specific about duration, palette and rules, which is why the result feels designed rather than generated.
Watch out for: Strong misregistration and flashing impacts can be too intense for some viewers. Keep flashes well under three per second and test the loop on a phone at full brightness.
10. Inside-the-Period Launch Loop by zero: Best for wordmarks with a dot or shape that can become a window
Platform: Canvas, made with Claude Opus 5.5
A 24-second square launch loop that happens inside the period of a wordmark: daylight outside, a night photo under glass panels inside, with gooey splits, floods and morphs instead of cuts.
It takes one detail of the logo, the full stop after a lowercase name, and makes it the camera. That is a reliable creative move: find the most distinctive shape in the mark and let the animation live inside it.
The prompt asks for the product name, the job it does, the results it reports and a pair of aligned day and night photos, so it adapts to other products with the same structure.
Watch out for: Morphs through a tiny shape only read at large sizes. Check the loop at the size it will actually be seen, such as a feed thumbnail.
11. Our Logo Sting: shape assembly: Best for a punchy two to four second sting for videos
Platform: Motion Prompts studio prompt, CC0, with video Ours
This is the classic sting structure as a reusable prompt: geometric pieces fly in on arcs, accelerate into one decisive hit with a shockwave ring and a frame jolt, then lock into the mark. Anticipation, impact, settle.
It is a CC0 style prompt from our directory with the rendered video below, so you can see the result first, then paste the prompt into Claude or our Studio with your own logo.
For a step-by-step walkthrough of making one with AI, read our post on logo reveal animation with AI.
Watch out for: A frame jolt and shockwave are strong effects. They suit a video open; on a website header they are too much, so use a gentler settle there.
12. Our Logo to UI Morph: Best for SaaS launches where the logo becomes the product
Platform: Motion Prompts studio prompt, CC0, with video Ours
Google's dots show a logo that becomes UI; this prompt does it as a launch film. A pinwheel logo of four rounded tiles spins on a cobalt field, then its tiles stretch into an app's sidebar and panels, so the brand turns into the product in one continuous move.
It is the right structure when the logo is abstract and you need people to connect it to the thing they will use. The video below shows the result.
To build it with your own mark and product screens, open it in our Animation Studio: Claude draws the art, choreographs the motion and checks every frame, and you can scrub the timeline, tune eases and export to MP4, GIF, HTML or React.
Watch out for: Morphing a logo into UI only works if the shapes genuinely share geometry. Forcing a round logo into rectangular panels looks like a dissolve with extra steps.
How to choose a logo animation style
Three questions narrow twelve options to one.
Match it to where it plays
Before content or at the end of ads: a short sting with sound, like Netflix and Intel, two to four seconds. Inside an app or site: a light Lottie or CSS animation that lands on the static logo in under a second. A launch or keynote: a slow reveal like TypingMind's. A channel or social feed: a loopable identity piece like TechHalla's bumper.
Match it to the mark
A character or object (Pixar's lamp) can act. Geometric marks suit assembly and stings. Wordmarks with a distinctive detail, like a period, can use that detail as a window. Abstract tiles or dots can become UI, as Google's dots and our Logo to UI Morph do. Do not force a style the shapes cannot support.
Match it to your tools
After Effects users: export Lottie for apps, video for everything else. Developers: SVG and CSS (Pixel2Motion can start from a PNG), or a coding agent with Text to Lottie. No motion background: a studio prompt with a video preview, pasted into Claude or our Studio. Either way, the last frame must be the exact official logo.
Make your logo move this afternoon
Start from your official SVG. Decide where the animation plays and how long it can be, then pick one structure from this page: act, assemble, reveal, loop or morph. Make the short version first, under two seconds, and only add a long cut if you have a place to use it.
For inspiration, browse the logo pieces in our Motion Prompts directory and the inspiration board. To build it, describe the scene in our Studio and export the format you need.
Animate my logo (SVG attached) as a 2.5-second sting at 1920x1080, 60 fps. Structure: the mark's shapes fly in on arcs (0 to 1.2 s), hit together on one beat with a small overshoot (1.2 to 1.5 s), the wordmark fades up beside it (1.5 to 2 s), hold the exact static logo for the last 0.5 s. Ease-out on arrivals, no blur, brand colours only. Also give me a 0.8-second version for the website header that only scales and fades.
Common questions
How long should a logo animation be?
For video stings and intros, about two to four seconds. Inside apps and websites, under a second, since people see it often. Long cinematic versions like the DreamWorks open belong before films, not on every visit.
What file format should a logo animation be?
For apps and websites, Lottie or dotLottie, or SVG with CSS, so it stays sharp at any size and stays small. For social posts, ads and video edits, MP4. GIF is a last resort, as it is large and limited in colour.
What makes a good logo animation?
It expresses the brand's personality, as Pixar's lamp does, it is short, it works with sound off, and it always lands on the exact static logo. The best ones are also reused consistently, which is how Netflix's and Intel's became recognisable.
Can I make a logo animation with AI?
Yes. People have made logo reveals with Claude from one-line prompts, like Tony Dinh's TypingMind reveal, and skills like Pixel2Motion and Text to Lottie produce SVG, CSS or Lottie output. Always give the model your official logo file so the end frame is exact.