KQ-1604 · BREAK/SHOT
Break Shot
A headline racked as billiard balls on a small carom table, a lacquered ball for every letter with an ivory spot carrying it. The pointer is a cue ball: what it meets it hits as an equal mass would, with the pointer's speed and the force, and the balls run on real physics — elastic collisions, cushions that give back part of the speed, rolling resistance from the cloth — each one rolling so its letter turns over the top and comes back round. After the spread has lain still they are lifted and glide back to their slots along straight lines in reading order, a cascade apart on springs.glide, rolling upright so the letters land facing the reader. A transparent button gives the keyboard Enter or Space to break from the left and Escape to re-rack.
Coldbrook social club · thursday league
Game night
racked · sweep through or press Enter
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/break-shot
Props
- children / text
- string
- default —
- The headline, as children or a prop.
- as
- "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
- default "p"
- The element that carries the headline.
- force
- number
- default 1
- How hard the cue ball hits, as a multiple of a firm shot.
- friction
- number
- default 0.45
- How much the cloth slows the balls, 0 (slick, they run and bank) to 1 (heavy nap).
- returnDelay
- number
- default 1600
- How long the spread lies once the last ball stops, before the re-rack, ms.
- bounce
- number
- default 0.72
- How lively the cushions are, 0 to 1.
- palette
- string[]
- default a restrained lacquer set
- Ball colours, cycled along the headline; any CSS colours.
- cloth
- "green" | "blue" | "claret"
- default "green"
- The cloth.
- size
- number
- default 1.3
- Ball diameter, em.
- cue
- boolean
- default true
- A faint cue ball rides the pointer over the cloth.
- interactive
- boolean
- default true
- The pointer, a touch and the keys play shots.
- sound
- boolean
- default false
- Clacks for the shots the visitor plays.
- disabled
- boolean
- default false
- Racked and still: nothing plays.
- onBreak
- () => void
- default —
- A shot scattered the rack.
- onRack
- () => void
- default —
- Every ball is back in the rack.
- className
- string
- default —
- Size: the table is drawn in em.
| Prop | Type | Default | Description |
|---|---|---|---|
| children / text | string | — | The headline, as children or a prop. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "p" | The element that carries the headline. |
| force | number | 1 | How hard the cue ball hits, as a multiple of a firm shot. |
| friction | number | 0.45 | How much the cloth slows the balls, 0 (slick, they run and bank) to 1 (heavy nap). |
| returnDelay | number | 1600 | How long the spread lies once the last ball stops, before the re-rack, ms. |
| bounce | number | 0.72 | How lively the cushions are, 0 to 1. |
| palette | string[] | a restrained lacquer set | Ball colours, cycled along the headline; any CSS colours. |
| cloth | "green" | "blue" | "claret" | "green" | The cloth. |
| size | number | 1.3 | Ball diameter, em. |
| cue | boolean | true | A faint cue ball rides the pointer over the cloth. |
| interactive | boolean | true | The pointer, a touch and the keys play shots. |
| sound | boolean | false | Clacks for the shots the visitor plays. |
| disabled | boolean | false | Racked and still: nothing plays. |
| onBreak | () => void | — | A shot scattered the rack. |
| onRack | () => void | — | Every ball is back in the rack. |
| className | string | — | Size: the table is drawn in em. |