Content Trail

Note: The Content Trail element was added in version 18 of Salient.

TRAIL

Introduction

The Content Trail element is an interactive visual effect. Inspired by modern “image trail” interactions — where images spawn and follow the user’s cursor — this element expands the idea further. In addition to displaying images, the Content Trail introduces a Text Mode, allowing strings of text (with custom colors) to trail behind the cursor, creating expressive and dynamic interactions.

This element is ideal for:

  • Hero sections
  • Experimental landing pages
  • Creative portfolios
  • Editorial or storytelling layouts
  • Micro-interactions that reinforce branding

Usage

  1. Add the Element:
    From the Salient WPBakery page builder, search for Content Trail and add it to your page.
  2. Choose Your Mode:
    Select either Images or Text as the content type. This choice determines which additional settings appear.
  3. Configure Your Content:
    • In Images mode, upload the images you want to display.
    • In Text mode, add one or more text strings, along with optional per-item color assignments.
  4. Adjust Behavior:
    Use the animation, duration, smoothing, and frequency settings to define how the trail looks and feels.
  5. Preview & Fine-Tune:
    View your page and adjust content size, rotation, border radius, and ordering options to achieve the desired effect.

2. Images Mode Options

Images

Upload one or more images from the media library.

Image Size

Select the WordPress image size (resolution) to load:

  • Large (default)
  • Medium
  • Medium Large
  • Small / Thumbnail
  • Small Landscape
  • Large Square
  • Square
  • Full

Image Width (Responsive)

Define the rendered width of each spawned image per device:

  • Desktop Width
  • Tablet Width
  • Phone Width

Accepts values like 200px, 10rem, etc.

Aspect Ratio

Control how images are cropped:

  • Auto
  • 1:1
  • 4:3
  • 3:2
  • 16:9
  • 2:1
  • 4:5

Border Radius

Adjust the corner roundness of each image (0–50px).
Set to 0px for sharp rectangles or 50px for soft, rounded thumbnails.

3. Text Mode Options

Say hello
Let's talk
Start today
Call us

TEXT

Text Array

A repeater field where you can add multiple strings of text. Each text string becomes a content instance that can spawn along the cursor path.

Text Color Array

Add optional per-item colors matching your text array. This allows each string to have its own visual identity.

Font Color

A global fallback color if the repeater color array is not used.

4. Animation Options

Animation In

Controls how items appear:

  • Scale – Grows into view.
  • Circle Mask – Reveals through a circular mask.
  • None – Spawns instantly without animation.

Animation Out

Controls how items disappear:

  • Scale – Shrinks away.
  • Fade – Fades out smoothly.
  • None – Vanishes instantly.

Behavior & Motion Settings

Frequency

Sets how often new content spawns based on cursor movement (in pixels).
Lower values produce more frequent spawns; higher values create a more spaced-out trail.
Default: 100px

Content Display Duration

How long each item remains visible before animating out (0.25s–2s).
Short durations feel snappier; longer durations create fuller trails.

Smoothing (Lerp)

Applies smoothing to the motion of each content instance (0–100). Higher values increase smoothness but introduce more delay.

Randomization Settings

Random Order

Enables random sequencing of content instead of cycling in a fixed order. Useful for galleries or varied text sets.

Random Rotation

Adds random rotation to each spawned item for a more organic, scattered appearance.

Positioning

The Positioning tab controls how the Content Trail element is placed inside its parent container and how much space it occupies. Because the effect needs a defined area to track mouse movement, proper positioning ensures smooth and predictable behavior.

Choose how the element is positioned relative to its parent:

  • Absolute (Recommended) – Positions the Content Trail relative to the nearest positioned ancestor. This is the most common setup, as it allows the element to span the entire parent Column or Row, creating a seamless interaction area.
  • Relative / Fixed / Other options – Available for custom or experimental layouts, but typically not required.

Positioning Controls (Top / Bottom / Left / Right)

When using Absolute positioning, these values let you anchor the Content Trail inside its parent container.

For full-coverage placement (most common):

Top: 0
Right: 0
Bottom: 0
Left: 0

This makes the Content Trail completely fill the parent Column, allowing the cursor-based interaction to work across the entire area.

Element Size (Located in General Tab)

The Size controls are found in the General settings tab, not the Positioning tab. These settings define how large the Content Trail wrapper should be.

  • Percentage values (Recommended) – Common for full-area interactions.
    Example:

    Width: 100%
Height: 100%
  • Fixed sizes – Useful for contained interaction zones or smaller hover areas.
    Example:

    Width: 500px
Height: 300px

When combined with absolute positioning, percentage-based sizing makes the Content Trail perfectly span the parent container.

Z-index

Controls stacking order. Set a higher value if the Content Trail should appear above other elements such as text, images, or backgrounds.

Example Full Screen Settings