Spring Pop In · remocn

Installation

$ pnpm dlx shadcn@latest add @remocn/spring-pop-in

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { SpringPopIn } from "@/components/remocn/spring-pop-in";

const SpringPopInScene = () => (
  <SpringPopIn damping={12}>
    <div style={{ padding: 24, background: "#111", color: "white" }}>
      Hello
    </div>
  </SpringPopIn>
);

export const RemotionRoot = () => (
  <Composition
    id="SpringPopIn"
    component={SpringPopInScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`children`required	`ReactNode`	—	Element(s) to animate
`damping`	`number`	`12`	Spring damping. Lower = more bounce.
`mass`	`number`	`1`	Spring mass
`stiffness`	`number`	`100`	Spring stiffness
`delayInFrames`	`number`	`0`	Delay before the spring starts, in frames
`className`	`string`	—	Optional className passed to the outer container