Loading…

Gravity Field

beta

A box where a click drops a glyph and holding pours a stream: letters, digits or your own nodes fall, tumble and pile up.

Effects & motion
2 files
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add gravity-field

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { GravityField } from "@/components/ui/gravity-field";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Numbers
Letters And Numbers
Emoji
Icons
Floaty
Capped
Device Tilt
Imperative

API

Generated from the component's own types, so a prop cannot appear here without existing.

<GravityField>

Prop	Type	Default
`deviceTilt` Let a phone's tilt steer gravity, asking for sensor permission on first tap where required.	`boolean`	`false`
`gravity` Downward acceleration in px/s². Lower is floatier.	`number`	`2000`
`handleRef` Imperative `drop()` and `clear()`.	`Ref<GravityFieldHandle>`	—
`items` Your own drop pool — emoji, icons, any node. Each drop picks one at random.	`ReactNode[]`	—
`label` Accessible name of the field, which is a button.	`string`	`"Drop a glyph"`
`maxGlyphs` Glyphs kept in the field. Past it the oldest fade out. Unlimited by default.	`number`	`Infinity`
`pool` Which characters drop: A–Z, 0–9, or both. Ignored when `items` is set.	`GravityFieldPool`	`"letters"`
`size` Base glyph size in pixels; each drop varies around it by ±15%.	`number`	`36`
`surface`	`"muted" \| "outline" \| "plain"`	`"muted"`

Plus every attribute of <div>.

Accessibility

The field is one focusable element with role="button" and an accessible name (`label`, default "Drop a glyph"): Enter or Space drops a glyph at the centre, and holding the key pours through key repeat. Every glyph is decorative and aria-hidden, and nothing is announced. It has the shared focus ring. Under reduced motion the world is settled synchronously, so a glyph appears where it would have come to rest, glyphs past the cap are removed rather than faded, and device tilt is ignored. The animation loop stops when every glyph is asleep and pauses off-screen. `touch-action: pan-y` keeps vertical swipes scrolling the page. With `deviceTilt`, the motion-sensor permission is only requested from a tap or key press.

Quality

Measured from the source and its tests at build time.

All scores

9/9

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

deviceTilt

Let a phone's tilt steer gravity, asking for sensor permission on first tap where required.

boolean

false

gravity

Downward acceleration in px/s². Lower is floatier.

number

2000

handleRef

Imperative drop() and clear().

Ref<GravityFieldHandle>

—

items

Your own drop pool — emoji, icons, any node. Each drop picks one at random.

ReactNode[]

—

label

Accessible name of the field, which is a button.

string

"Drop a glyph"

maxGlyphs

Glyphs kept in the field. Past it the oldest fade out. Unlimited by default.

number

Infinity

pool

Which characters drop: A–Z, 0–9, or both. Ignored when items is set.

GravityFieldPool

"letters"

size

Base glyph size in pixels; each drop varies around it by ±15%.

number

36

surface

"muted" | "outline" | "plain"

"muted"