KQ-1401 · FLOAT/FIELD
Float Field
A few hundred soft motes rise through the box behind your content on a gentle seeded sway, in three depths from small far points to large out-of-focus discs. The pointer carries a bubble of clear air whose centre trails it on springs.glide's constants and whose radius opens on springs.glide and closes on springs.drift, so motes crowd along its rim and drift back in behind it; a press releases a burst that throws nearby motes upward and sends a fountain of sparks after them. Keyboard focus on a control inside opens the bubble around it, and Enter or Space on it bursts from its centre.
Coldbrook Sparkling
Bottled where the spring rises.
Drawn cold from three hundred metres down, fizzing on its own.
at rest · 220 motes rising 24 px/s
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/float-field
Props
- count
- number
- default 220
- How many motes fill a 760×232 box; a box of another size gets proportionally more or fewer.
- rise
- number
- default 24
- How fast the motes rise, in px per second; near motes rise faster than far ones.
- repel
- number
- default 0.6
- How hard the pointer's bubble pushes motes away, 0 to 1; 0 is no bubble.
- radius
- number
- default 84
- The bubble's radius in px, never more than 40% of the box's shorter side.
- turbulence
- number
- default 0.5
- How much the motes sway sideways as they rise, 0 to 1.
- size
- number
- default 2.6
- The base radius of a mote in px; depth scales it from about half to twice that.
- glow
- number
- default 0.5
- How soft a halo each mote carries, from a crisp dot at 0 to a wide glow at 1.
- burst
- number
- default 0.6
- How strong a press's burst is, 0 to 1; 0 turns bursts off.
- colors
- string[]
- default ["var(--accent-bright)", "var(--signal)", "var(--ink-3)"]
- Mote colours, any CSS colours, resolved on the element so they follow the theme; the first is the most common.
- interactive
- boolean
- default true
- Respond to the pointer, presses and keyboard focus.
- paused
- boolean
- default false
- Freeze the field where it is.
- seed
- number
- default 11
- Seed for the motes' arrangement and sway.
- dpr
- number
- default 2
- The highest device pixel ratio the canvas draws at (never above 2).
- onBurst
- (point: { x: number; y: number }) => void
- default —
- Fires when a press or a keyboard activation releases a burst, with its point in the box.
- className
- string
- default —
- Classes for the box; size it here.
- children
- React.ReactNode
- default —
- Content laid over the field; it keeps every click, focus and key.
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 220 | How many motes fill a 760×232 box; a box of another size gets proportionally more or fewer. |
| rise | number | 24 | How fast the motes rise, in px per second; near motes rise faster than far ones. |
| repel | number | 0.6 | How hard the pointer's bubble pushes motes away, 0 to 1; 0 is no bubble. |
| radius | number | 84 | The bubble's radius in px, never more than 40% of the box's shorter side. |
| turbulence | number | 0.5 | How much the motes sway sideways as they rise, 0 to 1. |
| size | number | 2.6 | The base radius of a mote in px; depth scales it from about half to twice that. |
| glow | number | 0.5 | How soft a halo each mote carries, from a crisp dot at 0 to a wide glow at 1. |
| burst | number | 0.6 | How strong a press's burst is, 0 to 1; 0 turns bursts off. |
| colors | string[] | ["var(--accent-bright)", "var(--signal)", "var(--ink-3)"] | Mote colours, any CSS colours, resolved on the element so they follow the theme; the first is the most common. |
| interactive | boolean | true | Respond to the pointer, presses and keyboard focus. |
| paused | boolean | false | Freeze the field where it is. |
| seed | number | 11 | Seed for the motes' arrangement and sway. |
| dpr | number | 2 | The highest device pixel ratio the canvas draws at (never above 2). |
| onBurst | (point: { x: number; y: number }) => void | — | Fires when a press or a keyboard activation releases a burst, with its point in the box. |
| className | string | — | Classes for the box; size it here. |
| children | React.ReactNode | — | Content laid over the field; it keeps every click, focus and key. |