Dot Text

Renders any string as free particles sampled from real font glyphs. The pointer parts nearby dots with radial and directional forces; they coast, then reform the word.

Preview

Installation

Install the component using the CLI.

terminal

npx shadcn@latest add https://www.nkcbuilds.com/r/dot-text.json

Usage

Import the component:

import

import { DotText } from "@/components/ui/dot-text"

Use it in your code:

example.tsx

<DotText text="nkcbuilds" className="min-h-[200px] w-full" />

Props

Property	Type	Default	Description
`text*`	`string`	`—`	Text to render as dots. Use \n for multiple lines.
`className`	`string`	`—`	Wrapper classes (set min-height / width for layout).
`fontFamily`	`string`	`system sans`	Any loaded web font — glyphs are sampled from canvas text.
`color`	`string`	`—`	Letter color. Falls back to CSS --dot, then #a1a1aa.
`brightness`	`number`	`1`	Opacity scale for drawn dots (0–1).
`influenceRadius`	`number`	`20`	Pointer hit radius in px (~10 dots with gap 4).
`interactive`	`boolean`	`true`	Pointer physics. Off when prefers-reduced-motion.
`mode`	`"text" \| "field"`	`"text"`	text = letters only. field = ambient grid + letters.