.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

Cycles a word list with a gooey blur-and-threshold melt between words, anchored to the longest word so nothing shifts, with duration, hold and easing controls.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

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

The code is locked

Melt Words is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

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	Type	Default	What it does
`words` required	`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. The cycle also holds while the pointer is over the words. Offer a pause control wired to this prop, so keyboard and touch users can stop it too.
`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.

Preview

Code

The code is locked

Props

A11y

Screen reader

Reduced motion