WGLTR is a script that replaces HTML text rendering with animated canvas text rendering using WebGL. It also provides the ability to change the text animatedly.

How it works:

• The text and each internal text element is wrapped to preserve the color and made transparent
• The canvas is placed behind the text so that the text remains interactive
• Text position, size, color and styles are calculated and processed
• Unique glyphs are processed according to specified options and placed on the texture
• Generating a shader with the specified effects for the text
• 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.

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
• Effects: animated text effects
• Mouse effects: text effects that react to the cursor position
• Scroll effects: text effects that react to page scrolling
• Appear animation: animated text appearing with effects, configurable with various options
• Change animation: changing text statically or dynamically with effects
• Decorations: text decorations, which is a cutting out of different patterns with effects
• Backgrounds: static or animated backgrounds for text. Gradients or custom pictures
• High DPI: the rendered text automatically adjust to the device’s pixel ratio.

Changelog:

Version 1.0.0 – 12 December 2023

- WGLTR release