.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

Tekst, der fortættes ud af røg bogstav for bogstav og opløses i den igen, i én linje, flere linjer eller på stedet, ved indlæsning, hover eller scroll, med valgfrit varmeflimmer.

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

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

Koden er låst

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

MCP

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

SmokeTypeProps

Prop	Type	Standard	Hvad den gør
`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

Kode

Koden er låst

Props

A11y