Crazy Typography Animation

AI Overview: Aerodynamic Typography

This project is an interactive physics-based animation where users can "blow" text across the screen using a virtual desk fan. By using the mouse wheel, viewers generate wind force that spins the fan blades and pushes individual letters around the stage. The project combines realistic physics with modern web typography to create a playful, tactile experience.

The core of the project relies on Matter.js, a 2D physics engine. Each letter in the word "LETTERS" is converted into a physical rectangle that exists in a world with gravity and boundaries. When the user scrolls, a "wind" force is calculated and applied to these invisible boxes, causing the visible letters to tumble, collide, and slide.

const body = Bodies.rectangle(bodyX, startY, w, h, {
    density: 0.005,
    frictionAir: 0.03,
    restitution: 0.4 
});

The code above creates a physical representation for each letter, defining properties like how heavy it is (density) and how much it bounces (restitution).

To bridge the gap between the physics engine and the visual interface, the script uses an animation loop to sync the positions. Every time the physics engine updates the location of a box, the corresponding HTML element is moved using CSS transforms. Additionally, the project uses a "Variable Font" (Recursive), which allows the letters to change their thickness (font-weight) dynamically based on how fast they are moving.

Events.on(engine, "afterUpdate", () => {
    dom.style.transform = `translate(${x}px, ${y}px) rotate(${body.angle}rad)`;
    dom.style.fontWeight = Math.round(targetWeight);
});

This snippet ensures that the text on the screen perfectly follows the movement and rotation calculated by the physics engine.

The interaction is handled by listening for the "wheel" event. Scrolling doesn't just move the letters; it also calculates a windForce value that determines how fast the SVG fan blades should spin, creating a cohesive link between the user's input and the visual feedback.

window.addEventListener("wheel", e => {
  windForce += e.deltaY * 0.00015;
  windForce = Math.max(-0.2, Math.min(0.2, windForce));
});

This listener captures the mouse wheel movement to increase or decrease the strength of the wind applied to the letters.