.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

Partikeltypografi, der samler sig til bogstaver ved scroll eller hover, spredes omkring markøren med fjederfysik og kan afspilles igen.

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

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

Koden er låst

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

MCP

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

DustTypeProps

Prop	Type	Standard	Hvad den gør
`text` påkrævet	`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

Kode

Koden er låst

Props

A11y