Loading…

Goo Ball

beta

A decorative jelly ball you drag around a well: it stretches along its velocity and squashes against the walls.

Effects & motion
1 file
3 npm packages
Accessibility notes
Animates with motion

Playground

Installation

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

$pnpm dlx @dowel-ui/cli add goo-ball

npm packages installed: class-variance-authority, motion, radix-ui.

Usage

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

app/page.tsxTSX

import { GooBall } from "@/components/ui/goo-ball";

Examples

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

Default
Gallery
Controlled
Wide Well
Disabled
Right To Left

API

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

<GooBall>

Prop	Type	Default
`defaultValue` Starting position (uncontrolled). Defaults to the centre.	`GooBallValue`	`CENTRE`
`disabled` Stops dragging and keyboard nudging.	`boolean`	`false`
`fill`	`"light" \| "dark"`	`"light"`
`give` Spring softness, 10-100: how slow and wobbly the settle is.	`number`	`50`
`grip` How tightly the blob tracks the handle, 0-100. Lower lags more.	`number`	`50`
`onValueChange` Called with the new position as the ball is dragged or nudged.	`(value: GooBallValue) => void`	—
`size` Ball diameter in px (bencho: 32-84).	`number`	`56`
`stretch` How far the blob deforms with speed, 0-70. 0 keeps it a rigid circle.	`number`	`36`
`stroke` Adds a 1px hairline ring in the border colour.	`boolean`	`false`
`value` Position in percent of travel (controlled).	`GooBallValue`	—

Plus every attribute of <div> except defaultValue, onChange.

Accessibility

The handle is a 2D slider (role="slider", aria-roledescription "draggable ball") labelled as decorative by default ("Goo ball (decorative)"), with aria-valuetext "<x>% across, <y>% down". Arrow keys nudge it 2% (Shift: 10%), mirrored in right-to-left layouts; Home centres it; it has the shared focus ring. The gooey blob is an aria-hidden SVG drawn behind the handle. Under reduced motion the spring is skipped: the ball sits exactly at the handle with no stretch or wobble.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

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

Prop

Type

Default

defaultValue

Starting position (uncontrolled). Defaults to the centre.

GooBallValue

CENTRE

disabled

Stops dragging and keyboard nudging.

boolean

false

fill

"light" | "dark"

"light"

give

Spring softness, 10-100: how slow and wobbly the settle is.

number

50

grip

How tightly the blob tracks the handle, 0-100. Lower lags more.

number

50

onValueChange

Called with the new position as the ball is dragged or nudged.

(value: GooBallValue) => void

—

size

Ball diameter in px (bencho: 32-84).

number

56

stretch

How far the blob deforms with speed, 0-70. 0 keeps it a rigid circle.

number

36

stroke

Adds a 1px hairline ring in the border colour.

boolean

false

value

Position in percent of travel (controlled).

GooBallValue

—