.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

Partikel-Typografie, die sich beim Scrollen oder Hover zu Buchstaben sammelt, sich mit Federphysik um den Mauszeiger zerstreut und erneut abgespielt werden kann.

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.

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

Der Code ist gesperrt

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

MCP

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

DustTypeProps

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

Vorschau

Code

Der Code ist gesperrt

Props

A11y