Scenesstable

Ricochet

Short text built from destructible pixel blocks, with breakout or shooter play.

404

knock the text apart

Customize

Scenewhat gets knocked apart

Texttext

Gamegame

Variantvariant

Pixel size26pixelSize

Breakoutball and bonuses

Ball speed1.00speed

Power-upspowerUps

Drop chance0.050powerUpChance

Shootership and bolts

Shot speed1.00shotSpeed

Fire rate5fireRate

Ship speed1.00shipSpeed

Lookcolours and start-up

Blockscolor

BallballColor

Paddle or shippaddleColor

Auto startautoStart

Hide cursorhideCursor

TSX

import { Ricochet } from "zerogravity"

<Ricochet />

Generated from the controls above. Only props that differ from their defaults are shown.

18 documented props on Ricochet
Property	Type	Default	Description
`text`	`string`	`"404"`	Text.
`game`	`"breakout" \| "shooter"`	`"breakout"`	Game.
`variant`	`"neon" \| "mono" \| "soft"`	`"neon"`	Variant.
`pixelSize`	`number`	`26`	Pixel size. Range 8 to 48.
`speed`	`number`	`1`	Ball speed. Range 0.4 to 2.5.
`powerUps`	`boolean`	`true`	Power-ups.
`powerUpChance`	`number`	`0.05`	Drop chance. Range 0 to 0.5.
`shotSpeed`	`number`	`1`	Shot speed. Range 0.4 to 3.
`fireRate`	`number`	`5`	Fire rate. Range 1 to 14.
`shipSpeed`	`number`	`1`	Ship speed. Range 0.4 to 3.
`color`	`string`	`"#f6a94b"`	Blocks.
`ballColor`	`string`	`"#fdf3e3"`	Ball.
`paddleColor`	`string`	`"#6fd6e8"`	Paddle or ship.
`autoStart`	`boolean`	`true`	Auto start.
`hideCursor`	`boolean`	`true`	Hide cursor.
`onClear`	`() => void`	`—`	Fires once, when the last block is destroyed.
`interactive`	`boolean`	`true`	Pointer, keyboard and focus handling.
`respectReducedMotion`	`boolean`	`true`	Render the text standing still when the user asks for less motion.

0 external runtime dependencies

Ships with nothing but React.