Glitch Type

textNeuPro

Große Display-Schrift, die in kurzen Schüben reißt: buchstabengroße Stücke gleiten, springen oder fallen mit farbversetzten Rändern heraus, dann beruhigt sich der Text wieder. Die Schübe laufen im Takt, beim Hover oder beim Scrollen in den Blick.

Kaufen · 49 €

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

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

Breite

Die Vorschau konnte nicht geladen werden.

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

glitch-type.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type GlitchTypeProps = {  text: string  as?: ElementType  trigger?: GlitchTypeTrigger | GlitchTypeTrigger[]  interval?: number  duration?: number  intensity?: number  step?: number  split?: GlitchTypeSplit  colors?: string[]  replayKey?: string | number  style?: CSSProperties  className?: string}export function GlitchType({  text,  as = 'span',  trigger = ['inView', 'interval'],  interval = 3200,  duration = 640,  intensity = 0.65,  step = 55,  split = 'spectrum',  colors,  replayKey,  style,  className,}: GlitchTypeProps) {  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

Glitch Type gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 66 Effekte.

Kaufen · 49 €

Schon gekauft?Anmelden, um den Code zu sehen

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

Einmalzahlung
Ein Entwickler
Melde dich an und erstelle deinen Schlüssel sofort
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/glitch-type

MCP

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

GlitchTypeProps

Prop	Typ	Standard	Was sie tut
`text` erforderlich	`string`	–	The text. Use `\n` for line breaks. It stays in the page as real, selectable text.
`as`	`ElementType`	`'span'`	The element to render, e.g. `h1`, `p` or `span`.
`trigger`	`GlitchTypeTrigger \| GlitchTypeTrigger[]`	`['inView', 'interval']`	What sets off a burst. Pass one or several: `interval` glitches every so often while the text is on screen, `hover` when the pointer enters it, `inView` each time it scrolls into view.
`interval`	`number`	`3200`	Average wait between bursts with `trigger="interval"`, in milliseconds. Each wait varies by about a third.
`duration`	`number`	`640`	Length of one burst in milliseconds, from the first tear until the text has settled.
`intensity`	`number`	`0.65`	0 to 1: how far slices slide, how many blocks drop out and how wide the colour split is.
`step`	`number`	`55`	Milliseconds each glitch frame is held. Higher reads as a choppier, more digital stutter.
`split`	`GlitchTypeSplit`	`'spectrum'`	Colours of the split copies: `spectrum` (six hues), `rgb` or `cmy`.
`colors`	`string[]`	–	Your own split colours instead of a preset, as any CSS colours.
`replayKey`	`string \| number`	–	Change this value to set off a burst, e.g. increase a counter from a button.
`className`	`string`	–	Classes for the element. Set the font, size and colour here; the glitch copies follow them.
`style`	`CSSProperties`	–	Inline style for the element.

Vorschau

Code

Der Code ist gesperrt

Props

A11y

Screenreader

Reduzierte Bewegung

Tastatur

Sonstiges