3D Interactive Footer by Matt Kettelkamp3D Interactive Footer by Matt Kettelkamp

3D Interactive Footer

Matt Kettelkamp

Completed work

3D Modeler

Website CSS

Web Developer

Blender

React

three.js

Interactive 3D Footer

I worked with AUW Studio to create an interactive logo footer—a browser-based experience where typography responds to physics, simulated wind, and direct user interaction. When letters collide, they produce wind-chime-like tones generated

entirely in real time.

Technology Stack

The component is built using React 19 for application structure, Three.js and React Three Fiber for real-time 3D rendering, Rapier Physics for constraint-based simulation, the Web Audio API for procedural sound synthesis, and TypeScript for maintainable, type-safe development.

Physics Constraints and Rope Joints

Each letter is suspended using rope joints that connect fixed anchor points to attachment points on the letter geometry. Some letters require multiple constraints for stability, such as the “W,” which uses three attachment points to prevent rotation.

useRopeJoint(anchorRef, letterRef, [[0, 0, 0], [attachmentPoint.x, attachmentPoint.y, attachmentPoint.z], stringLength]);

const hasThirdString = letter === "W";

Wind Simulation

A continuous sinusoidal force simulates wind, introducing organic movement when letters are not actively manipulated by the user.

Mouse-to-World Interaction

Dragging 3D objects requires converting 2D cursor input into 3D world space. This is achieved through camera unprojection, enabling smooth and intuitive interaction.

const vector = new THREE.Vector3(state.pointer.x, state.pointer.y, 0.5);
vector.unproject(camera);
const dir = vector.sub(camera.position).normalize();const distance = -camera.position.z / dir.z;
const pos = camera.position.clone().add(dir.multiplyScalar(distance));

Procedural Audio Synthesis

Collision sounds are generated procedurally using the Web Audio API. Each letter maps to a frequency in the pentatonic scale, ensuring harmonic output.

const freqA = 523.25; // C5

const freqU = 392.0; // G4

const freqW = 293.66; // D4

const freqR = 261.63; // C4

fundamentalGain.gain.setValueAtTime(volume * 0.7, now);

fundamentalGain.gain.exponentialRampToValueAtTime(0.001, now + 3.5);

Rendering and Lighting

Physically based materials, environment lighting, and soft shadow mapping combine to produce a

polished, high-end visual presentation.

<Canvas shadows gl={{ toneMapping: THREE.NoToneMapping }}>
  <ambientLight intensity={0.5} />
  <directionalLight position={[10, 7, 7]} intensity={2.5} castShadow />
  <Environment preset="forest" />
  <SoftShadows size={10} samples={12} />
  <Physics gravity={[0, -9.8, 0]}>
  <FallingLetters />
  </Physics>
</Canvas>

This project transforms a traditional footer into an interactive, physics-driven experience. Through real-time simulation, procedural sound design, and thoughtful interaction techniques, the component demonstrates how even small interface elements can invite exploration and delight.

Like this project

Completed work

Posted Dec 30, 2025

We created a fun, interactive footer that add some movement to a typically static component on a website. Had a blast working with AUW studio on this project

Likes

Views