How to add a cursor trail

A cursor trail turns a section's background into a grid of text characters that stays plain until the mouse moves. Wherever the mouse goes it leaves "ink": dense characters like @ % # along the fresh path, lighter = - : . at the edges. The ink spreads a little and fades away over a few seconds. It's a section background, so it sits behind the section's words.

Turn it on for every section

1. Open the Theme panel and choose Cursor.
2. Turn on Cursor trail on every section.
3. Set the brush size, fade time, spread, characters, color and strength (see the settings below). The color can be one of your theme colors, so it changes when the theme color changes.

Every section gets the trail, except sections that already have a media vortex or a particle image behind them. Headers and footers don't get it.

Turn it on for one section only

1. Select a section. (Columns and inner columns don't have a cursor trail.)
2. In Design → Style, open Cursor trail and turn on Cursor trail behind the content.
3. Adjust the settings below.

Change it for one section when the site-wide trail is on

1. Select the section.
2. In Design → Style, open Cursor trail. Settings that come from the theme show Theme, and a note says the site-wide trail is on.
3. Change any setting, and only that setting changes for this section. For example, pick a different color and keep everything else from the theme.
4. To go back, click Reset next to a setting, or Reset all to theme. To hide the trail on this section, turn off Cursor trail behind the content.

Settings

• Brush size: how wide the trail is, 20 to 220 px. Default 70.
• Fade time: how long the ink stays, 0.5 to 8 seconds. Default 2.5.
• Spread: how much the ink drifts outward, 0 to 100%. Default 35%.
• Character size: the size of each character, 8 to 26 px. Default 13.
• Characters: the set of characters used, from light to dense: Classic (. : - = + * o # % @), Soft, Blocks (shaded squares), Binary (0 1) or Dots.
• Color: blank by default, which uses a soft tint of the section's own text color. Pick a color to use it; Clear (or Reset on a section) goes back to blank.
• Strength: how strong the trail is, 10 to 100%. Default 45%. At 100% the trail is the full color you picked.
• Preview motion while editing: plays the trail on the canvas while you edit. Off, it holds still on the canvas. Preview mode always plays it.

Examples

• A tech startup hero: one section with Binary characters in the brand's bright green at 80% strength on a black background.
• A subtle site-wide texture: Cursor trail on every section with Dots, blank color and 30% strength, so each section gets a faint trail in its own text color.
• A creative agency's dark sections only: site-wide trail on in white, then turn Cursor trail behind the content off on each light section.

Limits and what it can't do

• Sections only. Columns, inner columns, headers and footers don't have a cursor trail.
• A section with a media vortex or a Particle Image doesn't take the site-wide trail.
• It shows in Preview and on the live site. On the canvas it only moves with Preview motion while editing on.
• Visitors whose device asks for less motion don't see it, and the automatic Pause motion button switches it off.

Good to know

• Words over the trail always stay readable. Only the characters right behind a word are held back; everywhere else the trail shows the full color.
• The trail is brightest right behind the mouse and fades out along its tail.
• On phones and tablets the trail follows a finger while it drags.
• It works only while someone moves the mouse and sleeps when the section is off screen, so it costs nothing when idle.
• Any page with a trail gets the Pause motion button. Choose where it sits in Theme → Motion.

Who can use it

Agency people with the Mount Olympus tool. Client people need the Editor permission (Theme panel and Design panel).

Troubleshooting

• There's no Cursor trail option: you've selected a column or inner column. Select the section around it.
• The trail doesn't move while I edit: turn on Preview motion while editing, or open Preview.
• The site-wide trail is missing on one section: that section has a media vortex or Particle Image, or someone turned off Cursor trail behind the content on it. Click Reset next to the switch to follow the theme again.
• I can't see it on my own computer: your device may be set to reduce motion, or you clicked Pause motion on the site before (it's remembered). Click it again to resume.
• The trail is too faint: raise Strength, or pick a color that contrasts with the background.
• It's missing from the header or footer: headers and footers don't get a cursor trail.