DotFlow separates motion, color, typography, layout, and dot rendering into focused controls. Change one group at a time and check the published banner after each adjustment.

Motion and spacing

  • Direction sets the travel direction.

  • Speed controls movement in pixels per second.

  • Gap controls the space between repeated content.

  • PingPong Mode changes the movement to a back-and-forth path.

  • Pause On Hover and Pause Offscreen control when movement stops.

Use Vertical Padding, Pad X, and Text Padding to give the track and its items breathing room.

Color treatment

Light Mode supports dark content on a bright background. SW Mode provides the black-and-white treatment. The Hue, Hue Range, Hue Speed, Saturation, Contrast, Brightness, and Background Light controls shape the animated color result.

Typography

Set the minimum, fluid, and maximum font sizes, then choose weight, letter spacing, line height, and text transform. Test the smallest viewport: wide uppercase text and heavy letter spacing can make a track much longer.

Dot rendering

  • Crisp Mode produces a sharper look.

  • Dot Size and Dot Spacing define the matrix.

  • Dot Softness controls edge softness.

  • Pixelate Images applies the treatment to images.

  • Glow, Glare, and Safe Y refine the visual effect and vertical safety area.

Use a restrained glow for small type, and check contrast again whenever background light or hue animation changes.

Related: Getting started with DotFlow and Troubleshooting DotFlow and improving accessibility.