Animated Weather Cards for React

What are ExodeUI animated weather cards?

They are 25 ready-made weather widgets for React and Next.js, each built around one climate and one visual style, from a neon rain card for Tokyo to a frost crystal for Yakutsk. Every colour, label, number and motion setting is a runtime input, so you can connect a card to a weather API and restyle it without editing the file. Each card is a small .bexode file that also opens in the ExodeUI editor as an editable .exode file.

Customize colours, backgrounds and motion at runtime

Pass values to the inputs prop and the card updates while it runs. Colours cross-fade, the temperature counts to its new value, and changing the city or condition plays a short sheen. The same input names work in the customizer above and in the ExodeUI studio.

import { ExodeUICanvas } from 'exodeui';

export function WeatherCard({ weather }) {
  return (
    <ExodeUICanvas
      src="/weather-cards/files/03-tokyo-neon.bexode"
      autoPlay
      style={{ width: 360, height: 420 }}
      inputs={{
        city: weather.city,          // text
        tempC: weather.tempC,        // counts to the new value
        condition: weather.summary,
        unit: 'F',                   // 'C' or 'F'
        neonColor: '#00ff9c',        // every colour is an input
        pageMode: 'none'             // 'none' | 'solid' | 'gradient'
      }}
    />
  );
}

Shared inputs on every card: city, tempC, unit, all colours, pageMode, pageTop, speed, intensity, introStyle, introDuration, float, tilt, lift, interactive (turns mouse interaction off) and colorTween, plus the replay and tap triggers.

All 25 weather card designs

How to add a weather card to React or Next.js

1. Open a card above and set its text, colours and motion, or keep the defaults.
2. Download the .bexode file (or the customized .exode) and put it in your public folder.
3. Install the runtime with npm i exodeui.
4. Render it with ExodeUICanvas and pass your weather data as inputs.

Frequently asked questions

Are these weather cards free?

Yes. All 25 cards can be previewed, customized and downloaded without paying, and ExodeUI has a free Community plan.

How do I connect a weather card to a weather API?

Each card reads its text and numbers from inputs such as city, tempC and condition. Fetch the forecast in your app and pass the values to the inputs prop. When a value changes the card animates to it, so you do not need to reload anything.

Can I customize colours and backgrounds at runtime?

Yes. Every colour in every card is a runtime input, and so is the page background (none, solid or gradient). The same names work in the customizer, in the ExodeUI studio and in your code.

What animation does each card have?

Each card has its own weather motion, such as rain, snow, fog, aurora or a radar sweep, plus an entrance (rise, drop, zoom, swing or slide), an idle float, hover lift and tilt, and a tap action. Speed and particle amount are inputs too.

What is the difference between .exode and .bexode?

.exode is the editable JSON file you open in ExodeUI. .bexode is the compiled file you ship with a runtime; it is about a quarter of the size and keeps the same inputs and motion.

Which frameworks are supported?

React and Next.js through the exodeui package, plus runtimes for Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter.

More from ExodeUI