Interactive Typographic Wave Footer

This Interactive Typographic Wave Footer combines generative art with functional UI design. It features a field of horizontal lines that behave like a liquid surface, reacting to the user’s cursor with a satisfying ripple effect. Hidden within the wave structure is a 3D-like topographic representation of text (“DICH”), generated by mapping pixel brightness from an off-screen canvas to the vertical position of the lines. It’s a sophisticated way to add depth and interactivity to a page footer or hero section.

Core Technique

The effect is built on the HTML5 Canvas API, utilizing a technique often called “displacement mapping” or “height mapping”.

1. Text Mapping: An invisible, smaller canvas (typeCanvas) renders the target text in white on black. The script then reads the pixel data (getImageData) to determine brightness values.
2. Line Generation: The main loop creates 60 horizontal lines. Each point on a line checks the corresponding pixel on the text map. Brighter pixels cause the point’s Y-position to shift upwards (finalY = y - heightOffset), creating the embossed text effect.
3. Physics Engine: The updateLines function implements a basic spring physics model. Each point has a “base” position (the text shape) and a current position. When the mouse gets close, points are pushed away (force). A spring force (springX, springY) constantly pulls them back to their base position, creating the elastic wave motion.

Customization

You can change the hidden text by modifying the fillText call inside the drawWaveEffect function.

// Change "DICH" to your brand name
typeContext.fillText("HELLO", typeCanvasWidth / 2, typeCanvasHeight / 2);

To adjust the intensity of the mouse interaction or the ripple speed, tweak the parameters in updateLines:

// radius: interaction area size
// maxSpeed: push strength
const updateLines = (mouseX, mouseY, radius = 150, maxSpeed = 15) => { ... }

Tips

1. Font Loading Strategy: The script uses document.fonts.load to ensure the custom font (“Drukwide”) is ready before drawing to the canvas. If the font isn’t loaded, the text map will be empty or use a fallback font, ruining the effect. Always ensure your font loading logic is robust.

2. Performance Optimization: Reading getImageData is expensive but done only once on resize. The animation loop (animateFooterLines) only calculates math and draws paths, which is performant. However, for mobile devices, consider reducing linesCount or cols to maintain high frame rates.