.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

Ein Button, der bei jedem Druck einen Schwall Emojis abfeuert, mit Schwerkraft, Streuung, Wucht und einem federnden Wackeln. Die Partikel fliegen am Button vorbei auf einem Overlay, das Klicks durchlässt.

Bald verfügbar

Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

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)} />}

Der Code ist gesperrt

Burst Button gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.

Bald verfügbar

49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

Einmalzahlung
Ein Entwickler
Der Schlüssel kommt sofort per E-Mail
Keine Umsatzsteuer (§ 19 UStG)

Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.

Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein

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	Typ	Standard	Was sie tut
`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.

Nimmt auch alle Props von ButtonHTMLAttributes<HTMLButtonElement>.

Vorschau

Code

Der Code ist gesperrt

Props

A11y