Lab 01 Type effect

Fill a word with live code.

Type a few words and they fill with the code that draws the homepage. Pick how the code moves, then run your cursor or a finger across the letters to scramble it.

Loading the code

I speak AI.

The code is real. It's the shader source behind the homepage's opening, set in the site's pixel font and lit like a code editor, with the keywords brightest.

Mix gives each word its own movement, the way the homepage does. Nothing you type leaves this page.

How it's built

How it worksOne shader pass

for each pixel inside a letter:
  find its character cell (7 by 14 pixels)
  read the code tile there, moved by the word's effect
  near the cursor, sometimes read a random cell instead
  tint it from the base blue up to ice blue

Your words are drawn once into a mask. A WebGL shader then colors every pixel the mask covers, reading from a tile of code that repeats in both directions.

Each effect only changes where the shader reads that tile. Roll sideways shifts each row of code by whole pixels, with neighboring rows moving in opposite directions. Roll up moves the whole tile upward. Type in reveals the code row by row behind a block cursor. Assemble builds each character one pixel at a time, then breaks it apart again.

The cursor scramble swaps characters near your pointer for random ones from the same tile, so even the noise comes from the homepage's code. Nothing else scrambles.

Reduced motion holds the code still, and Pause motion stops it. The loop also stops when the stage scrolls out of view or the tab is hidden.

How I built this site

Fill a word with live code.

How it's built

My profile in a format software can read.

What can an AI app read here?

Say hello.

Find a page.