Scene PartsPRO

New

The pieces every animated hero shares: an announcement pill, a pause and play button that reports its state, and a 2D canvas that sizes itself, pauses off screen, follows the theme and holds still under reduced motion.

v1.0.0Updated Oct 26, 2026

What changed

Update without losing your edits

NewA canvas that pauses off screen

Installation

Once per project: add the Pro registry and your licence key.

components.json

{
  "registries": {
    "@ballmac": "https://ui.ballmac.com/r/{name}.json",
    "@ballmac-pro": {
      "url": "https://ui.ballmac.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${BALLMAC_LICENSE_KEY}" }
    }
  }
}

.env.local

BALLMAC_LICENSE_KEY=your-licence-key

Add it.

$ pnpm dlx shadcn@latest add @ballmac-pro/scene-parts

Need a licence or help with setup?
The source is part of Ballmac UI Pro.
Log in with your licence key to read and copy it here, or install it through the shadcn CLI or the MCP server. You own the code once it is in your project.
Get Pro Log in

Usage

import { ScenePill, ScenePause, Canvas2D } from "@/components/ballmac/scene-parts"

The full example is in the Code tab above.

API reference

<ScenePill>

Prop	Type	Default
`label*` The announcement text.	string	—
`chip` The small solid chip before it.	string	"New"

<ScenePause>

Prop	Type	Default
`paused*` Whether the animation is stopped.	boolean	—
`onPausedChange*` Called with the new state when the button is pressed.	(paused: boolean) => void	—
`pauseLabel` Label while the animation runs.	string	"Pause the animation"
`playLabel` Label while it is stopped.	string	"Play the animation"

<Canvas2D>

Prop	Type	Default
`draw*` Draws one frame. Called every frame while the scene runs, and once (at `stillTime`) under reduced motion.	(ctx: CanvasRenderingContext2D, frame: Canvas2DFrame) => void	—
`paused` Stops the scene, for example behind a pause button.	boolean	false
`maxDpr` Highest device pixel ratio to draw at.	number	2
`stillTime` The moment, in seconds, drawn once when the visitor prefers reduced motion.	number	6
`version` Changing this redraws a still scene (reduced motion or paused), for scenes whose content changes by hand.	number	0
`label` Describes the picture for assistive technology. Leave empty when the scene is only decoration.	string	—

Also accepts the standard attributes of its root element.

Accessibility

Key	Action
Enter, Space	Toggles the pause button; its aria-pressed reports the state

Use with AI

ScenePill is the announcement chip above a headline, ScenePause is the pause/play button (aria-pressed) every moving scene needs, and Canvas2D runs a draw(ctx, frame) function with pointer, DPR, theme and reduced-motion handled. With the shadcn MCP server set up (guide), ask your agent:

Add the Ballmac UI Scene Parts (@ballmac-pro/scene-parts) to this project with the shadcn MCP, then use it where it fits.

Use it for

Building your own animated hero or section on a canvas
Adding the pause control that long-running motion requires

Not for

Shader scenes (use webgl-canvas)
A one-off static drawing (an SVG is lighter)

Registry JSON (needs your licence key): https://ui.ballmac.com/r/pro/scene-parts.json

Credits

Covered by the Ballmac UI Pro license.

npm: lucide-react
Registry: @ballmac/color @ballmac-pro/webgl shadcn/utils

Cover Art

Cover pictures drawn from a seed in your theme's chart colors: color fields, rings, bars, dots or waves. The same seed always draws the same picture, so an item without an image still looks finished.

Globe

An interactive WebGL dot globe (cobe) with markers, drag-to-spin momentum and arrow-key control. Colors come from theme tokens and repaint on theme change; starts lazily and pauses off-screen.

Grid Pattern

A crisp square-grid background in the border color with optional dashed lines, filled cells, softly lighting random cells and an edge fade, drawn as one SVG pattern.

Aurora Background

Soft, slowly drifting aurora light made of blurred token-colored glows with fine vertical curtains and an optional radial fade. Pure CSS layers, paused off-screen, still under reduced motion.