BadCodeWorks

Problem

Two jobs for one page: show the work, and try the visual effects out in public. Neither could cost load time or get in the way of reading.

Approach

The interface holds still except in two places.

Around the BAD wordmark, a Canvas 2D grid follows the pointer. Nearby intersections bend and the outlined letters bend with them. The real heading stays in the markup.

Between case files, a tile grid covers the incoming dossier and clears in a randomized, direction-aware order. The tiles are sized to the grid behind the wordmark. Only opacity animates, and reduced motion skips the transition.

Technology

Astro 7, strict TypeScript, content collections for the case files, CSS custom properties for both themes. Canvas 2D does the morph, so there is no animation library. Static output, built for Cloudflare Pages.