Anamorphic Flare

$ pnpm dlx shadcn@latest add @remocn/anamorphic-flare

Usage

AnamorphicFlare starts with a point of light near the left edge. It ignites, stretches into a long horizontal streak with a hot core line and a tinted glow, and sweeps across the frame. Your logo is revealed behind the head of the streak through a soft-edged mask, so it appears left to right in the light's wake. Ghost orbs sit mirrored across the frame center and slide the opposite way, like real lens reflections. After the streak exits, a faint tinted line is left across the frame.

import { Img, staticFile } from "remotion";
import { AnamorphicFlare } from "@/components/remocn/anamorphic-flare";
 
export const LogoSting = () => (
  <AnamorphicFlare tint="#E5322D" coreColor="#FFFFFF">
    <Img src={staticFile("logo.svg")} style={{ height: 120 }} />
  </AnamorphicFlare>
);

children are centered in the frame at their own size. y moves the streak vertically as a fraction of the height; the logo stays centered, so keep y within the logo's height for the reveal to read as the light uncovering it. The streak layer uses mix-blend-mode: screen, so it brightens the logo where they overlap and works best on dark backgrounds. Ghost positions, sizes and opacities come from Remotion's seeded random(), so the same seed always renders the same frames.

Timing

At 30 fps and speed={1}:

The docs preview runs 70 frames. speed scales the timeline.