3D Typography for the Web

Pay what you want

Are you using ztext and happy with it? Your kind support keeps open-source JS libraries like this free for others.

Initialization

There are multiple ways to use ztext. Pick whichever method is easiest for you.

How it works

Ztext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with <canvas> or forcing users to download multi-megabyte WebGL libraries. With ztext, content remains fully selectable and accessible.

Over 98% of users use a web browser that supports the CSS transform-style property, which ztext needs to work. In unsupported browsers, ztext gracefully turns off.

Initialize with HTML attributes

Include ztext.min.js on your site before the closing </body> tag on your HTML file. For example:

HTML
<script src="/path/to/ztext.min.js"></script>

With this method, ztext will look for any HTML element with the data-z or data-z="true" attribute and will apply a 3D effect to it.

See Options the below for a full list of possible data-z-XXXXX attributes.

HTML
<h1>
   <span data-z data-z-layers="3" data-z-depth="0.5em">A</span>
</h1>

Structurally, ztext turns that code into this:

<h1 data-z data-z-layers="3" data-z-depth="0.5em">
   <span class="z-text">
      <span class="z-layers">
         <span class="z-layer">A</span>
         <span class="z-layer">A</span>
         <span class="z-layer">A</span>
      </span>
   </span>
</h1>

Preview

A

The duplicate layers are visible to users but ztext makes them hidden from screen readers and other forms of user interaction.

Initialize with JavaScript

Use ztext with vanilla JS with new Ztextify(selector, {}). This constructor accepts two arguments: the HTML element selector and an options object.

JS
var ztxt = new Ztextify(".hero-text", {
   depth: "30px",
   layers: 8,
   fade: true,
   direction: "forwards",
   event: "pointer",
   eventRotation: "35deg"
});

Use with React

Use with Vue

Styling

Start with this CSS snippet and style ztext any way you want. Ztext works with absolutely any font that works on the web. Plus, it's easy to integrate with CSS animations and transitions.

CSS
h1 {
   font: bold 5em "Georgia", serif;
   color: #90a4ae;
}.z-text {
   /* Tip: Apply CSS transforms here */
   /* rotateX() == up/down */
   /* rotateY() == left/right */
   transform: rotateX(15deg) rotateY(-30deg);
}
.z-layer:not(:first-child) {
   color: #455a64;
}

CSS

But wait, there's more!

Ztext isn't just for text. Add a third dimension to SVG, emojis, and images.

HTML
<span data-z data-z-layers="15" data-z-depth="50px">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="200" height="200">
       <path d="..." />
    </svg>
</span>
<span data-z data-z-depth="40px">
   <img width="150" height="120" src="images/grace.jpg" alt="Photo of Grace">
<span>
<span data-z data-z-layers="20" data-z-depth="50px">😂🔥🍔</span>

CSS
.z-layer:not(:first-child) {
   filter: brightness(0.7);
}

Photo of Grace 😂🔥🍔

Options

1rem

60px

depthCSS length value

The depth of the effect on the z-axis. Accepts any valid CSS length value except for %. Default: "1rem"

10

2

layersinteger

Number of layers that make up the effect. Default: 10

none

80px

500px

perspectiveCSS length value, "none", or "inherit"

Set distance from the viewer. Default: 500px

true

fadeboolean

Make the text fade away. Default: false

both

backwards

forwards

direction"both" | "backwards" | "forwards"

The direction the effect is to be applied. Default: "both"

none

pointer

scroll

event"none" | "pointer" | "scroll" | "scrollX" | "scrollY"

Control text rotation with JavaScript. Default: "none"

This does not override rotations applied with CSS to .z-text. It will add to those rotations. This allows you to set a start rotation with CSS.

"pointer" rotates text in response to the mousemove and touchmove events.

"scroll" rotates text toward the center of the viewport.

"scrollX" rotates text toward the horizontal center of the viewport.

"scrollY" rotates text toward the vertical center of the viewport.

10deg

60deg

eventRotationCSS rotation value

With the event option enabled, set the maximum rotation to be applied. Default: "30deg"

default

reverse

eventDirection"default" | "reverse"

With the event option enabled, choose whether the rotation faces toward the target point (default) or away from it (reverse). Default: "default"