Animated spring breeze weather widget for React and Next.js, washi paper style. Every colour, text and motion setting is a runtime input.
Updated October 2026
The Kyoto Sakura card shows spring breeze in Kyoto with a washi paper look. It animates breathing blossoms and falling petals, and a tap sends a gust of petals. Like every ExodeUI weather card, it rises in on load, floats gently, tilts toward the cursor and counts to a new temperature when your data changes.
These 30 inputs, plus the replay and tap triggers, can be set from the customizer above, from the ExodeUI studio, or from your code while the card is running.
| Input | What it changes | Type |
|---|---|---|
| city | City | Text |
| condition | Condition | Text |
| tempC | Temperature (°C) | Number |
| unit | Unit | Choice |
| paperColor | Paper | Colour |
| branchColor | Branch | Colour |
| blossomA | Blossom 1 | Colour |
| blossomB | Blossom 2 | Colour |
| petalColor | Petals | Colour |
| stampColor | Stamp | Colour |
| inkColor | Ink | Colour |
| season | Season | Text |
| stampChar | Stamp character | Text |
| vertTop | Vertical character 1 | Text |
| vertBottom | Vertical character 2 | Text |
| radius | Corner radius | Number |
| intensity | Particle intensity | Number |
| lift | Hover lift | Number |
| interactive | Mouse interaction | On/off |
| tilt | Hover tilt (deg, 0 = off) | Number |
| press | Press squish | Number |
| float | Idle float (px) | Number |
| speed | Animation speed | Number |
| intro | Entrance animation | On/off |
| introStyle | Entrance style | Choice |
| introDuration | Entrance duration (s) | Number |
| colorTween | Colour change fade (s) | Number |
| pageMode | Page background | Choice |
| pageTop | Page colour | Colour |
| pageBottom | Page gradient end | Colour |
npm i exodeui.ExodeUICanvas and pass your weather data as inputs.import { ExodeUICanvas } from 'exodeui';
export function KyotoSakuraWeatherCard({ weather }) {
return (
<ExodeUICanvas
src="/weather-cards/files/11-kyoto-sakura.bexode"
autoPlay
style={{ width: 360, height: 420 }}
inputs={{ city: weather.city, tempC: weather.tempC, condition: weather.summary }}
/>
);
}