Interactive Feather Reveal 404 Page

This is an Interactive Feather Reveal 404 Page. It utilizes the Canvas 2D API to transform a sterile error screen into a generative digital canvas. The component records user movement to stamp intricate feather-shaped paths that alternate between solid black fills and clipped fragments of external bird photography.

Specs

• Weight: ~120 KB (GSAP + Lodash + Asset overhead).
• Performance: High. Rendering is offloaded to the Canvas 2D context, bypassing the heavy DOM reflows associated with standard element manipulation.
• Theming / Customization: Easily adaptable by replacing the feather1 SVG path string or the images URL array.
• Responsiveness: Canvas matches innerWidth and innerHeight on load.
• Web APIs: Canvas API, Path2D API.
• Graceful Degradation: Stays as a clean, static white 404 screen (with text “I’m lost… Take me home!”) if JavaScript or Canvas is disabled.

Anatomy

The interface consists of layers prioritized by visibility.

• HTML (The Skeleton): A raw <canvas> serves as the interactive base, while an absolute-positioned h1 and section provide the semantic messaging and CTA.
• CSS (The Skin): Minimalist. It centers the “404” text and uses pointer-events: none on overlays to ensure the cursor always interacts with the canvas below.
• JS (The Nervous System): Lodash _.throttle caps event frequency to 100ms. GSAP generates randomized scaling and rotation vectors. The Path2D constructor stores the complex feather geometry, allowing it to be reused as a drawing mask for the ctx.clip() operation.

Logic

The technical core is the “Alternating Clipping Stamp”.

if (black) {
    ctx.fill(f);
    black = false;
} else {
    placeImage(ctx, f, rotation, scale);
    black = true;
}

The script maintains a boolean toggle (black). Every 100ms of mouse movement, it either fills the feather path with a solid color or uses the path as a clipping mask for a randomly selected image. This creates a high-contrast visual rhythm that builds complexity without overlapping opaque pixels excessively.

Feel

Tactile and revealing. The interface rewards exploration, turning a point of user frustration (a 404 error) into a moment of creative play. The stamps feel like digital ink, and the image reveal adds a layer of unexpected discovery as fragments of high-resolution textures appear behind the cursor.