Pro
Weather scene
The sky behind a forecast, drawn in the ink of the theme: a slow sun with turning rays, clouds that drift in layers, rain in two depths, snow that sways, and a storm's rain with an occasional soft flash of lightning. A change of condition blends across.
pnpm dlx shadcn@latest add @caliper/weather-sceneWhen to use
Use it for
- Weather, travel and event apps where the conditions set the mood.
- A dashboard tile for a site's local conditions.
Skip it when
- Behind long text.
- Showing forecasts; it is a mood, not data.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Gentle lightning
- A faint double flash at most once every five seconds, far below flash limits; the canvas is an image named by the condition.
- Blends
- Each layer's strength eases toward the new condition, so rain thins into snow instead of cutting.
Styling
- Ink, not colour
- Everything is drawn in the theme's text colour at low strength, so it suits light and dark and never fights the card on it.
Installation
pnpm dlx shadcn@latest add @caliper/weather-scene
Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { WeatherScene } from "@/components/ui/weather-scene"
The worked example comes with Pro
The 44-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
WeatherScene
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes img semantics, with aria-label and aria-pressed kept in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.
Related
- Flow fieldFine ink strands drifting through a slowly turning current, like iron filings or wind on a weather map. The pointer stirs an eddy that the strands bend around. Content placed inside sits above it.
- Fluid inkInk dropped in still water. The pointer stirs it into curling trails that swirl, thin out and fade, and a slow plume rises on its own so there is always something drifting. Content placed inside sits above it.
- Shader backgroundA GPU-drawn animated background.