Component gallery

40 designs. Open any of them.

20 components, 10 app designs and 10 desktop software designs, each one a real .exode file. Hover to play, then open it in the editor and make it yours.

Browse the gallery React SDK Docs

Gallery

Play it here. Remix it in the editor.

Every card runs the real file. Open in ExodeUI loads it into the editor with its states, triggers and layers intact.

Tap the heart

Buttons

Like Burst

A heart that pops, sparks and counts up.

Open in ExodeUI .exode

Hover to play

Toggles

Day / Night Switch

The sun rolls over and the page goes dark.

Open in ExodeUI .exode

Hover to play

Buttons

Add to Cart

A cart rolls in, catches the item and rolls off.

Open in ExodeUI .exode

Hover to play

Buttons

Download Progress

The button folds into a progress ring and back.

Open in ExodeUI .exode

Hover to play

Navigation

Segmented Tabs

A sliding indicator that morphs the data below.

Open in ExodeUI .exode

Hover to play

Inputs

Star Rating

Stars fill in sequence and the verdict follows.

Open in ExodeUI .exode

Hover to play

Feedback

Notification Bell

The bell rings, the badge pops and a toast counts down.

Open in ExodeUI .exode

Hover to play

App screens

Music Player

Play morphs to pause and the equaliser wakes up.

Open in ExodeUI .exode

Hover to play

Navigation

FAQ Accordion

Rows open one at a time and the list glides to fit.

Open in ExodeUI .exode

Hover to play

Cards

Card Flip

A payment card that turns over to show its back.

Open in ExodeUI .exode

Hover to play

Physics

Physics Tags

Interest tags that fall, pile up and can be tossed.

Open in ExodeUI .exode

Hover to play

Data

Chart Tooltip

Bars grow in and a tooltip follows your pointer.

Open in ExodeUI .exode

Hover to play

Data

Activity Rings

Three goals close in sequence as the numbers count.

Open in ExodeUI .exode

Hover to play

App screens

Chat Send

Your message flies in, they type, a reply pops up.

Open in ExodeUI .exode

Hover to play

Navigation

Menu Drawer

The burger folds into a cross as a drawer slides in.

Open in ExodeUI .exode

Hover to play

Inputs

Todo Checklist

Tasks tick off with a drawn check and a strike.

Open in ExodeUI .exode

Hover to play

Cards

Swipe Stack

Like or pass, and the deck deals the next card.

Open in ExodeUI .exode

Hover to play

Feedback

Copy Code

Copy swaps to a drawn check with a tooltip.

Open in ExodeUI .exode

Hover to play

Inputs

Search Expand

A button that stretches into a search with results.

Open in ExodeUI .exode

Hover to play

App screens

Order Tracker

The courier drives the route as the ETA counts down.

Open in ExodeUI .exode

App designs

Ten apps. Ten different looks.

Neo-brutalist, glass, editorial, retro terminal, clay, Swiss, Y2K chrome, dark luxury, organic and sport. Each phone screen is a working .exode file you can tap through and open.

Tap a habit

Neo-brutalist

Streak

A habit tracker with thick borders, hard shadows and loud blocks.

Open in ExodeUI .exode

Hover to play

Glassmorphism

Lumen Home

Smart-home tiles of frosted glass over drifting colour.

Open in ExodeUI .exode

Hover to play

Editorial

The Long Read

A serif reading app with a drop cap and a night mode.

Open in ExodeUI .exode

Hover to play

Retro terminal

WALLET.EXE

A crypto wallet as a phosphor CRT, typed out line by line.

Open in ExodeUI .exode

Hover to play

Claymorphism

Breathe

Puffy clay shapes and an orb that breathes with you.

Open in ExodeUI .exode

Hover to play

Swiss style

Linie 7

Red, black and a strict grid. The tram rides the line diagram.

Open in ExodeUI .exode

Hover to play

Y2K chrome

Y2K FM

Chrome, holo gradients and sparkles around a spinning disc.

Open in ExodeUI .exode

Hover to play

Dark luxury

NOIR

Private banking in black and gold with a whispering serif.

Open in ExodeUI .exode

Hover to play

Organic

Fern

Kraft paper, terracotta and leaves that sway. The soil drinks.

Open in ExodeUI .exode

Hover to play

Sport

Run Club

Volt on black, slanted heavy type. The route draws as you run.

Open in ExodeUI .exode

Software designs

Desktop software, alive on the canvas.

A code editor, a DAW, a trading terminal, a blueprint CAD tool, a 90s installer and more. Every window runs real state machines, so the buttons do something.

Tap Run

Dark minimal

Forge

A code editor where Run slides up a terminal that builds.

Open in ExodeUI .exode

Hover to play

Studio dark

Pulse

Music production with coloured clips and a sweeping playhead.

Open in ExodeUI .exode

Hover to play

Warm minimal

Board

A quiet project board. The card walks itself to Done.

Open in ExodeUI .exode

Hover to play

Pro neutral

Darkroom

A photo editor where Auto moves the sliders and warms the shot.

Open in ExodeUI .exode

Hover to play

Airy light

Post

A light mail client. The reading pane follows your pick.

Open in ExodeUI .exode

Hover to play

Trading terminal

TICKR

Amber-on-black quotes, candles and a scrolling tape.

Open in ExodeUI .exode

Hover to play

Blueprint

Draft

White linework on blue. The assembly explodes into parts.

Open in ExodeUI .exode

Hover to play

Soft pastel

Week

A calm week view. New event drops into Thursday.

Open in ExodeUI .exode

Hover to play

Design tool

Frame

Pick a layer and the selection box glides to it.

Open in ExodeUI .exode

Hover to play

Retro 90s

Setup.exe

A bevelled grey installer with block-by-block progress.

Open in ExodeUI .exode

Live with Kip

Steal these moments. Make them yours.

Each card is a real, small .exode file starring Kip, our mascot. Play with it here, then open it in the editor and make it yours.

Click the fields

Login guardKip follows your typing and covers its eyes for the password.

Open in ExodeUI

Play

Star ratingEvery star changes Kip’s mood, from heartbroken to thrilled.

Open in ExodeUI

Play

Dress upA character customiser with hats, colours and shuffle.

Open in ExodeUI

Play

404 flashlightA lost page in the dark. Find Kip with your cursor.

Open in ExodeUI

Play

Night modeFlip the switch and Kip falls asleep.

Open in ExodeUI

Play

UploadKip pushes the progress bar to 100% and celebrates.

Open in ExodeUI

Scene lab

One scene at a time. Every input real.

Pick a scene, then change its inputs. The stage and the code use the same file and the same values.

Open full example

Live .bexode760 × 380

Press and hold the button, then release.

Live inputs

LabelStiffness340Damping22Accent#ff4a1c

Download .bexode Download .exodeEvents: press

All examples

Open any scene. Read the real code.

Micro-interactions

Spring Button

Interactive spring-driven button with configurable stiffness, damping, and tap velocity. Export clean React JSX and native SwiftUI code.

4 inputs · 1 events

Interactive Toggle

Tactile spring-loaded toggle switch with elastic thumb stretch, particle burst, and live state-machine events. One real .exode scene.

6 inputs · 3 events

Micro-interactions

Magnetic Button

Physics-based magnetic button that tracks cursor proximity with smooth spring pull and fluid rebound. Production React JSX code.

4 inputs · 1 events

Physics & Gestures

Pull-to-Refresh

Elastic pull-to-refresh interaction with logarithmic resistance, state machine loading states, and production React and SwiftUI code.

4 inputs · 0 events

Animated Loader

Multi-state deterministic progress loader with morphing vector geometry, smooth indeterminate transitions, and React/Swift code output.

5 inputs · 1 events

Gestures & Cards

Swipe Card

Drag-to-snap card rail with spring release, velocity handoff and clickable dots. One real .exode scene with live index and accent inputs.

3 inputs · 1 events

Micro-interactions

Glass Button

Modern glassmorphic interactive button with real-time backdrop blur, chromatic light border reflection, and tactile spring scale on hover and click.

3 inputs · 1 events

Layout & Scroll

Parallax Header

Five-layer depth parallax header that drifts with the pointer and idles on its own. One real .exode scene with depth and colour inputs.

4 inputs · 0 events

Gestures & Cards

Bottom Sheet

Physics modal that springs from its trigger, dims and scales the page behind it, and emits confirm or dismiss. One real .exode scene.

4 inputs · 2 events

Build your next living interface today.

Design fluid physics and visual logic in ExodeUI and export directly to React, Swift, and Flutter.