Parallax
Background layers scrolling slower than the foreground to fake depth.
Examples
Captured from this page's own interactive demo below.
Overview
Parallax scrolls each background layer at a fraction of the camera's speed — distant mountains barely move, mid-ground trees move somewhat, foreground grass moves faster than the camera itself.
It works because that's literally how vision works: things farther away cross your field of view slower. Even with flat 2D art, correct relative speeds make the brain build a depth model of the scene.
Beyond depth, parallax makes movement itself feel faster and more rewarding — the same run speed feels dramatically more dynamic with layers sliding at different rates than against a static backdrop.
Interactive Demo
Use Cases
Best Practices
Do
- ✓Pick layer factors roughly logarithmically (e.g. 0.9, 0.6, 0.3, 0.1) rather than evenly — depth perception is nonlinear.
- ✓Add a subtle foreground layer moving faster than the camera; it sells depth more than another background layer.
- ✓Apply gentle parallax to menu backgrounds reacting to cursor/stick position — cheap perceived production value.
Don't
- ✕Don't move gameplay-relevant elements with parallax factors — platforms must move 1:1 with the world or collision reads wrong.
- ✕Don't use huge parallax on layers with readable text or important landmarks; the drift is distracting.
- ✕Don't forget vertical parallax if the camera moves vertically — horizontal-only breaks the illusion on jumps.
Common Mistakes
- ⚠Driving parallax from player position instead of camera position, which breaks the moment the camera lags or leads.
- ⚠Layer textures that don't tile cleanly, showing seams at high scroll speeds.
- ⚠Updating parallax in Update while the camera moves in LateUpdate, causing one-frame jitter between layers.
Implementation
Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.
Add the "Parallax" game-feel effect to my project: Background layers scrolling slower than the foreground to fake depth.
How it works: Parallax scrolls each background layer at a fraction of the camera's speed — distant mountains barely move, mid-ground trees move somewhat, foreground grass moves faster than the camera itself.
Guidelines:
- Pick layer factors roughly logarithmically (e.g. 0.9, 0.6, 0.3, 0.1) rather than evenly — depth perception is nonlinear.
- Add a subtle foreground layer moving faster than the camera; it sells depth more than another background layer.
- Apply gentle parallax to menu backgrounds reacting to cursor/stick position — cheap perceived production value.
Avoid:
- Don't move gameplay-relevant elements with parallax factors — platforms must move 1:1 with the world or collision reads wrong.
- Don't use huge parallax on layers with readable text or important landmarks; the drift is distracting.
- Don't forget vertical parallax if the camera moves vertically — horizontal-only breaks the illusion on jumps.
Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.
Comments
…