ztext.js Turns Web Type Into Interactive 3D Lettering
Bennett Feely has released a new project called ztext that transforms any web type into 3D lettering with a mouseover effect that moves the objects in space. While reminiscent of Zdog, this tool is built specifically for typography. The technique stacks multiple copies of glyphs on top of one another, offset by translateZ, then applies perspective and rotateX/rotateY on a parent element to power the interactive motion.
The visual result is highly engaging. The author jokingly wonders why Fisher-Price hasn't already adopted it site-wide.
From an accessibility standpoint, questions remain. Even in the <h1> on the demo site, the effect expands the heading into eight separate <h1> elements, plus numerous nested <span> tags—a structure that likely creates issues for screen readers. A single parent wrapper with an aria-label could mitigate some of the problem.
Copy-and-paste behavior also behaves unexpectedly. Selecting straight across a word usually yields the desired text, but copying from before the word to after it includes all the duplicated layers, resulting in unwanted extra content. Some user-select: none; adjustments might fix that.
The effect isn't limited to text. Feely's example on an <img> is notable, mimicking how a photo printed on real-world canvas stretches around its frame so even edges retain color. Best of all is the result on <svg> elements, which looks particularly impressive.
