Logo animations and stings in Remotion

Short answer: a logo animation in Remotion is a short composition — two to five seconds — where the mark arrives, the wordmark reveals beside it, a sound lands on the hit, and the frame holds on the finished lockup. Scale the mark, clip-reveal the words, and put an <Audio> in a <Sequence> that starts on the landing frame.

What makes a sting land

• It is short. A sting is punctuation, not a scene. The stings further down run 52 to 150 frames at 30fps — under two seconds to five.
• It has one hit. Every movement leads to a single frame where the logo is finished. That is where the sound goes.
• It ends on a hold. Half a second or more of the lockup sitting still. Cut away mid-motion and nobody reads the name.
• It is simple at the end. Whatever the build — cards, flicker, blocks — the last frame is just the mark and the name.

A mark-and-wordmark reveal from scratch

import {
  AbsoluteFill,
  Audio,
  Img,
  interpolate,
  Sequence,
  spring,
  staticFile,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";

const LAND = 18; // the frame the mark settles — the hit

export const LogoSting = ({ name }: { name: string }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const;

  // The mark: a critically damped spring, so it settles without bouncing.
  const mark = spring({ frame, fps, config: { damping: 200 }, durationInFrames: LAND });

  // The wordmark: clipped open from the left and nudged in — no scale on type.
  const reveal = interpolate(frame, [LAND, LAND + 14], [0, 1], clamp);

  return (
    <AbsoluteFill
      style={{ alignItems: "center", justifyContent: "center", background: "#09090b" }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
        <Img
          src={staticFile("logo.svg")}
          style={{ width: 96, height: 96, opacity: mark, transform: `scale(${mark})` }}
        />
        <span
          style={{
            color: "white",
            fontSize: 72,
            fontWeight: 600,
            clipPath: `inset(0 ${(1 - reveal) * 100}% 0 0)`,
            transform: `translateX(${(1 - reveal) * -0.3}em)`,
          }}
        >
          {name}
        </span>
      </div>
      <Sequence from={LAND}>
        <Audio src={staticFile("hit.wav")} />
      </Sequence>
    </AbsoluteFill>
  );
};

Register it at 30fps for about 60 frames: 18 to land, 14 to reveal the name, and the rest as the hold.

Three choices in there are deliberate:

• damping: 200 on the mark. The default spring overshoots, and a logo that wobbles past its size reads as cheap rather than playful.
• The wordmark is clipped, not scaled. Scaled text judders: glyphs snap to whole pixels vertically and the hinter reshapes letters at every size. A clip and a translate keep the type pixel-stable.
• The sound is placed by frame. <Sequence from={LAND}> starts the audio on exactly the frame the mark lands, in the Player and in the render.

Six ready-made logo stings

If you would rather not choreograph it yourself, snapcn has six. Each takes your logo and name as props and installs as source:

npx shadcn@latest add @snapcn/logo-collapse

import { LogoCollapse } from "@/components/snap-cn/logo-collapse";

<LogoCollapse mark="/logo/acme.png" wordmark="Acme" />;

Logo Drift is not a sting so much as an integrations beat — "works with the tools you already use" — and sits mid-video rather than at the end. Logo Flicker is a fast full-screen strobe; raise its flipInterval if it needs to be gentler for photosensitive viewers.

Browse the logos category, or put a sting at the end of a product demo video.

Next: how to animate text in Remotion.

FAQ