Menus & navigation
Origami fan menu
Tap the folded card and five paper cards fan out like a hand of origami. The motion is soft and tactile, which makes it a good match for stationery, craft, education and lifestyle brands.
- 6.1 KB compiled
- 420 × 360 artboard
- 1 input
- 9 runtimes
Live
How it works
- isOpen moves between Closed and Open.
- Cards rotate out from a shared fold, creating the fan.
- Each card (Crane, Sun, Leaf, Drop, Flower) has its own click animation.
| Input | Type | What it does |
|---|---|---|
isOpen | Boolean | Fans the cards out (true) or folds them away (false). |
When to use it
- Lifestyle, craft and stationery shops
- Kids and education apps
- Category pickers in mobile apps
Accessibility
Provide the five choices as real buttons for keyboard users; the fan can stay purely visual.
Also searched as: fan menu · card fan animation · paper menu
Use it in your app
One component, one file. Pick your stack:
import { ExodeUICanvas } from 'exodeui';
export function OrigamiFanMenu() {
return (
<ExodeUICanvas
src="/origami-menu.bexode"
autoPlay
onReady={(engine) => {
// drive it from your own UI:
// engine.setInputBool('isOpen', true);
}}
/>
);
}React loads the compact .bexode; the other runtimes load the .exode JSON source — both come from the same design.
Questions
Can I add more than five cards?
Yes. Duplicate a card in ExodeUI and adjust its rotation in the Open animation.
Does it work on mobile?
Yes — it is a 420×360 artboard that scales to fit its container.
More menus & navigation
Make it yours in ExodeUI.
Change the colours, the timing, the logic — then ship the same file.