Interlude

Astro starter for page transitions

21 transitions

Back

21 (shaders)

channel

Changing channels on an old TV: the page breaks into static, then the next one tunes in.

On the click, bands of static flicker in over the page, with scanlines and a bright bar rolling down, and the page jumps sideways more and more until the screen is all static. The static keeps moving while the next page loads. Then the next page tunes in: the bands thin out and flicker away, and the page jumps less and less until it holds still.

A shader draws the static, a random grey for each grain, thirty times a second, in bands of rows that turn on and off. A shader can’t move the page, so the jumps are CSS, on still copies of the pages under it.

File
src/transitions/channel.ts

Its settings are at the top of the file.