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

Smoke Type

textPro

Text that condenses out of smoke letter by letter and dissolves back into it, in single-line, multi-line and in-place modes, on mount, hover or scroll, with optional heat-haze turbulence.

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.

smoke-type.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type SmokeTypeProps = {  text?: string  phrases?: string[]  hold?: number  mode?: SmokeTypeMode  from?: SmokeTypeFrom  trigger?: SmokeTypeTrigger  once?: boolean  intensity?: number  duration?: number  stagger?: number  easing?: string  turbulence?: number  smokeColor?: string  playKey?: string | number  onRevealed?: () => void  as?: ElementType  className?: string}export function SmokeType({  text = '',  phrases,  hold = 2600,  mode = 'single-line',  from = 'start',  trigger = 'mount',  once = true,  intensity = 1,  duration = 1100,  stagger = 55,  easing = 'cubic-bezier(0.22, 0.8, 0.24, 1)',  turbulence = 0.35,  smokeColor,  playKey,  onRevealed,  as = 'span',  className,}: SmokeTypeProps) {  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

Smoke Type 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/smoke-type

MCP

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

SmokeTypeProps

Prop	Type	Default	What it does
`text`	`string`	`''`	The text. In `in-place` mode, changing it dissolves the old text while the new one condenses in the same spot.
`phrases`	`string[]`	–	Phrases that take turns in the same spot (any mode, made for `in-place`). When set, `text` is ignored.
`hold`	`number`	`2600`	Milliseconds each phrase stays readable before the next one forms.
`mode`	`SmokeTypeMode`	`'single-line'`	`single-line` keeps the text on one line, `multi-line` lets it wrap and sweeps the reveal down the lines like a wave, `in-place` swaps phrases inside one reserved box (width and height come from the widest and tallest).
`from`	`SmokeTypeFrom`	`'start'`	Where the reveal starts: `start` the first letter (top left), `end` the last letter and runs backwards, `bottom-left` the last line first, each line still left to right.
`trigger`	`SmokeTypeTrigger`	`'mount'`	When it plays: `mount` as soon as it is on screen, `scroll` when it scrolls into view (and resets when it leaves, unless `once`), `hover` the text is readable at rest and puffs away and re-forms when the pointer enters.
`once`	`boolean`	`true`	For `scroll`: play only the first time. Set to false to replay each time it comes back into view.
`intensity`	`number`	`1`	How thick the smoke is: scales blur, drift, wisp size and turbulence. 0 is a plain staggered fade, 1 is the default, 2 is heavy.
`duration`	`number`	`1100`	Time each letter takes to form, in milliseconds.
`stagger`	`number`	`55`	Delay between letters in milliseconds (shrinks automatically so a long text never takes more than about three seconds).
`easing`	`string`	`'cubic-bezier(0.22, 0.8, 0.24, 1)'`	CSS easing of every letter, e.g. `cubic-bezier(0.22, 0.8, 0.24, 1)` or `ease-out`.
`turbulence`	`number`	`0.35`	Strength of the optional SVG turbulence that makes the whole line wobble like heat haze while it plays, 0 to 1. 0 turns it off.
`smokeColor`	`string`	–	Colour of the drifting wisps behind each letter. Defaults to the text colour (`currentColor`).
`playKey`	`string \| number`	–	Change this value to play the effect again (it dissolves first, then re-forms).
`onRevealed`	`() => void`	–	Called when a reveal has finished.
`as`	`ElementType`	`'span'`	Element to render, e.g. `h1` or `p`.
`className`	`string`	–	Classes for the wrapper. It is `inline-grid` by default; pass `grid` for a full-width block.

Preview

Code

The code is locked

Props

A11y