QUICK NAVIGATION

Find a page.

Use the arrow keys to choose a result, Enter to open it, or Escape to close.

LAB / 05 / ANIMATED TEXT

Experiment with animated text.

Adjust the controls to see how changing characters settle into readable text. This is the effect used on some of the site's headings.

Loading the decoder…

Work, Reimagined.

The effect moves from left to right, replacing changing characters with your final text. Choose Run again to replay it.

A lower setting makes the changes appear more stepped.

Respects reduced motion: the final text is shown immediately. On the live site the effect runs once per heading when it scrolls into view.

Technical details

How it works~40 lines, no library
for each frame, p = elapsed / duration
for each character i (position pos = i / total):
  if p ≥ pos + sweep, the final character
  else if p < pos - sweep, a blank
  otherwise, a random glyph from the pool
spaces stay spaces; the sweep moves left to right

One animation frame loop runs the whole effect. Each frame computes progress from the elapsed time, then walks the string character by character: past the sweep the character is final, ahead of it is blank, and inside the sweep it is a random glyph from the pool.

Spaces stay spaces. The updates-per-second slider caps how often the string is redrawn by skipping frames, so a slow rate still uses one clock.

Reduced motion skips the loop and shows the final text straight away.

For developers: the source file behind this experiment is src/scripts/scramble-lab.js. It is not a public code link. · How this site is built

← Back to experiments

Have a project in mind?

Tell me what you'd like to build or improve. We can talk through what you need and whether I can help.

Book a call with mepatrick@epiphanydynamics.ai