.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, der sich Buchstabe für Buchstabe aus Rauch verdichtet und sich wieder darin auflöst, einzeilig, mehrzeilig oder an Ort und Stelle, beim Laden, Hover oder Scrollen, mit optionaler Hitzeflimmer-Turbulenz.

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.

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

Der Code ist gesperrt

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

MCP

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

SmokeTypeProps

Prop	Typ	Standard	Was sie tut
`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.

Vorschau

Code

Der Code ist gesperrt

Props

A11y