.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}

Click Pop

cursorPro

Seks klikeffekter (gnist, bølge, konfetti, sigtekorn, krusedulle, låsning), der afspilles, hvor en besøgende end klikker, uden nogensinde at blokere klikket.

Å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.

click-pop.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type ClickPopProps = {  variant?: ClickPopVariant  color?: string  palette?: string[]  size?: number  strokeWidth?: number  rotation?: number  duration?: number  count?: number  scope?: 'window' | 'container'  touch?: boolean  disabled?: boolean  children?: ReactNode  layerClassName?: string  className?: string}export function ClickPop({  variant = 'spark',  color,  palette = PALETTE,  size = 46,  strokeWidth = 2,  rotation = 0,  duration = 620,  count,  scope = 'window',  touch = true,  disabled = false,  children,  layerClassName,  className,}: ClickPopProps) {  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

Click Pop 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/click-pop

MCP

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

ClickPopProps

Prop	Type	Standard	Hvad den gør
`variant`	`ClickPopVariant`	`'spark'`	The effect that plays where you click: `ripple` two rings that spread and fade, `spark` tapered rays that shoot out, `confetti` paper bits that fall with gravity, `reticle` corner brackets that snap onto the point, `squiggle` wavy lines that wriggle outwards, `lock-on` a ring that closes in and bursts on impact.
`color`	`string`	–	Stroke colour. Defaults to the text colour of the effect layer (`currentColor`).
`palette`	`string[]`	`PALETTE`	Colours for `confetti`; the others use `color`.
`size`	`number`	`46`	How far the effect reaches from the click, in pixels.
`strokeWidth`	`number`	`2`	Line width in pixels.
`rotation`	`number`	`0`	Turns the whole pattern, in degrees.
`duration`	`number`	`620`	Length of one effect in milliseconds (`confetti` runs half as long again).
`count`	`number`	–	Rays, rings, particles or lines; each variant has its own default.
`scope`	`'window' \| 'container'`	`'window'`	`window` fires on clicks anywhere on the page; `container` only inside this component's box.
`touch`	`boolean`	`true`	Also play on taps on touch screens.
`disabled`	`boolean`	`false`	Stops new effects; running ones finish.
`children`	`ReactNode`	–	Content of the container; with `scope="window"` it is rendered as is.
`className`	`string`	–	Classes for the wrapper (container scope).
`layerClassName`	`string`	–	Classes for the effect layer, e.g. `text-primary` to colour it.

Preview

Kode

Koden er låst

Props

A11y