Weather Card
Conditions with iconography that never stops — rays turn, clouds drift, drops and flakes fall on their own loops.
SceneScenes
$ npx remotion-ui@latest add weather-cardThe temperature counts up, the forecast row arrives day by day, and the iconography runs continuously underneath all of it — which means the card is never a still image, and needs no exit to stay alive in a loop.
Every moving part is a pure function of the frame: frame * rate wrapped into
its own period, with each ray, drop or flake offset by its own index. Nothing
accumulates state between frames, so a frame rendered out of order on a render
farm is identical to the same frame rendered in sequence. That is a hard
requirement in Remotion, not a stylistic choice — anything driven by a
useRef counter will drift.
Four conditions ship: sun, cloud, rain and snow. Each forecast column
runs its own clock, offset by nine frames per column, so the row never becomes
five glyphs moving in lockstep.
The degree symbol takes accentColor while the glyph takes the condition
colour. They are deliberately separate — the brand mark should not change hue
when the weather does.
Every moving part is a pure function of the frame — frame × rate wrapped into its own period, with per-particle offsets from the particle's index — so a frame rendered out of order on a render farm is identical to the same frame rendered in sequence. Each forecast column runs its own clock nine frames apart, so the row is never five glyphs in lockstep. The card needs no exit to stay alive in a loop.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/weather-card- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: place, detail, temperature, unit, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { WeatherCard } from "@/remotion/scenes/weather-card";
<WeatherCard
place="Lisbon"
temperature={24}
condition="sun"
conditionLabel="Clear, light breeze"
forecast={[
{ label: "Sat", condition: "sun", high: 24, low: 14 },
{ label: "Sun", condition: "cloud", high: 22, low: 13 },
{ label: "Mon", condition: "rain", high: 18, low: 12 },
]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| place | string | "Lisbon" | Place name across the top. |
| detail | string | "Saturday · 14:20" | Line under the place — a time, a date, a feels-like. |
| temperature | number | 24 | The temperature the card counts up to. |
| unit | string | "°" | Degree suffix, used on the headline and the forecast. |
| condition | "sun" | "cloud" | "rain" | "snow" | "sun" | Which glyph runs beside the headline. |
| conditionLabel | string | "Clear, light breeze" | Words under the temperature. |
| forecast | ForecastDay[] | 5 sample days | Label, condition, high and low per column. |
| temperatureAtSeconds | number | 0.4 | Second the temperature starts counting. |
| countSeconds | number | 1 | How long the count takes. |
| forecastAtSeconds | number | 1.15 | Second the first forecast day arrives. |
| staggerSeconds | number | 0.2 | Seconds between forecast days. |
| holdSeconds | number | - | Seconds the card holds before it retreats. Omit to leave it up — the iconography keeps moving either way. |
| accentColor | string | "#E8B86D" | The degree symbol. Kept off the condition colour on purpose. |
| backgroundColor | string | - | Page behind the card. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |