Weather Card
Conditions with iconography that never stops. Rays turn, clouds drift, drops and flakes fall on their own loops.
Scene
$ 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. The motion is real but it is
small: a forecast glyph is a few pixels tall, so the drift alone will not carry
a tile. Pass holdSeconds when the card stands on its own and it leaves; omit
it inside a TransitionSeries, where the transition covers the tail.
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 motion is real but small (a forecast glyph is only a few pixels tall), so pass holdSeconds when the card stands on its own.
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.4 | Second the first forecast day arrives. |
| staggerSeconds | number | 0.34 | 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. |