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

Dust Type

textPro

Particle typography that gathers into letters on scroll or hover, scatters around the pointer with spring physics, and can replay.

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.

dust-type.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type DustTypeProps = {  text: string  trigger?: 'viewport' | 'hover' | 'manual'  once?: boolean  density?: number  particleSize?: number  colors?: string[]  fit?: boolean  maxFontSize?: number  duration?: number  stagger?: number  leaveDelay?: number  idleOpacity?: number  repelRadius?: number  repelStrength?: number  as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4'  ref?: Ref<DustTypeHandle>  className?: string}export function DustType({  text,  trigger = 'viewport',  once = true,  density = 0.6,  particleSize = 2.2,  colors,  fit = false,  maxFontSize = 360,  duration = 1500,  stagger = 800,  leaveDelay = 220,  idleOpacity,  repelRadius = 110,  repelStrength = 1,  as = 'span',  ref,  className,}: DustTypeProps) {  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

Dust 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/dust-type

MCP

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

DustTypeProps

Prop	Type	Default	What it does
`text` required	`string`	–	The text to show. It stays in the page as real, selectable text; the particles are drawn on top of it.
`trigger`	`'viewport' \| 'hover' \| 'manual'`	`'viewport'`	What makes the dust gather into letters. `viewport` when it scrolls into view, `hover` while the pointer (or a finger) is over it and it drifts apart again afterwards (it also gathers while it has keyboard focus, so it becomes focusable), `manual` only through the `ref` handle. With `manual` the cloud starts invisible (`idleOpacity` 0) and the text stays hidden until `assemble()` or `replay()` is called; set `idleOpacity` to keep some of it visible.
`once`	`boolean`	`true`	With `viewport`, play only the first time it is seen. When false, it scatters off screen and plays again on the next visit.
`density`	`number`	`0.6`	How many particles make up the letters, from 0.1 (sparse grains) to 1 (dense, almost solid).
`particleSize`	`number`	`2.2`	Diameter of a particle in CSS pixels.
`colors`	`string[]`	–	Particle colours, picked at random per particle. Any CSS colour, including `var(--x)`. Defaults to the inherited text colour.
`fit`	`boolean`	`false`	Scale the type so the line fills the width of the wrapper. The wrapper then needs a width, e.g. `w-full`.
`maxFontSize`	`number`	`360`	Largest font size when fitting, in CSS pixels.
`duration`	`number`	`1500`	How long one particle takes to land, in milliseconds.
`stagger`	`number`	`800`	How much the start times are spread out, in milliseconds. Particles are released in a sweep from left to right.
`leaveDelay`	`number`	`220`	With `hover`, how long to wait after the pointer leaves before the text drifts apart, in milliseconds.
`idleOpacity`	`number`	–	How visible the dust cloud is before it gathers, from 0 to 1. With `hover` it is worth keeping some.
`repelRadius`	`number`	`110`	How far from the pointer particles are pushed away, in CSS pixels. 0 turns the repulsion off.
`repelStrength`	`number`	`1`	How hard they are pushed. 1 is a clear bubble around the pointer.
`as`	`'span' \| 'div' \| 'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4'`	`'span'`	Which element to render, so a heading stays a heading.
`className`	`string`	–	Classes for the wrapper. Set the font, weight and colour here (and the size, unless `fit`).
`ref`	`Ref<DustTypeHandle>`	–	Handle for `replay()`, `assemble()` and `disperse()`.

Preview

Code

The code is locked

Props

A11y