Block Wordmark

Installation

$ pnpm dlx shadcn@latest add @snapcn/block-wordmark

Component code

The exact file shadcn add copies into your project.

Usage

A wordmark build in six beats:

1. Seed — a single rounded square scales up off the baseline (growDuration).
2. Shuffle — coloured cards fan out from behind it and wind back in, one full turn each about a shared pivot on the baseline. The fan is one S-curve sampled at cardStagger offsets, so it opens and closes exactly once (cards, spinTurns, spinDuration, liftRatio).
3. Collapse — the deck lands back on the seed square and dips once, which is the only frame in the piece where the ink is a single block.
4. Split — the square stretches horizontally and splits into one block per letter, outermost blocks leading and the inner ones lagging by splitStagger. Any letter whose ink rises above the x-height grows a tab on the correct side — the "b" of base sprouts a left stem, a "d" a right one, an "A" an apex.
5. Hold — the block row sits and scales up slowly for holdDuration frames. This is the beat that reads as a logo rather than as an animation.
6. Resolve — each block flashes a colour from colors, returns to ink, and is hard-cut to its letterform flashToSwap frames later. The first letter goes last, so the word finishes where it started.

Nothing crossfades and nothing morphs. At each swap frame the block is already within a few pixels of the settled letter, so the cut is invisible — and a spring or a crossfade "to improve it" is the one change that breaks the effect.

// src/Root.tsx
import { Composition } from "remotion";
import { BlockWordmark } from "@/components/snap-cn/block-wordmark";

const Sting = () => (
  <BlockWordmark text="snapcn" color="#0000FF" fontSize={160} />
);

export const RemotionRoot = () => (
  <Composition
    id="BlockWordmark"
    component={Sting}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Any word, not just this one

Nothing about the geometry is hardcoded to a four-letter lowercase word. Every glyph's advance width, x-height and ink top are measured at runtime behind delayRender(), so the blocks are sized to the letters they become and the ascender tabs are found by measurement rather than a letter list. Emoji survive (the text is split by code point) and spaces get a gap, not a block.

Two knobs decide how literal the morph is:

• blockSizing="square" (default) makes every block a square the height of the x-height, so the row reads as an even rhythm and each block visibly changes into its letter.
• blockSizing="glyph" sizes each block to its letter's advance width, which makes the resolve nearly in-place.

Long words outrun the 150-frame default: the last letter resolves at roughly 94 + flashStagger × letters. Drop flashStagger to 2 or raise durationInFrames.

Colour

The deck and the flash colours are a prop with our defaults — the first card follows your primary token, the rest are a decorative set.

The ink defaults to your foreground, so an installed copy paints in whatever palette it lands in. The preview above passes color="#0000FF" because that is snapcn's own mark; yours is one prop away.

A full brand look — ink, deck, and a display face's heavier ascender — is one line. base rather than snapcn here because the ascender props only show on a word that has one:

<BlockWordmark
  text="base"
  color="#0000FF"
  colors="#ABF25B,#FA361A,#FCCA28,#337DFE,#F99BCA"
  ascenderRatio={0.4}
  ascenderStemRatio={0.415}
/>

ascenderRatio and ascenderStemRatio are the two places a display face differs most from Inter: leave them out and they are measured per glyph, set them and you get the chunky flag a geometric sans draws.

Props