Magic Bento
A responsive instrument grid with shared pointer light, interruptible waves, and optional canvas stars.
West Head passage board
Illustrative readings for the 17:20 departure.
Tide at West HeadFlood tide toward a 2.1 m high at 19:12.1.8 mFlood tideHigh 19:12
Wind on the barCrosswind eases after the headland.18 knWNW, gusts 24 kn
17:20 departurePassage to North HavenEight miles through the inner channel. Follow the eastern marks past Middle Ground, clear the western point, then call North Haven on harbour radio before turning into the berth.Planning sketch; check the official chart before departure.Engine checks completeHarbour radio 16Berth confirmed
Harbour logToday’s checks and observations at West Head.First tide board0.6 mCoastwatch roundClearBar observation0.4 mEngine checksCompleteNorth Haven berthConfirmedNext entryDeparture, 17:20
Sea stateSheltered water inside the channel.0.6 mShort NW swell7 s period
Last lightSun sets at 19:42 this evening.19:42Arrive before dusk
Move across the board to wake neighboring instruments. Press and release a card to send a light front from that point. The default cards are readings, not actions; enable the harbour-log link to inspect native keyboard behavior.
Tide readings
| Time | Height |
|---|---|
| 06:00 | 0.6 m |
| 07:00 | 0.7 m |
| 08:00 | 0.8 m |
| 09:00 | 1.0 m |
| 10:00 | 1.1 m |
| 11:00 | 1.2 m |
| 12:00 | 1.3 m |
| 13:00 | 1.4 m |
| 14:00 | 1.5 m |
| 15:00 | 1.6 m |
| 16:00 | 1.7 m |
| 17:00 | 1.8 m |
Harbour log record
| Time | Entry | Reading |
|---|---|---|
| 06:10 | First tide board | 0.6 m |
| 09:25 | Coastwatch round | Clear |
| 12:40 | Bar observation | 0.4 m |
| 16:50 | Engine checks | Complete |
| 17:05 | North Haven berth | Confirmed |
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type AnimationEvent as ReactAnimationEvent,8 type CSSProperties,9 type FocusEvent,10 type HTMLAttributes,11 type MouseEvent,12 type PointerEvent as ReactPointerEvent,13 type ReactNode,14} from "react";15import {16 createBentoSimulation,17 resolveBentoColumns,18 startBentoWave,19 stepBentoSimulation,20 syncBentoSimulation,21 type BentoBounds,22 type BentoRect,23} from "./magicBentoEngine";24 25export type MagicBentoItem = {26 id?: string;27 label?: ReactNode;28 title: ReactNode;