Scatter Text
A text input whose content scatters into drifting canvas grains on submit.
8.4 KB
•Updated on September 20, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-scatter-textUsage
Code
import { ScatterText } from '@/components/spaceui/scatter-text'
export default function SpaceUI() {
return <ScatterText placeholder="[email protected]" onSubmit={(value) => console.log(value)} />
}Files
| File | Role |
|---|---|
scatter-text/index.tsx | Canvas rasterizing, scatter loop, the form |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Empty-state hint |
value | string | — | Controlled value |
defaultValue | string | - | Initial value when uncontrolled |
onChange | (e: ChangeEvent<HTMLInputElement>) => void | — | Fires on every keystroke |
onSubmit | (value: string) => void | — | Fires once the scatter animation finishes |
className | string | — | Outer form wrapper |
inputClassName | string | — | The <input> element |
Submit either by pressing Enter or clicking the trailing button. Grain color is sampled from the input's own computed text color, so it follows light/dark theme automatically.
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.