.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

Skifter gennem en ordliste med en klæbrig smelteovergang (sløring og tærskel) mellem ordene, forankret i det længste ord, så intet flytter sig, med styring af varighed, pause og kurve.

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

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

Koden er låst

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

MCP

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

MeltWordsProps

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

Preview

Kode

Koden er låst

Props

A11y