.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

A button that scrambles its label into cipher and decrypts it letter by letter on hover or focus, lit by a sweeping band of light you can colour, speed up, multiply and give a trail.

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.

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

The code is locked

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

MCP

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

CipherButtonProps

Prop	Type	Default	What it does
`label` required	`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.

Also takes every prop from Omit<ComponentPropsWithRef<'button'>, 'children'>.

Preview

Code

The code is locked

Props

A11y