Sections / Gems / Generative backgrounds
Isobars
A slow weather map in your brand colours, as a background for a hero or a pricing band. Pressure systems drift east, deepen and fill in; the isobars between them are traced live, with labelled highs and lows riding on the cells and values on the heavier lines. The pointer drags a shallow trough through the field. Plain 2D canvas, no dependencies.
- Kind
- Generative backgrounds
- Interaction
- autoplay · pointer trough · generative · canvas · pause button · seeded
- Dependencies
- None
- Licence
- Free for personal and commercial sites; do not resell the gem itself
Formats
- Webflow (native)
- Figma (layers)
- Framer component
- HTML
- Prompts for Claude Code, Cursor, Lovable, v0, Bolt
Copy to Webflow pastes a native section with the gem in an Embed inside it. Copy to Figma pastes a frame of its best moment, text and controls as layers. Copy to Framer pastes a component with its options as controls. HTML is one self-contained snippet. Each prompt (Claude Code, Cursor, Lovable, v0, Bolt) carries the exact files, so your agent installs this gem, not a lookalike. With the MCP server, ask your agent for get_section("isobars").
Behaviour and accessibility
- The same seed always draws the same weather, so the map looks the same on every visit and every device.
- A labelled pause button (aria-pressed) stops the drift for anyone who wants stillness; the map itself is decorative and hidden from screen readers.
- Drawing stops entirely off screen or in a background tab, and the frame cost stays around a millisecond at 1440 px.
- With prefers-reduced-motion: one still map, no drift and no pointer trough.
- Anything you put inside the element (a headline, buttons) sits above the map in an .isb-content layer.
Options
| Option | Type | Default | What |
|---|---|---|---|
palette | string[] | 5 built in | Fill colours from the deepest low to the highest high. Two or more. |
lineColor | string | "rgba(226, 232, 240, 0.42)" | Colour of the isobar lines. |
labelColor | string | "#eef2f6" | Colour of the H and L labels and the pressure values. |
cells | number | 7 | Number of pressure systems on the map at once. |
spacing | number | 4 | hPa between neighbouring isobars. |
speed | number | 1 | Time scale: 1 is a slow drift, 2 twice as fast. |
labels | boolean | true | Draw the H and L markers with their pressure, and values on the heavier isobars. |
pointer | boolean | true | The pointer drags a shallow trough through the field (mouse and pen). |
controls | boolean | true | Show the pause button and the scale note in the corner. |
seed | number | 7 | Seed for the weather: the same seed gives the same map. |
onPause | (paused: boolean) => void | Called when the map is paused or played with the button or the handle. |
