Create layered parallax movement that responds smoothly to pointer and touch input.
Parallax Floating
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
Folder Structure
For deeper guidance, visit the Fancy Components documentation.
Usage
Examples
Basic Three-Layer Parallax
Compare three labeled layers to see how depth changes travel distance.
Higher depth travels farther
0.5
1.0
2.0
Sensitivity Comparison
The same element and depth respond differently as the root sensitivity changes.
gentle · sensitivity 0.35
responsive · sensitivity 1.4
Positive and Negative Direction
Positive depth follows pointer movement while negative depth reverses it.
Positive follows · negative reverses
depth +1.25
Toward
depth −1.25
Away
Mixed Content
Place images, inline SVGs, and styled text at independent depths in one scene.
Wish you were here
Copenhagen · 07:42
Grouped Elements
Group related children under one FloatingElement so they share a transform and depth.
Two wrappers · six items
depth 0.6
depth 1.5
Props
Floating
The root container that tracks pointer movement and updates registered floating elements.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | FloatingElement children rendered inside the parallax container. |
sensitivity | number | 1 | Scales the distance each element moves in response to pointer input. |
easingFactor | number | 0.05 | Controls how quickly elements interpolate toward their target position. |
class | string | undefined | Classes merged onto the root parallax container. |
FloatingElement
A positioned layer registered with the nearest Floating root.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content rendered inside the floating layer. |
depth | number | 1 | Multiplies the layer's movement to create near and far parallax depth. |
class | string | undefined | Classes merged onto the positioned floating element wrapper. |