Logo Flicker

Installation

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

Component code

The exact file shadcn add copies into your project.

Usage

A Marvel-Studios-style flicker reveal:

1. Flicker — the images flip full-screen at a constant fast rate (one image per flipInterval frames), right to the end — no slow-down.
2. Cross-fade — the flicker fades out while the logo and brand name fade in, on the exact same window — one move, not one after the other.

Pass your logoSrc (simple/monochrome) and brandName, and the images the flicker flips through. Everything is frame-driven, so scrubbing and rendering are deterministic.

// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { LogoFlicker } from "@/components/snap-cn/logo-flicker";

const Sting = () => (
  <LogoFlicker
    logoSrc={staticFile("logo/snapcn-white.png")}
    brandName="snapcn"
    images={[
      staticFile("showcase-assets/438b9e6b50654a44d404fbf358c26e9f.webp"),
      staticFile("showcase-assets/821d815affa6496c39cbdeeec7a84603.jpg"),
      // …a handful reads best
    ]}
  />
);

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

The flicker swaps the full-screen image every couple of frames, which a live <Player> shows as harsh flashing before the browser has the images cached — so the docs preview plays the rendered mp4. Re-render after any change: pnpm run render:previews --only logo-flicker.

Note: this is a fast full-screen image strobe. Raise flipInterval (slower flips) if you need it gentler for photosensitivity.

Props