.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

Tekst, der afkodes ud af glitchtegn i fem rækkefølger (venstre mod højre, højre mod venstre, tilfældig, fra midten, pr. linje), med valgfrit flimmer, start, når den kommer ind i billedet, og gentagelse, plus spredt og bølgende hover, der aldrig flytter layoutet.

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

Koden er låst

Cipher Text 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-text

MCP

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

CipherTextProps

Prop	Type	Standard	Hvad den gør
`text` påkrævet	`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

Kode

Koden er låst

Props

A11y