Text Trail

ProTypography

Characters from a supplied string spawn along the pointer's path and fade out behind it, with configurable size, spacing, lifetime, colour and glow. Self-contained — the trail hook ships inside the component.

Text Trail

Included with membership

Members install Text Trail with one command and get the full source, the usage code and the Framer remix, licensed for client work. One membership covers the whole library and the CLI.

When to use it

An empty region that should reward moving through it — a hero, a landing panel, a gap between sections. It wraps an area and spawns characters wherever the pointer goes inside it, so it wants room. Over dense content the characters land on top of what someone is trying to read.

  • Give the wrapper a real size — it spawns inside its own bounds, and a zero-height wrapper produces nothing at all.
  • End the text with a separator and a space, so the loop reads as continuous rather than jamming words together.
  • Raise spacing if the characters crowd into a solid line at speed.

Avoid:

  • Do not wrap the whole page. The characters are absolutely positioned inside the wrapper, and over live content they land on top of it.
  • Do not pass a long sentence. Characters are emitted one at a time along the pointer, so a long string never completes before it fades.
  • Do not count on it appearing for every visitor — it does not attach at all when reduced motion is set.

Props

Text that writes itself along the path of your cursor and fades behind it. The string repeats, so a slow drag leaves a readable line and a quick one leaves a streak.

<TextTrail />

The surface the trail is drawn on. Fills its container and sits over whatever you put inside it.

PropTypeDefaultDescription
textstring"DESIGN • MOTION • CODE • "The string that repeats along the trail. Keep the trailing space and separator — they are what stop the loop reading as one long word.
sizenumber42Type size in pixels.
spacingnumber20Distance between characters along the path. Larger spreads the string out, so less of it fits in a given drag.
lifenumber1600How long a character stays before fading, in milliseconds. Longer leaves more of the trail standing.
colorstring"#7EACB5"Colour of the characters.
glowbooleantrueAdds a bloom around each character.
childrenReact.ReactNode—Rendered underneath the trail, so you can lay it over a hero or an image rather than an empty box.
classNamestring""Applied to the wrapper.
It reads the visitor's reduced-motion preference and does not attach at all when it is set — no characters are spawned and the container is left untouched. The trail is decorative, so there is nothing to fall back to.
Cost follows how many characters are alive at once, which is life divided by spacing. A long life with tight spacing is the heavy combination.
Client component. It reads the pointer and draws per frame, so it has to run in the browser.
Back to all components