.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Burst Button

buttonPro

A button that fires a burst of emoji on every press, with gravity, spread, power and a springy shake. Particles fly past the button on a click-through overlay.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

burst-button.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type BurstButtonProps = {  ref?: Ref<HTMLButtonElement>  emojis?: string[]  count?: number  power?: number  gravity?: number  spread?: number  angle?: number  size?: number  spin?: number  shake?: number  autoBurst?: number  className?: string}export function BurstButton({  ref,  emojis = ['🎉', '✨', '💖', '🔥', '⭐', '😎'],  count = 26,  power = 900,  gravity = 1800,  spread = 80,  angle = 0,  size = 28,  spin = 1.2,  shake = 1,  autoBurst,  className,}: BurstButtonProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Burst Button is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/burst-button

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

BurstButtonProps

Prop	Type	Default	What it does
`ref`	`Ref<HTMLButtonElement>`	–	Ref to the real `<button>`.
`emojis`	`string[]`	`['🎉', '✨', '💖', '🔥', '⭐', '😎']`	Strings that fly out. Emoji or any short text such as `+1`; picked at random per particle.
`count`	`number`	`26`	Particles per burst (capped at 160, and reduced on narrow screens).
`power`	`number`	`900`	Launch speed in px/s. About 900 reaches 250 px above the button with the default gravity.
`gravity`	`number`	`1800`	Downward pull in px/s^2. Lower is floaty, higher is heavy.
`spread`	`number`	`80`	Width of the launch cone in degrees. 360 sprays in every direction.
`angle`	`number`	`0`	Direction of the cone in degrees: 0 up, 90 right, 180 down, -90 left.
`size`	`number`	`28`	Particle size in px.
`spin`	`number`	`1.2`	Maximum spin in turns per second; 0 stops rotation.
`shake`	`number`	`1`	Strength of the springy shake of the button on each press; 0 turns it off.
`autoBurst`	`number`	–	Fires a burst by itself every this many milliseconds (for demos). 0 or undefined turns it off. Pauses off screen and in hidden tabs.

Also takes every prop from ButtonHTMLAttributes<HTMLButtonElement>.

Preview

Code

The code is locked

Props

A11y