Spring Pop In · remocn

A UI primitive that wraps its children in a spring-driven transform: scale(). Based directly on Remotion's spring() so timing and overshoot stay framerate-independent.

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.

Notes

Transform origin

The scale is applied with transform-origin: center. Override it via className if you need corner-anchored growth.