Scrolling Stripes

Twelve vertical stripes scroll continuously to the right. All it takes is adding time inside the fract call:

Let's break it down.

How the stripes are generated

vUv.x * count scales the 0.0–1.0 horizontal range up to 0.0–12.0.

fract(...) takes the fractional part, folding that range into 12 repeating 0.0–1.0 intervals — one per stripe.

step(0.5, x) splits each interval in half:

• x < 0.5 → outputs 0.0 (dark)
• x >= 0.5 → outputs 1.0 (light)

That gives 12 alternating dark and light vertical stripes.

Adding u_time makes the stripes scroll

vUv.x * count + u_time * 0.6 grows over time. After each fract fold, the stripes shift relative to the left edge of the canvas — visually they appear to scroll right.

0.6 controls the speed.

step vs smoothstep

step(0.5, x) creates hard edges — the stripe boundaries are sharp and aliased.

For softer edges, you can use smoothstep(0.45, 0.55, x) to blend the transition slightly.

Try changing it

Exercise

The exercise canvas has static stripes. Add u_time * 0.6 inside the fract call to make the stripes scroll to the right.

Answer Breakdown

• vUv.x * count divides the horizontal axis into 12 segments
• fract(...) keeps each segment looping between 0.0–1.0
• + u_time * 0.6 shifts the whole pattern over time, starting the scroll

The starting code is fract(vUv.x * count) — no time term, stripes are static. Adding u_time * 0.6 shifts the fold point each frame, making the stripes move.

Try replacing step(0.5, x) with smoothstep(0.45, 0.55, x) — the stripe edges will get a slight soft blur.