Every tile is live
Interactive UI motion you can try right here: buttons with real states, gestures with physics, menus, mascot moments, widgets and whole pages. Each example is a real .exode file running live, with its own state machine. Point at one to play it, then open the same file in ExodeUI.
Updated October 2026 · 28 live examples
Kip follows your typing and covers its eyes for the password.
Text focus drives the look · password covers the eyes
A liquid pill glides between five tabs.
State machine · input selected (Number)
A heart with a jelly bounce, a +1 pop and a live counter.
State machine · input liked (Trigger)
Drag the list down; it stretches, springs back and refreshes.
Drag gesture · spring release
A Tokyo weather card with flickering neon and rain.
Runtime inputs · every colour, text and motion setting
Five options launch into orbit around a glowing sun.
State machine · input isOpen (Boolean)
A cloth banner that hangs, sways and stretches where you pull.
Cloth physics · pointer drag
Every star changes Kip’s mood, from heartbroken to thrilled.
Hovered star blends five moods
Live activity rings on a watch face; click to change it.
Click cycles watch faces
Real idle, sending and sent states with a burst of sparks.
State machine · input sent (Trigger)
A pricing page with a monthly and yearly flip.
Toggle state · hover states
Gold sunburst, wind ribbons and a tumbling newspaper.
Runtime inputs · every colour, text and motion setting
A 3-2-1 countdown and lift-off; click again to land.
State machine · input launched (Trigger)
The send button moves from Idle to Sending to Sent on one trigger input, and the liquid tab bar has five states driven by a single number. Transitions are designed in the editor, so your code only says which state it wants.
See the send buttonPull to refresh stretches and springs back, the fabric banner sways where you grab it, and the mood slider blends three faces from the pointer position. The feel is set in the file and stays the same in production.
Browse the Motion UI libraryEvery weather card exposes its city, temperature and every colour as runtime inputs. Pass live data and the card animates to it: colours cross-fade and the temperature counts to the new value.
Customize a weather card
Open in ExodeUIimport { useRef } from 'react';
import { ExodeUICanvas } from 'exodeui';
// The send button from this page, fired when your form submits.
export function MessageForm({ onSend }) {
const engine = useRef(null);
const submit = async (e) => {
e.preventDefault();
engine.current?.updateInput('sent', true); // Idle → Sending → Sent
await onSend(new FormData(e.currentTarget));
};
return (
<form onSubmit={submit}>
<textarea name="message" />
<button type="submit">Send</button>
<ExodeUICanvas
src="/exode/gallery-04-send-off.bexode"
autoPlay
onReady={(e) => (engine.current = e)}
style={{ width: 200, height: 150 }}
/>
</form>
);
}