Flipbook

Snaps between frames — emoji, text, or square images — with no easing and no fades.

✊

Example.tsx

import { Flipbook } from "@/components/better/flipbook"

export function Example() {
  return (
    <Flipbook fps={4} jitter={true}>
      <span>✊</span>
      <span>✋</span>
      <span>✌️</span>
    </Flipbook>
  )
}

Dependencies

None — just React and Tailwind CSS.

Props

Prop	Type	Default	Description
children	ReactNode	—	Text/emoji frames — one child per frame. Ignored when `images` is set.
images	string[]	—	Image frames, one src per frame. Give every image the SAME width and height (a square source, e.g. 256×256) — frames are drawn into a square `size`×`size` box, so mismatched aspect ratios get cropped and the flipbook appears to wobble between frames. /
alt	string	""	Alt text for image frames (the whole sequence reads as one image).
size	number	96	Side of the square frame box, in px. Only applies to image frames.
className	string	—
fps	number	4	Frames per second — keep it low (2-8) for the stop-motion feel.
jitter	boolean	true	Add a tiny positional jitter to each frame, like a mis-registered camera.