Logo Drift

Installation

$ pnpm dlx shadcn@latest add @snapcn/logo-drift

Component code

The exact file shadcn add copies into your project.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { LogoDrift, SNAPCN_STACK } from "@/components/snap-cn/logo-drift";

const IntegrationsScene = () => (
  <LogoDrift
    headline="Built for the stack you already use."
    tiles={SNAPCN_STACK}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="LogoDrift"
    component={IntegrationsScene}
    durationInFrames={108}
    fps={30}
    width={1280}
    height={720}
  />
);

A tile is a glyph, a colour and a world-line. Give it your own:

<LogoDrift
  headline="Every tool you already pay for."
  tiles={[
    { glyph: "S", label: "Stripe", background: "#635bff", color: "#fff",
      x: -680, y: 210, vx: 20, vy: -84, size: 210, at: 0.4 },
    { glyph: "Li", label: "Linear", background: "#14161c", color: "#fff",
      x: 640, y: -260, vx: -8, vy: 80, size: 240, at: 1.1 },
  ]}
/>

The pull-back is one linear scale

This is the measurement the whole component hangs off. Every tile in the reference shrinks at the same relative rate: fit its on-screen size against time and you get a straight line, and dividing that slope by the tile's own size gives 0.176 per second for every tile on screen long enough to fit — seven of them, spread ±0.0016.

It is not a perspective dolly. Under perspective it is 1/size that runs straight, and it plainly does not: the size itself is the line. So the whole field lives on one scale(1 − rate·t) about the frame centre, which is why tiles keep arriving from every edge — the frame is not moving, it is covering more field.

The field drifts under it

Take the scale back out and each tile's path becomes a straight world-line to within a pixel: a constant velocity, around 80 stage px a second, in its own direction. That is the second half of the model and it is not optional — hold the field still and you are 32px out; let it drift and six of the seven fitted tiles land within 0.3–1.0px per frame across their whole path.

Every one of those is a prop.

The words do not fade in

Measure the ink and it is conserved from the first frame a word exists. What resolves is 1.216× of scale and 4.3px of blur, in 140ms — a word arrives close and soft and settles, it does not appear out of nothing. Words land every 150ms, so each one finishes exactly as the next begins, and because the line is centre-set the words already placed slide left to make room.

The exit is the same move run backwards on the whole line at once: it recedes to 0.80×, blurs to 6.5px and goes.

Everything is a prop, and it fits any field

• tiles is the whole field: glyph, label, colour, world position, drift, size and entry time per tile. SNAPCN_STACK is the default and is exported, so you can spread it and change two entries.
• pullback is the camera. Zero holds the field still; raise it and the wall recedes faster.
• tileSpeed and tileScale multiply every tile's drift and size at once, so you can re-time a field you like the shape of without touching ten objects.
• tileFade is the time constant of a tile's fade-up. It exists because not every tile can arrive from off-stage — the reference fades one up five pixels inside the right edge, and without the fade that reads as a pop.
• glow, glowOpacity and accentColor paint the wash. It is static on the reference and static here: a glow that breathes under a headline reads as a mistake rather than as light.

Colour and wording

The proportions and the timing are measured. The labels and the paint are not — the reference is a specific product showing off a specific set of other people's logos, and none of that belongs in a component that ships to strangers. The default field is the stack a snapcn component actually drops into, drawn as wordmark tiles rather than borrowed marks, and the paint is ours.

Props