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

Melt Words

textPro

Wechselt durch eine Wortliste mit einem zähflüssigen Unschärfe-Schwellwert-Schmelzen zwischen den Wörtern, am längsten Wort verankert, damit nichts verrutscht, mit Reglern für Dauer, Haltezeit und Easing.

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.

melt-words.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type MeltWordsProps = {  words: string[] | string  as?: ElementType  duration?: number  hold?: number  easing?: MeltWordsEasing  blur?: number  scale?: number  align?: 'start' | 'center' | 'end'  paused?: boolean  announce?: 'list' | 'current'  onChange?: (index: number) => void  style?: CSSProperties  className?: string}export function MeltWords({  words,  as = 'span',  duration = 1100,  hold = 1500,  easing = 'snap',  blur = 0.16,  scale = 0.06,  align = 'center',  paused = false,  announce = 'list',  onChange,  style,  className,}: MeltWordsProps) {  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

Melt Words 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/melt-words

MCP

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

MeltWordsProps

Prop	Typ	Standard	Was sie tut
`words` erforderlich	`string[] \| string`	–	The words to cycle through, as a list or as one string split on line breaks and commas. At least two are needed to animate.
`as`	`ElementType`	`'span'`	The element to render, e.g. `h1`, `h2`, `p`, `section` or `span`.
`duration`	`number`	`1100`	How long one word takes to melt into the next, in milliseconds.
`hold`	`number`	`1500`	How long each word stays still before the next melt starts, in milliseconds.
`easing`	`MeltWordsEasing`	`'snap'`	Speed curve of the melt. `snap` is our own: a quick start that settles softly. Also takes the CSS names, `cubic-bezier(x1, y1, x2, y2)` or the four numbers as a tuple.
`blur`	`number`	`0.16`	The most the words blur at the middle of a melt, in `em` of the font size. More blur means a thicker, gooier bridge.
`scale`	`number`	`0.06`	How much a word shrinks when it fades out and grows when it arrives (0 turns it off). 0.1 means 10%.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Where the words sit inside the longest word's width.
`paused`	`boolean`	`false`	Stops the cycle on the current word.
`announce`	`'list' \| 'current'`	`'list'`	What screen readers get. `list` (default): all words as one static sentence, so nothing is announced while the words cycle. `current`: only the visible word, announced politely each time it changes.
`onChange`	`(index: number) => void`	–	Called when a new word has arrived, with its index.
`className`	`string`	–	Classes for the element. Set the font, size, weight and colour here; the effect uses `currentColor`.
`style`	`CSSProperties`	–	Styles for the element.

Vorschau

Code

Der Code ist gesperrt

Props

A11y