Scene & Harmonics
Scene controls and harmonics affect the entire parallax composition. They are accessible from the Scene tab in the overlay panel.
Scene Controls
These parameters control the overall 3D perspective behavior of the parallax container:
| Control | Range | Step | Description |
|---|---|---|---|
| Max Rotation | 0 to 10° | 0.1 | Maximum rotation angle (degrees) the container tilts in response to pointer position |
| Container Lerp | 0.005 to 0.3 | 0.005 | Smoothing factor for the container's rotation — lower values produce a slower, more inertial response |
| Perspective | 200 to 2000 px | 10 | CSS perspective value controlling 3D depth foreshortening — lower values exaggerate depth, higher values flatten it |
| Background Color | CSS color | — | The document.body background color behind the parallax scene |
How Scene Controls Interact
The container receives rotateX and rotateY transforms based on the normalized pointer position multiplied by Max Rotation, smoothed over time by Container Lerp. The Perspective value determines how strongly depth (Z translations) affects visual size.
A higher Max Rotation creates more dramatic tilting. A lower Container Lerp makes the tilt follow the pointer more sluggishly (creating a heavier, more cinematic feel). A lower Perspective exaggerates depth separation between layers.
Harmonics
Harmonics define the sine-wave parameters used by all layers' floating animations. They create organic, looping idle motion even when the pointer isn't moving.
The float system uses dual-frequency oscillation on each axis:
X-Axis Harmonics
| Control | Range | Step | Description |
|---|---|---|---|
| Freq A | 0 to 3 | 0.05 | Primary frequency for horizontal float oscillation |
| Freq B | 0 to 3 | 0.05 | Secondary frequency for horizontal float oscillation |
| Amp B | 0 to 1 | 0.05 | Amplitude of the secondary horizontal oscillation (0 = off) |
Y-Axis Harmonics
| Control | Range | Step | Description |
|---|---|---|---|
| Freq C | 0 to 3 | 0.05 | Primary frequency for vertical float oscillation |
| Freq D | 0 to 3 | 0.05 | Secondary frequency for vertical float oscillation |
| Amp D | 0 to 1 | 0.05 | Amplitude of the secondary vertical oscillation (0 = off) |
How Harmonics Work
Each layer's floating displacement is computed by combining shared scene-level wave parameters with per-layer scaling:
- Float X =
floatX × (sin(freqA × t) + sin(freqB × t) × ampB) - Float Y =
floatY × (sin(freqC × t) + cos(freqD × t) × ampD)
Where t is time scaled by the layer's floatSpeed. The dual-frequency approach creates non-repeating, organic-looking motion by combining two sine waves at different frequencies.
- Freq A / Freq C are the primary oscillation speeds
- Freq B / Freq D add complexity (set their amp to 0 to disable)
- Per-layer
floatX,floatY, andfloatSpeedscale the harmonics output individually, so each layer can float at a different intensity and speed while sharing the same wave shape
See Parallax Engine for a deeper technical explanation.