How do I install the pixel burst?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Does it respect reduced motion?

Yes. Nothing fires under reduced motion.

Is it the same every time?

No. Spread and distance are jittered per click.

Pixel Burst

A click spark. Wrap any area and every click sprays a ring of square pixels from the pointer: they fly outward with a spring-like ease, shrink and fade, then unmount. Spread and distance are jittered per click, and nothing fires under reduced motion.

pnpm dlx shadcn@latest add @ditherui/pixel-burst

Click anywhere

Install

$ pnpm dlx shadcn@latest add @ditherui/pixel-burst

Props

PropTypeDefault

childrenReact.ReactNode—

countnumber10

distancenumber44

durationnumber650

animatedbooleantrue

className / ...div propsReact.ComponentProps<"div">—

When to use the pixel burst

Use it as a click spark for buttons and success states. Wrap any area and every click sprays a ring of square pixels.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

Dither AvatarPixel-art avatars generated from a name, with checker-dithered cells.
AC
MR
PN
+2
AvatarAvatars with fallbacks, status dots and stacked groups.
SelectAn animated select menu with a sliding active highlight.