Impact Shake

$ pnpm dlx shadcn@latest add @remocn/impact-shake

Usage

ImpactShake drops its subject from above the frame on pure acceleration, stretching it taller as it falls. On the impact frame the subject squashes wide and springs back, the whole camera jolts and settles on a damped shake, red and blue copies split apart for two frames, the frame flashes faintly, and dust puffs and small chips kick out sideways along the floor line. With no children it drops the word in text.

import { ImpactShake } from "@/components/remocn/impact-shake";
 
export const Drop = () => <ImpactShake text="NOW LIVE" intensity={1.2} />;

intensity scales the shake, the split, the flash and the dust spread, from 0 to 2; the squash stops growing above 1. impact is the frame, at 30 fps, when the subject hits, so a larger value makes a longer fall. seed changes the shake phase and the dust pattern.

Your own subject

Children replace the word. They are centered in the frame, and the dust kicks out from a floor line at 62% of the frame height, which lines up with the bottom of the default word. Size the subject so its base sits near that line.

import { Img, staticFile } from "remotion";
import { ImpactShake } from "@/components/remocn/impact-shake";
 
export const LogoDrop = () => (
  <ImpactShake backgroundColor="#0B0B0B">
    <Img src={staticFile("logo.svg")} style={{ height: 180 }} />
  </ImpactShake>
);

During the two split frames the subject renders three times, the two extra copies tinted through an SVG color filter. colors.splitA and colors.splitB must be #RRGGBB hex. The flash uses the foreground color.

Timing

At 30 fps, speed={1} and the default impact of 7:

speed scales the timeline, so speed={2} lands at about frame 4.