WebGL & shaders

Animated WebGL Text and Heading Generator

TypeMatter turns editable text into an animated WebGL heading, but the exported component still contains readable fallback text. You choose whether that text is an H1, H2, H3, paragraph, or span, then shape the typography, material, palette, motion, and effect area. The finished design can leave the editor as transparent artwork or as a responsive component ready for a web page.

What it does

  • Edit multiline heading text, font family, weight, italic style, capitalization, alignment, tracking, and line height.
  • Render the material as a glyph fill, outline, surrounding field, or light-emitting effect.
  • Choose silk, liquid glass, pigment, holographic foil, liquid chrome, or printed ink materials and edit a four-color palette.
  • Control animation speed, drift, shimmer, breathing, pointer response, and exact loop duration.
  • Select the exported semantic element and responsive CSS size while preserving visible fallback text.
  • Export component HTML, copy embeddable markup, save scene JSON, or render a transparent PNG.
TypeMatter
GLSL heading component studio
Responsive heading
100%
Rebuilding text field…
ReadySDF —Space plays · F previews · 0 fits

How to use TypeMatter

  1. Write and format the heading

    Enter up to 160 characters, choose the type style, and position, scale, or rotate the heading in the canvas.

  2. Choose a shader treatment

    Start from a direction preset, select the text role and material, then tune palette, distortion, highlights, glow, and texture.

  3. Set motion and semantics

    Adjust the animation and pointer response, then choose H1, H2, H3, paragraph, or span for the exported component.

  4. Export the result

    Download the standalone HTML component or transparent PNG, copy the embed code, or save the editable scene as JSON.

Formats, compatibility, and limits

Inputs

  • Up to 160 characters of multiline text.
  • Typography, shader material, palette, motion, semantic tag, quality, frame rate, and component sizing settings.
  • Optional TypeMatter scene JSON pasted into the export dialog.

Outputs

  • A standalone HTML heading component with scoped CSS, fallback text, a baked signed-distance field, and a minimal WebGL runtime.
  • Embeddable component markup copied to the clipboard.
  • A transparent PNG rendered at the configured production dimensions.
  • Portable TypeMatter scene JSON.

Compatibility

  • The editor and generated component use WebGL 2.
  • The component exposes a --tm-size CSS custom property for responsive sizing.
  • The exported runtime observes element size and visibility and honors the reduced-motion preference.

Known limits

  • Component and embed export are unavailable when the browser cannot create the compressed text-field payload.
  • The generated component relies on DecompressionStream to open its embedded deflate data.
  • Font choices use system font stacks, so the exact available face can vary between operating systems.
  • TypeMatter exports a component or still PNG, not a video file.

Privacy and processing

  • Text, shader settings, signed-distance-field generation, and exports are processed in the browser.
  • Downloaded HTML, PNG, and JSON files are created with local Blob URLs.
  • TypeMatter does not upload the authored text or scene and does not persist it in localStorage or IndexedDB.

How TypeMatter keeps shader headings semantic

TypeMatter rasterizes the current type layout into a signed-distance field. A WebGL 2 fragment shader uses that field as the glyph boundary. Material presets can fill the letters, trace their outline, distort the space around them, or treat them as an emitter. Separate motion uniforms control flow, shimmer, breathing, and pointer response. Export does not replace the heading with canvas-only pixels. It writes the selected H1, H2, H3, paragraph, or span as readable fallback text and places an aria-hidden shader canvas above it. Once WebGL is ready, the visual fallback disappears, but the semantic text stays in the document.

Questions about TypeMatter

Is exported TypeMatter text still a real heading?

Yes. You select the semantic element before export, and the generated component includes readable fallback text inside that H1, H2, H3, paragraph, or span. The shader canvas is marked aria-hidden.

Can I export TypeMatter with a transparent background?

Yes. The component output and PNG render only the typographic material and its effects; the editor's preview surface is not included.

Can I edit the design again later?

Yes. Download the scene JSON. When you come back, paste it into TypeMatter's JSON editor and apply it to restore the component settings.

Why can component export fail in some browsers?

The exporter compresses the baked text field with CompressionStream, and the generated component opens it with DecompressionStream. Browsers without those APIs cannot use that component export path.