Build guide · Site 02 of 25

Type that refuses to sit still.

MONOLITH is one of 25 sites built by Formwork to show what's possible on the web. This one is pure typography — no images, no 3D — carried entirely by motion.

The idea

A studio that sells motion should be motion. So the whole page is a type specimen that reacts: headlines decode themselves, everything skews with your scroll speed, and buttons lean toward your cursor. Restraint comes from a two-colour system — near-black, off-white, one acid green.

The stack

• Type Anton (display), Space Grotesk (text), JetBrains Mono (labels).
• Motion GSAP + ScrollTrigger for skew, reveals, and magnetism.
• Effects A hand-written scramble routine — no plugins.
• Build / host Static HTML/CSS/JS on GitHub Pages.

Signature move: scramble + scroll-skew

The scramble reveals text left-to-right while filling the rest with random glyphs — but it reads the real text from the DOM first, so if scripts fail the headline is simply there:

const text = el.dataset.original || (el.dataset.original = el.textContent);
for (let i = 0; i < len; i++)
  out += (i < reveal || text[i]===' ') ? text[i] : RANDOM_GLYPH;
el.textContent = out;   // ...until reveal reaches the end

The skew is the classic GSAP velocity trick: read ScrollTrigger.getVelocity(), clamp it, push it into skewY, then ease back to zero. Fast scroll = the page tilts, then settles.

Details that matter

• Outline type — -webkit-text-stroke gives hollow words that feel engraved.
• Magnetic elements translate a fraction of the cursor offset, then spring back with an elastic ease.
• Work rows wipe to full acid-green on hover with a scaleY pseudo-element — no repaint of text colour cost.
• Reduced motion disables scramble, skew, and the cursor entirely.

Ship it on GitHub Pages

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-monolith --public --source=. --push
gh api --method POST /repos/OWNER/formwork-monolith/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

Keep paths relative and drop a .nojekyll file so everything serves as-is.

One typeface doing the heavy lifting, two supporting it, and motion wired to the two things a visitor always controls: their scroll and their cursor.