.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, der sich aus Glitch-Zeichen entschlüsselt, in fünf Reihenfolgen (links nach rechts, rechts nach links, zufällig, von der Mitte, zeilenweise), mit optionalem Flackern, Auslösung im Sichtbereich und Wiederholung, dazu diffuse und wellenförmige Hover-Modi, die das Layout nie verschieben.

Bald verfügbar

Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

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

Der Code ist gesperrt

Cipher Text gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.

Bald verfügbar

49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

Einmalzahlung
Ein Entwickler
Der Schlüssel kommt sofort per E-Mail
Keine Umsatzsteuer (§ 19 UStG)

Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.

Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein

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	Typ	Standard	Was sie tut
`text` erforderlich	`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.

Vorschau

Code

Der Code ist gesperrt

Props

A11y