# Kerb

A crossing game on a dot-matrix LCD handheld: hop a hedgehog over five lanes of traffic, then over the river on drifting logs, to the five burrows in the hedge.

Object · With a Pass · https://tactileui.dev/objects/kerb

> The code and styling for this object come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Use it

With a Pass, install it with npx shadcn add @tactile/kerb (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/kerb/.

Load the stylesheet as well as the module, or it renders unstyled: tactile/kerb/kerb.css. In a bundler such as Vite, import each CSS file next to the module import; in plain HTML, link it.

Then new Kerb(element, options) from tactile/kerb/kerb.mjs. Every option has a default; example.html in the folder shows it running. The sample copy (headings, labels, figures) is placeholder: replace it with the page's own.

## Anatomy

Shared handheld case, Dot matrix lcd, Liquid crystal response, Reflector shadow, Fixed step lanes, Dot exact collision, Log riding, Buffered moves, Lookahead pilot, Seven segment digits, Token driven materials, Pointerdown keys, Synthesised sound, Scale as an object

## Usage notes

A game you could hold, on a screen that reads as real glass. Take a hedgehog from the kerb over five lanes of traffic (a lorry, a car, a van, a tractor, each lane at its own speed and its own way), onto the verge, then over the river on the drifting logs to the five burrows in the hedge. On a log it rides it; a log that carries it off the screen takes it under. Fill the five burrows to clear a level, and everything runs faster on the next. Every move is one cell a press with a short hop, and every hit is judged on the dots the screen shows, forgiving by a few of them. While it waits for Start the screen plays a demo crossing of its own.

## Options

| Option | Type | Description |
| - | - | - |
| sound | boolean | The switch on the case, off to begin with. On, a hop ticks, a log knocks, traffic thumps, the river splashes and a burrow chimes, once the visitor has touched the page (a browser allows sound only after a press). Their own setting is kept on their device. |
| label | text | What a screen reader calls the case. |

## Methods

- hooks
- update
- destroy

## States

1. **How to play**: Hop the hedgehog from the kerb at the bottom to a free burrow in the hedge at the top. Traffic strikes it; the river takes it unless it is on a log; a log carries it with the current, and off the side of the screen is lost. Into the hedge beside a burrow, or into one already taken, is lost too. Three lives and forty seconds a crossing. Ten points for every lane further than it has been on this crossing, fifty for a burrow and two more for each second to spare, two hundred and fifty for clearing a level. Five burrows filled clear the level and everything runs a fifth faster.
2. **Keys**: The arrow keys or W A S D hop one cell a press (a key held down does not repeat; a press during a hop is kept and played when it lands). Space or Enter starts a game and pauses it; P pauses and carries on; Esc pauses; F fills the screen. The D-pad on the case does what the arrows do. On a phone, swipe anywhere on the screen to hop that way, or tap it to hop forward; a tap starts a game. Sound is off until the switch is on.
3. **Made of**: The kit's Panel (the case), LCD (the dot-matrix window's glass and ink, and the segment LCD with the score, the level and the best in seven segments, a bar of twenty segments for the time and three printed hedgehogs for the lives), Lamp (playing, paused, lost), Key (the D-pad and the primary Start key), Tray (the D-pad's well), Switch (Sound) and Grille; the dots drawn on a canvas from the finish's own tokens.
4. **Waiting**: The screen plays a demo: a careful pilot takes a hedgehog across while the traffic and the river run. The segment LCD shows the best and a full time bar, the status line says Press start. Under reduced motion the screen holds still.
5. **Crossing**: The lamp is green. Each press hops the hedgehog a cell, nose first, legs out mid-hop; the time bar runs down and its last quarter blinks; the score counts every lane further. On a log the hedgehog rides it dot for dot.
6. **Lost**: The lamp goes red and the status line says why: Hit (flattened where it stood), Splash or Swept (rings on the water), Hedge or Time (rolled up). A printed hedgehog goes out, and after a moment the next one starts from the kerb.
7. **Home**: A burrow taken shows the hedgehog rolled up inside it; a chime, the points said aloud. With all five full they blink, and LEVEL and the next number slide in over the verge before the lanes run faster.
8. **Paused**: The lamp is amber, PAUSE is framed over the verge and nothing moves; the screen stops drawing once the glass has settled. A hidden tab, or the case scrolled out of sight, pauses a crossing too.
9. **Game over**: The last hedgehog goes out, the lamp stays red and GAME OVER is framed over the verge while the lanes run on; the best score is kept on this device. Start, a key or a tap plays again.
10. **Sound**: Off until the switch is turned on, and silent until the page is touched. Synthesised: a short tick for a hop, a knock onto a log, a thump for traffic, a splash, a chime for a burrow, a run up the scale for a level, a tick for each of the last five seconds.
11. **Reduced motion**: The hedgehog is where it lands as soon as the key is pressed, with no hop; the level's banner is simply there rather than sliding in; nothing blinks; the dots change at once rather than fading; and the screen holds still while it waits for Start. The traffic and the river still run while a game is played: they are the game.
12. **Twelve finishes, two volumes**: The case reads the finish and volume tokens; the dot window is the kit's LCD glass and its dots are the finish's LCD ink, so the grey-green reflective panel of Aluminium, the amber backlit one of Night and the dark glass with light dots of Phosphor each draw their own. Quiet takes away the dots' cast shadow and the lamp's sheen.

## How it works

Original. The case is the library's shared handheld (originals/components/shared/handheld), drawn from the kit's parts at one size and scaled as an object. The rules, the pilot and the dot-matrix screen are the game's own (rules.mjs, screen.mjs). It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.