WGLTR Animated Dynamic Interactive WebGL Text Renderer

0
Effects
Presets
0
Static Effects
Presets
0
Appear Effects
Presets
0
Scroll Effects
Presets
0
Mouse Effects
Presets
0
Decorations
Presets
0
Backgrounds
Presets

How it works

Main work of the script

01 Text processing

The text and each internal text element is wrapped to preserve the color and made transparent.


02 Canvas placement

The canvas is placed behind the text so that the text remains interactive.


03 Text calculations

Text position, size, color and styles are calculated and processed.


04 Texture generation

Unique glyphs are processed according to specified options and placed on the texture.

05 Shader generation

Generating a shader with the specified effects for the text.

06 Text drawing

The text is displayed on the canvas with the specified effects in the options.


Limitations

Letters that change their form depending on their position in relation to other letters are only supported word by word with the split option. Stylistic ligatures must be specified manually in the ligatures option.
The CSS properties text-decoration, text-overflow and writing-mode are not supported. The CSS properties transform, font-variant and hyphens have limited support. More details.

Features

The script main features

Interactive

The text remains interactive, only the rendering changes

Listens to changes

The script automatically updates the text and its color

Internal elements

Internal elements can have their own options with different effects

Decorations

Text decorations, which is a cutting out of different patterns with effects

Appear animation

Animated text appearing with effects, configurable with various options

Change animation

Changing text statically or dynamically with effects

Effects

Animated text effects

Mouse effects

Text effects that react to the cursor position

Scroll effects

Text effects that react to page scrolling

Backgrounds

Static or animated backgrounds for text. Gradients or custom pictures

High DPI

The rendered text automatically adjust to the device's pixel ratio

No dependencies

The minified script takes ~89 kb, gzipped ~32 kb

Installation

Different ways to install the script

html Attribute
js JavaScript
ts TypeScript
vue Vue.js
react React.js
HTML Code
Installation by attribute
To install the script using HTML attributes you need to:
  • Add the <script> tag at the end of the page.
    The tag must have the src attribute with the path to the minified script
  • Place the data-wgltr attribute with the necessary options inside on the elements on which you want to apply the script.
Customization
Here you can customize the text and get options.
Simple
Flexible
Advanced
Sample text Sample text
 
Attribute options
Javascript options
Options
Click on an option for a more detailed description.
General
Decorations
Effects
Appear
Disappear
Change
FAQ
You can ask a question at any time on the item page.
For which cases the script is intended?
The script is designed to animate and decorate the text header of the site, it can be one or more text headers on the page.
Any change in text can be animated?
Animated change can only be predefined or dynamic by calling a special method. A simple text set will happen without animation.
What elements are suitable for the script?
The script works with block HTML elements that contain text. To use it on inline elements you need the wrapOnly option.
Are custom fonts supported?
Yes. The 2D context of the canvas is used to draw the glyphs.
Is Emoji supported?
Yes, Emoji are rendered in color on the canvas. Pictograms have the text color.
Is RTL text supported?
Yes, the RTL text will be rendered in the correct order, and the text will appear from right to left.
But languages in which letters that change their form depending on their position in relation to other letters, such as Arabic, are only supported word by word with the split option.
WebGL is not supported by your browser.