https://github.com/maximeij/css-text
🔠Web Component to render text using animatable CSS art while keeping browser text a11y
https://github.com/maximeij/css-text
css css-art css3 typescript vanilla-javascript web-component
Last synced: 5 months ago
JSON representation
🔠Web Component to render text using animatable CSS art while keeping browser text a11y
- Host: GitHub
- URL: https://github.com/maximeij/css-text
- Owner: MaximeIJ
- License: gpl-3.0
- Created: 2024-02-19T19:14:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T23:06:41.000Z (almost 2 years ago)
- Last Synced: 2025-01-24T01:47:28.276Z (over 1 year ago)
- Topics: css, css-art, css3, typescript, vanilla-javascript, web-component
- Language: CSS
- Homepage: http://maximeij.dev/css-text/
- Size: 348 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# css-text [](https://www.npmjs.com/package/@maximeij/css-text) [](http://vanilla-js.com/)
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 (`` for now), it's intended to integrate like regular text, being selectable, copy-pastable, and accessible.
## Quick start
```npm
npm i @maximeij/css-text
```
Remember to import the css (includes the default monospace font)
```typescript
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](src/fonts/monospace.css)
```html
CSS-TEXT DEMO
```
## 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 `absolute`ly 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, `transition`s 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](index.html) for a quick example of how to invoke it the component and customize it. The [demo](demo/main.ts) TS code has examples of ways to enable animation on changing text and granular `transition`s.
## Recent changes
- [Changelog](CHANGELOG.md)
## Coming soon
- Lowercase alphabet
- Punctuation
- React version