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

Cipher Button

buttonPro

En knap, der blander sin tekst til kode og afkoder den bogstav for bogstav ved hover eller fokus, oplyst af et strejfende lysbånd, som kan farves, gøres hurtigere, mangedobles og få en hale.

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

cipher-button.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type CipherButtonProps = {  label: string  charset?: CipherSetName | (string & {})  cycles?: number  stagger?: number  frame?: number  textColor?: string  hoverTextColor?: string  background?: string  border?: boolean  borderColor?: string  lightColor?: string  lightSpeed?: number  lightCount?: number  lightTrail?: number  lightWidth?: number  glow?: number  className?: string}export function CipherButton({  label,  charset = 'symbols',  cycles = 4,  stagger = 55,  frame = 42,  textColor,  hoverTextColor,  background,  border = false,  borderColor,  lightColor = '#ff6a3d',  lightSpeed = 2.4,  lightCount = 1,  lightTrail = 0.75,  lightWidth = 1.5,  glow = 0.22,  className,}: CipherButtonProps) {  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

Cipher 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/cipher-button

MCP

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

CipherButtonProps

Prop	Type	Standard	Hvad den gør
`label` påkrævet	`string`	–	The button label. It is also the accessible name, whatever the letters look like mid-animation.
`charset`	`CipherSetName \| (string & {})`	`'symbols'`	Cipher characters: a preset name (`symbols`, `glyphs`, `binary`, `blocks`, `katakana`, `hex`) or your own string.
`cycles`	`number`	`4`	How many times each letter changes glyph before it locks in.
`stagger`	`number`	`55`	Milliseconds between one letter locking in and the next.
`frame`	`number`	`42`	Milliseconds between glyph changes of a scrambling letter.
`textColor`	`string`	–	Label colour at rest. Defaults to the button's own text colour.
`hoverTextColor`	`string`	–	Label colour while hovered or focused.
`background`	`string`	–	Fill of the button, any CSS background.
`border`	`boolean`	`false`	Draws a hairline border in `borderColor`.
`borderColor`	`string`	–	Colour of the border. Defaults to the label colour at low opacity.
`lightColor`	`string`	`'#ff6a3d'`	Colour of the sweeping light.
`lightSpeed`	`number`	`2.4`	Seconds the light takes for one full turn around the button.
`lightCount`	`number`	`1`	Number of light bands sweeping at once (1 to 4).
`lightTrail`	`number`	`0.75`	Length of each band's fading tail, 0 (a sharp dash) to 1 (a long comet).
`lightWidth`	`number`	`1.5`	Thickness of the light on the edge, in pixels.
`glow`	`number`	`0.22`	How strongly the light washes over the button face, 0 to 1.

Tager også alle props fra Omit<ComponentPropsWithRef<'button'>, 'children'>.

Preview

Kode

Koden er låst

Props

A11y