Anamorphic Flare
A point of light stretches into a cinematic horizontal streak that sweeps the frame and reveals the logo behind it
$ pnpm dlx shadcn@latest add @remocn/anamorphic-flareUsage
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}:
| Frames | Motion |
|---|---|
| 0–6 | The point of light ignites at 7% of the width |
| 0–12 | The streak stretches from a point to 130% of the frame width |
| 4–26 | The head sweeps from 7% to 112% of the width, revealing the logo behind it |
| 20–28 | The streak, bloom and ghosts fade out |
| 24–40 | A faint tinted line fades up across the frame and holds |
The docs preview runs 70 frames. speed scales the timeline.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Lockup revealed behind the streak, centered in the frame. Without it a placeholder lockup (a rounded mark and the word remocn) is shown |
tint | string | "#E5322D" | Color of the streak glow, bloom, ghosts and the residual line |
coreColor | string | "#FFFFFF" | Hot core line and the center of the bloom |
backgroundColor | string | "#111111" | Full-frame background |
ghosts | number | 4 | Number of ghost orbs mirrored across the frame center, rounded |
y | number | 0.5 | Vertical position of the streak, 0 to 1 |
seed | number | 2 | Seeds the ghost positions, sizes and opacities |
speed | number | 1 | Playback multiplier |