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

textPro

Text that decodes out of glitch characters in five orders (left-to-right, right-to-left, random, centre, per line), with optional flicker, viewport trigger and replay, plus diffuse and wave hover modes that never shift the layout.

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-text.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type CipherTextProps = {  text: string  as?: ElementType  mode?: CipherTextMode  hover?: CipherTextHover  charset?: CipherSetName | (string & {})  duration?: number  delay?: number  settle?: number  ease?: CipherEase  prefill?: boolean  swapEvery?: number  trigger?: 'view' | 'mount'  once?: boolean  threshold?: number  replayKey?: string | number  replayOnClick?: boolean  flicker?: boolean  flickerColor?: string  glitchColor?: string  glitchOpacity?: number  hoverRadius?: number  hoverSettle?: number  waveSpeed?: number  waveWidth?: number  onRevealed?: () => void  style?: CSSProperties  className?: string}export function CipherText({  text,  as = 'span',  mode = 'ltr',  hover = 'none',  charset = 'glyphs',  duration = 1400,  delay = 0,  settle = 650,  ease = 'out',  prefill = false,  swapEvery = 55,  trigger = 'view',  once = true,  threshold = 0.35,  replayKey,  replayOnClick = false,  flicker = false,  flickerColor,  glitchColor,  glitchOpacity = 0.6,  hoverRadius = 90,  hoverSettle = 520,  waveSpeed = 0.55,  waveWidth = 70,  onRevealed,  style,  className,}: CipherTextProps) {  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 Text 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-text

MCP

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

CipherTextProps

Prop	Type	Default	What it does
`text` required	`string`	–	The text. Use `\n` for line breaks (needed for `mode="lines"`).
`as`	`ElementType`	`'span'`	The element to render, e.g. `h1`, `p` or `span`.
`mode`	`CipherTextMode`	`'ltr'`	The order the letters decode in: `ltr` and `rtl` sweep along the text, `random` picks letters in a shuffled order, `center` opens from the middle, `lines` decodes each line as a unit, one line after the other.
`hover`	`CipherTextHover`	`'none'`	What the pointer does once the text has decoded: `diffuse` re-scrambles the letters around the pointer and lets them settle again, `wave` sends a ring of scrambling letters rippling out from where you touch.
`charset`	`CipherSetName \| (string & {})`	`'glyphs'`	Glitch characters: a preset name (`glyphs`, `symbols`, `binary`, `blocks`, `katakana`, `hex`) or your own string.
`duration`	`number`	`1400`	Length of the whole reveal in milliseconds, from the first letter starting to the last one settling.
`delay`	`number`	`0`	Wait before the reveal starts, in milliseconds.
`settle`	`number`	`650`	How long each letter stays scrambled before it locks in, in milliseconds.
`ease`	`CipherEase`	`'out'`	Easing of the order in which letters start: `linear`, `in`, `out` or `inOut`.
`prefill`	`boolean`	`false`	When true, letters show glitch characters from the start instead of staying blank until their turn.
`swapEvery`	`number`	`55`	Milliseconds between glyph changes of one scrambling letter. Lower is more frantic.
`trigger`	`'view' \| 'mount'`	`'view'`	`view` starts when the text scrolls into view, `mount` starts at once.
`once`	`boolean`	`true`	With `trigger="view"`: play only the first time (true) or every time it re-enters the screen (false).
`threshold`	`number`	`0.35`	Share of the text that has to be visible before `trigger="view"` fires, 0 to 1.
`replayKey`	`string \| number`	–	Change this value to replay the reveal, e.g. increase a counter from a button.
`replayOnClick`	`boolean`	`false`	Replay when the text is clicked or tapped (mouse and touch only; offer a real button for keyboard users).
`flicker`	`boolean`	`false`	Adds a flicker: scrambling letters stutter in brightness and flash in `flickerColor` as they lock in.
`flickerColor`	`string`	–	Colour of the flicker flashes. Defaults to the glitch colour.
`glitchColor`	`string`	–	Colour of scrambling letters. Defaults to the text colour (`currentColor`).
`glitchOpacity`	`number`	`0.6`	Opacity of scrambling letters, 0 to 1.
`hoverRadius`	`number`	`90`	Reach of `diffuse`, in pixels from the pointer.
`hoverSettle`	`number`	`520`	How long `diffuse` letters take to settle again, in milliseconds.
`waveSpeed`	`number`	`0.55`	Travel speed of `wave`, in pixels per millisecond.
`waveWidth`	`number`	`70`	Thickness of the `wave` ring, in pixels.
`onRevealed`	`() => void`	–	Called once when a reveal has fully settled.
`className`	`string`	–	Classes for the element.
`style`	`CSSProperties`	–	Inline style for the element.

Preview

Code

The code is locked

Props

A11y

Screen reader

Reduced motion

Other