Kinetic 3D Typography — CSS Animation with Source Code

The Kinetic 3D Typography effect is an interactive typographic showcase that turns standard text into a physical, three-dimensional entity. As you move your mouse, the characters twist, warp, and react with realistic perspective—perfect for high-end landing pages and experimental web designs.

How It Works

This effect leverages CSS 3D Transforms (rotateX, rotateY, translateZ) and JavaScript’s Math.hypot to calculate the distance between the cursor and each individual character. When the mouse approaches a letter, it enters a “force field” that pushes it back in 3D space and rotates it away from the point of impact. The color also shifts dynamically based on the interaction strength.

Use Cases

• Modern landing page hero sections
• Interactive branding and logos
• Portfolio project titles
• High-end digital agency experiments

How to Customize

• Adjust Perspective: Change the perspective value on the body (currently 1000px) to make the 3D depth more or less intense.
• Tweak Interaction Range: Modify the maxDist variable in the JavaScript to increase or decrease how far away the mouse can be to trigger the effect.
• Rotation Intensity: Change the multipliers for rx and ry to make the letters tilt more aggressively.

Frequently Asked Questions

Is this performance-intensive?

By using transform for all motion, we ensure the animation is handled by the GPU. Even with many letters, it maintains a smooth 60FPS on modern browsers.

Can I used external fonts?

Yes! Simply change the font-family in the CSS to your preferred Google Font or system font. High-weight (bold/black) fonts typically work best for kinetic effects.

How do I change the words?

Update the html content and ensure each letter is wrapped in its own <span> tag. The JS automatically selects all spans and applies the physics logic to them.