Animation examples · free
Animation examples you can try, tweak and ship.
Loaders, buttons, page transitions, parallax, text effects and more, each one live on the page. Pick your framework, play with the demo, change its colors and copy, then copy the code or open it in ExodeUI.
React animations 14
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.
Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.
Flutter animations 14
Bouncing Bars LoaderFive bars bouncing in a travelling wave with squash and stretch, plus rotating status messages.Speed Dial FABA floating action button that rotates to close while three labelled actions spring out in sequence.Hero Product TransitionA list item whose image arcs into the detail header while a circular reveal uncovers the page.
SwiftUI animations 9
Activity Rings LoaderThree concentric arcs chasing each other like Activity rings, closing into full rings with a check when done.Shimmer Reveal TextA headline whose words rise and focus in one by one, with a periodic shimmer across the gradient text.Hold to Confirm ButtonA press-and-hold button: a fill runs while held, drains on early release and confirms when full.
JavaScript animations 9
Segmented Ring SpinnerTwelve segments in a ring with a rotating bright head and fading tail: the classic activity spinner.Terminal Typing EffectA terminal that types commands with human rhythm, prints their output and loops through a script.Scroll Reveal TimelineA timeline whose line draws with scroll progress while milestone cards slide in from alternating sides.
Vue animations 4
Bouncing Dots SpinnerThree dots bouncing with real gravity, squashing on landing, with shadows that shrink as they rise.Slide and Fade Route TransitionDirection-aware route transitions: pages slide and fade toward the tab you chose, with a sliding indicator.Starfield Parallax HeroA space hero with three star layers, a planet and a rocket moving at different depths.
How these examples work
- One small file per animation. Each demo is a single ExodeUI file with its drawing code and inputs, usually 4 to 6 KB.
- The same file on every platform. The React, Flutter, SwiftUI, JavaScript and Vue runtimes all play it.
- Inputs instead of rewriting code. Colors, labels and timing are live inputs you set from your app.
- Editable. Open any example in ExodeUI with your changes applied and keep designing.