CSS-based 3D text layers. No WebGL. No dependencies.
DepthText is built with performance and accessibility in mind, giving you the power of 3D without the weight of WebGL.
Only 4-6KB minified. No heavy dependencies, just pure vanilla JavaScript magic.
Uses CSS 3D transforms and `requestAnimationFrame` for 60fps jank-free animations.
Reacts to mouse movement, scroll, or gyroscope. Fully configurable sensitivity.
See DepthText in action with these interactive examples.
Simple 3D depth with mouse interaction.
<h4 data-depth="1.2rem"
data-depth-layers="8"
data-depth-event="pointer">
Hello World
</h4>Depth effect that reacts to page scrolling.
<h4 data-depth="2rem"
data-depth-layers="12"
data-depth-event="scroll">
Scroll Me!
</h4>Layers fade out as they get deeper.
<h4 data-depth="1.5rem"
data-depth-layers="10"
data-depth-event="pointer"
data-depth-fade="true">
Fade Away
</h4>Control the depth direction and rotation.
<h4 data-depth="1rem"
data-depth-layers="15"
data-depth-event="pointer"
data-depth-event-rotation="45deg"
data-depth-event-direction="reverse">
Reverse Spin
</h4>More complex implementations showing DepthText's flexibility.
Apply DepthText to multiple elements with different settings.
Combine DepthText with custom CSS for unique effects.
Works perfectly with emojis and unicode.
<h4 data-depth="1rem" data-depth-event="pointer"> 🚀 Launch! 🌟 </h4>Compare with other 3D text solutions
| Feature | DepthText | ztext.js | Three.js | CSS Only |
|---|---|---|---|---|
| Bundle Size | 4-6 KB | ~3 KB | ~600 KB | 0 KB |
| Pointer Events | ✓ | ✗ | ✓ | ✗ |
| Scroll Events | ✓ | ✗ | ~ | ✗ |
| TypeScript Support | ✓ | ✗ | ✓ | N/A |
| Custom CSS Classes | ✓ | ✗ | ✗ | ✓ |
| Performance | 60 FPS | 60 FPS | Variable | 60 FPS |