css-text

Web Component to render text using CSS art allowing transitions between letter parts for text transform animations. While each character is wrapped in an html tag (<i> for now), it's intended to integrate like regular text, being selectable, copy-pastable, and accessible.

Quick start

npm i @maximeij/css-text

Remember to import the css (includes the default monospace font)

import '@maximeij/css-text';
import '@maximeij/css-text/css';

You need a font to determine the final shape of each letter. We currently provide a monospace adaptation in src/fonts/monospace.css

<css-text class="monospace">CSS-TEXT DEMO</css-text>

Going further

In the default monospace font, each letter is rendered using the ::before and ::after pseudo-elements. They are represented at border-box sized absolutely positioned transparent boxes with borders sized and shaped to imitate sections of the letter.

Regardless of the font's ultimate implementation of the art, this opens the possibility to animate the shape of each letter to some extent. In the monospace example provided, transitions can be configured to allow for the effect of a letter morphing into another one when a piece of text changes.

It could also allow for animation properties to further animate one or more letters, and combine with existing CSS concepts like :hover and :selected.

Example

See index.html for a quick example of how to invoke it the component and customize it. The demo TS code has examples of ways to enable animation on changing text and granular transitions.

Recent changes

• Changelog

Coming soon

• Lowercase alphabet
• Punctuation
• React version