Activity terrainPro
A 3D terrain of hourly activity you can orbit, zoom, fly into and flatten into a heatmap.
The shape of your week
Hourly sessions, deploys and errors for Sep 14 to 20, 2026, in workspace time.
Drag to orbit, pinch to zoom, click a bar to fly in.Swipe sideways to orbit, tap a bar to fly in. Arrow keys move between hours and days, Enter focuses a bar, Shift with arrow keys orbits, plus and minus zoom, Escape clears.
| Day | 00:00 | 01:00 | 02:00 | 03:00 | 04:00 | 05:00 | 06:00 | 07:00 | 08:00 | 09:00 | 10:00 | 11:00 | 12:00 | 13:00 | 14:00 | 15:00 | 16:00 | 17:00 | 18:00 | 19:00 | 20:00 | 21:00 | 22:00 | 23:00 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Monday | 186 | 183 | 189 | 183 | 184 | 187 | 251 | 490 | 1,305 | 2,827 | 3,964 | 4,119 | 3,666 | 3,635 | 4,243 | 4,245 | 3,200 | 2,106 | 1,112 | 800 | 937 | 960 | 698 | 360 |
| Tuesday | 193 | 206 | 193 | 205 | 202 | 206 | 259 | 511 | 1,385 | 3,007 | 4,537 | 4,167 | 3,856 | 4,081 | 4,499 | 4,524 | 3,525 | 2,349 | 1,228 | 898 | 967 | 1,106 | 748 | 429 |
| Wednesday | 218 | 198 | 200 | 217 | 202 | 227 | 262 | 532 | 1,551 | 3,237 | 4,216 | 4,545 | 3,627 | 3,843 | 4,694 | 4,745 | 3,665 | 2,294 | 1,198 | 974 | 1,096 | 1,113 | 766 | 399 |
| Thursday | 197 | 191 | 201 | 193 | 205 | 212 | 262 | 476 | 1,447 | 3,038 | 4,136 | 4,196 | 3,438 | 3,671 | 4,679 | 4,442 | 3,226 | 2,225 | 1,189 | 913 | 969 | 1,055 | 693 | 398 |
| Friday | 176 | 177 | 164 | 182 | 176 | 169 | 231 | 400 | 1,183 | 2,696 | 3,620 | 3,827 | 3,172 | 3,289 | 3,783 | 3,972 | 3,036 | 1,856 | 1,102 | 793 | 854 | 856 | 606 | 364 |
| Saturday | 162 | 158 | 172 | 172 | 164 | 186 | 210 | 291 | 400 | 574 | 711 | 909 | 1,007 | 1,156 | 1,067 | 950 | 752 | 619 | 615 | 737 | 832 | 794 | 614 | 410 |
| Sunday | 145 | 145 | 150 | 152 | 151 | 168 | 189 | 241 | 339 | 487 | 622 | 839 | 970 | 1,015 | 866 | 761 | 626 | 569 | 573 | 659 | 744 | 663 | 522 | 329 |
- Analytics or operations pages showing when a product is busiest across a week.
- Showcase dashboards where a 3D view of a 7 by 24 grid adds impact, with a flat heatmap fallback.
- Use activity-heatmap for a plain 2D grid that is easier to read.
- Use bar-chart for totals by day or hour.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { ActivityTerrain } from 'animui/activity-terrain';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this on an analytics or operations page to show when a product is busiest. Replace the seeded week in terrain-data.ts with hourly counts from your events warehouse; the camera, springs and summaries follow the data.
import { ActivityTerrain } from "animui/activity-terrain"; export default function UsagePatterns() { return ( <section> <ActivityTerrain /> </section> );}ActivityTerrain
A canvas 3D terrain of hourly activity across a week that can orbit, zoom, fly to a cell and flatten into a heatmap. Takes no props; metrics and the hourly grid are sample data in terrain-data.ts.
No props.
- Arrow keys
- Moves the highlighted day and hour.
- Shift+Arrow keys
- Orbits the camera.
- HomeorEnd
- Jumps to the first or last hour of the day.
- +or-
- Zooms in or out.
- EnterorSpace
- Flies to the highlighted hour.
- Escape
- Returns to the whole week, then clears the highlight.
- The stage is a focusable group with a keyboard hint, and the canvas has a text summary as its label.
- Peak hours are aria-pressed buttons that fly to or leave the hour.
- A polite live region reads the highlighted hour's value.
- Columns rise in a wave on load and when the metric changes; camera moves use spring physics with momentum on drag.
- Flattening to a heatmap springs the camera to a top view.
- The engine watches prefers-reduced-motion and snaps the camera and heights with no wave.
- Below an 880px container the stats move under the plot; below 560px the plot is 280px tall and the camera starts from a steeper angle.
- Touch devices swipe sideways to orbit while vertical swipes scroll the page, and the hint text switches for coarse pointers.
- Two-finger pinch zooms on touch.
- Draws on a 2D canvas with devicePixelRatio capped at 2.
- The requestAnimationFrame loop pauses offscreen via IntersectionObserver and in hidden tabs, and idles when nothing moves.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on an analytics or operations page to show when a product is busiest across a week.
- Replace METRICS in terrain-data.ts with hourly counts from your events warehouse; keep the 7 by 24 shape.
The full library index for assistants is at /llms.txt.