Stop Motion

Choppy, hand-animated stop-motion 'boil' for any content.

Stop Motion

Example.tsx

import { StopMotion } from "@/components/better/stop-motion"

export function Example() {
  return (
    <StopMotion
      className="text-4xl font-semibold"
      fps={8}
      rotate={1.5}
      shift={1}
      steps={4}
    >
      Stop Motion
    </StopMotion>
  )
}

Dependencies

None — just React and Tailwind CSS.

Props

Prop	Type	Default	Description
children*	ReactNode	—
className	string	—
fps	number	8	Frames per second — lower is choppier / more hand-made.
rotate	number	1.5	Peak rotation at either end of the boil, in degrees.
shift	number	1	Peak positional wobble, in px.
steps	number	4	How many discrete frames the boil cycles through (2–8).