React animation example
React Parallax Effect: Layered Depth Scene
Parallax works when near things move more than far things. This scene stacks five layers, sky, sun, two mountain ranges and a foreground ridge, and offsets each one by its depth as the pointer moves. With no pointer it drifts on its own, so it still reads as parallax on touch screens.
- 4.2 KB file
- 5 live inputs
- React runtime
How this depth parallax scene works
- Each layer moves by depth × pointer offset, so the foreground travels about six times farther than the sky.
- Offsets are smoothed every frame, which keeps the motion soft instead of tracking the mouse one to one.
- Raise depth for a dramatic hero, lower it for a calm background behind text.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-parallax.bexode goes in /public (download it below)
export function ReactParallax() {
return (
<ExodeUICanvas
src="/react-parallax.bexode"
fit="Layout"
autoPlay
interactive
style={{ width: '100%', height: 500 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
depth | Number | 1 | 0 – 2.5 |
headline | Text | Built in layers | — |
accent | Text | #ffb86b | hex colour |
accent2 | Text | #5b4bd6 | hex colour |
bg | Text | #120f2a | hex colour |
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.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.
The same idea in other frameworks: Flutter parallax scroll list · SwiftUI tilt parallax poster · Vue starfield parallax hero