.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

En knap, der skyder en byge af emojis afsted ved hvert tryk, med tyngdekraft, spredning, kraft og et fjedrende ryst. Partiklerne flyver forbi knappen på et overlag, der lader klik gå igennem.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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

Koden er låst

Burst Button er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`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.

Tager også alle props fra ButtonHTMLAttributes<HTMLButtonElement>.

Preview

Kode

Koden er låst

Props

A11y