Getting Started

Setting up Spatial Backgrounds is straightforward. After adding the stack to your editor, navigate to Settings Panel > Animation.

Animation Settings

Note: Animation effects won’t show in edit mode. Use Preview Mode or the Simulator to see your changes in action.

Spatial Backgrounds generates a tunnel-like visual using stacked solid layers, each with a centered cutout shape. These layers move toward or away from the viewer, creating an illusion of traveling through 3D space. You can choose from 7 Layer Shapes, each shaping the tunnel’s appearance.

• Layer Count: Adjust the number of layers visible at a time.

• Duration: Set animation speed (in seconds). Higher values slow the animation; lower values make it faster.
• Reverse Direction: Enable this to have layers move away from the screen instead of toward it.

Movement Options

There are three movement modes:

• Static
  Disables lateral movement. Use the X & Y Position settings to define a curved path along which layers move.
• Mouse
  Enables cursor-based interaction.
  • Follow Speed: Controls how quickly layers respond to the cursor (pixels per second).
  • Move Intensity: Adjusts how far layers shift—higher values increase visual impact.
  • Invert Horizontal/Vertical Movement: Reverses layer movement in respective directions.
• Path
  Lateral movement follows a predefined path.

• • Move Path: Select from 8 paths for the movement to follow.
  • Move Intensity: Adjusts how far layers shift as they follow the selected path—higher values increase visual impact.
  • Move Duration: Set the lateral movement speed (in seconds). Higher values slow the animation; lower values make it faster.

If Movement is set to anything other than Static, the Rotate setting becomes available with three modes:

• Static
  Layers rotate at a fixed angle, defined by the Rotate slider.
• Auto
  Rotation varies based on lateral path/mouse position, using the slider to define the maximum rotation.
• Loop
  Layers animate rotation back and forth between the defined value and its inverse.

When Movement is set to Static, the Rotate slider still applies fixed rotation, and you can enable Animate Rotation on a Loop for continuous back-and-forth rotation.

Styles

Background Options

Choose from three background types:

• Color – Solid fill.
• Gradient – Two-color gradient.
• Image – Background image (gradient images work especially well).

Layer Stroke

• Stroke Color – Set the outline color around each shape layer.
• Stroke Width – Adjust stroke thickness. Set to 0 to remove the stroke.

Fog Settings

To simulate distance, far-away layers fade into fog. Choose from:

• None – Layers fade directly into the background color.
• Bright – Adds a white fog, like a “light at the end of the tunnel.”
• Dark – Adds a black fog, for a moody or night-like effect.

Each fog option includes:

• Fog Distance – Controls how far from the viewer the fog becomes fully opaque.
• Fog Spread – Defines how gradually the fog transitions. Higher values create longer, deeper fog.

Section Layout

• Min Height – Sets the section’s minimum height as a percentage of the browser window.
• Content Width > Define – Enables two more settings:
  • Max Width – Maximum width for inner content (in pixels).
  • Mobile Spacing – Horizontal padding for smaller screen widths.
  • Padding – Set vertical padding or adjust individual sides.