Scenes & illustrations
Morphing flower shapes
Tap the petals and the flower remixes itself into a new pattern — three arrangements, each morphing smoothly into the next while the whole bloom slowly turns. It shows off shape morphing, and it makes a delightful empty state or loading moment.
- 2.5 KB compiled
- 410 × 310 artboard
- 1 input
- 9 runtimes
How it works
- A Trigger input, remix, advances through Pattern 1 → 2 → 3 → 1.
- Each transition morphs petal shapes and positions rather than cross-fading, so the motion stays continuous.
- An Idle layer adds a slow turn and pulse so it is never fully still.
| Input | Type | What it does |
|---|---|---|
remix | Trigger | Moves to the next petal pattern. |
When to use it
- Empty states and success screens
- Loading and processing moments
- Brand illustrations on landing pages
Accessibility
It is decorative — mark it aria-hidden or give it a short label, and pause the idle turn for reduced-motion users.
Also searched as: shape morph animation · flower animation · interactive illustration
Use it in your app
One component, one file. Pick your stack:
import { ExodeUICanvas } from 'exodeui';
export function MorphingFlowerShapes() {
return (
<ExodeUICanvas
src="/gallery-02-change-of-shape.bexode"
autoPlay
onReady={(engine) => {
// drive it from your own UI:
// engine.fireTrigger('remix');
}}
/>
);
}React loads the compact .bexode; the other runtimes load the .exode JSON source — both come from the same design.
Questions
Is this a GIF or video?
Neither. It is a 2.5 KB Exode file drawn live, so it stays sharp at any size.
Can I add a fourth pattern?
Yes — add a state and a transition in the state machine.
More scenes & illustrations
Make it yours in ExodeUI.
Change the colours, the timing, the logic — then ship the same file.