Glitch Type

textNyPro

Stor overskriftstekst, der flænger i korte stød: bogstavstore stykker glider, hopper eller falder ud med farveforskudte kanter, og så falder teksten til ro igen. Stødene kommer i fast takt, ved hover eller når teksten rulles frem.

Køb · 49 €

Introduktionspris til og med 31. december 2026. Derefter 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}

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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

Koden er låst

Glitch Type er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 66 effekter.

Køb · 49 €

Har du købt?Log ind for at se koden

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Log ind og opret din nøgle 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/glitch-type

MCP

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

GlitchTypeProps

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

Preview

Kode

Koden er låst

Props

A11y

Skærmlæser

Mindre bevægelse

Tastatur

Andet