Skip to main content

React · 14 examples · free

React animation examples

Interactive animations for React and Next.js, rendered by the exodeui runtime. Every example is live: try it, change its colors and text, copy the React code, or open it in ExodeUI and edit it visually.

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.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.3D Flip CardA two-sided card that flips in 3D on a spring, with a sliding highlight and hover tilt.Morphing Hamburger MenuA hamburger icon that morphs to a close icon while a menu panel opens and links stagger in.Layered Wave BackgroundFour translucent wave layers that drift at different speeds and swell under the cursor.Spotlight Hover GridA grid of feature cards lit by a cursor-following spotlight; the hovered card lifts and glows.Spring PlaygroundDrag a ball on a spring and release it; a live graph shows how stiffness and damping shape the motion.Spring Card SliderA drag-to-swipe card carousel that snaps to the nearest slide on a spring, with dot navigation.Sliding TabsA tab bar whose indicator stretches between tabs while content slides in from the direction of travel.Spring ModalA dialog that springs out of its trigger button while the page behind dims and recedes.