WebGL & shaders

Fluid Text Effect and Typography Poster Generator

In TypeMatter Flow, the letters are solid obstacles inside a directional fluid simulation. Build the composition from as many as eight text segments, point the current where you want it to travel, and adjust the wakes, turbulence, pressure, and surface finish. A pointer-controlled vortex lets you disturb the flow directly. The finished poster exports as a high-resolution PNG or responsive standalone HTML with selectable SVG text.

What it does

  • Compose one to eight text segments with individual font, weight, scale, and line-break controls.
  • Use the rendered letter shapes as solid boundaries that redirect velocity and create wakes.
  • Choose the current direction and tune speed, turbulence, vorticity, shedding, wall slip, stream boost, and a pointer vortex.
  • Switch between draft, balanced, and fine simulation grids and adjust pressure iterations.
  • Style the fluid with material, source, palette, riverbed, refraction, foam, lighting, and finishing controls.
  • Export a selectable-text standalone HTML poster or a PNG up to ten megapixels.
TypeMatter Flow
Phase 3.7 · selectable type · circulation vortex
Stable fluid · optical water · stone type
Initializing WebGL 2…

Fluid rendering unavailable

WebGL 2 and renderable floating-point textures are required.

100%
Simulation—
Submit / step—
Projection—
Dye leakage—
Wake curl—
Stroke retention—

How to use TypeMatter Flow

  1. Compose the type obstacle

    Add text segments or lines, choose the font and weight for each, then adjust alignment, scale, rotation, position, and hydraulic thickness.

  2. Direct the current

    Pick one of eight direction buttons or set an exact angle, then choose a flow character and tune the solver and wake controls.

  3. Finish the material

    Select a visual preset and adjust the palette, background, stone color, surface depth, refraction, foam, lighting, and grain.

  4. Settle and export

    Let the simulation run or settle additional steps, choose the poster dimensions, and download standalone HTML or a high-resolution PNG.

Formats, compatibility, and limits

Inputs

  • One to eight text segments with per-segment font, weight, and scale settings.
  • Type layout and obstacle-boundary settings.
  • Flow direction, solver, current, vortex, material, palette, and finishing parameters.
  • Output dimensions from 320 to 4096 pixels per side, subject to the total pixel limit.

Outputs

  • A high-resolution PNG at the configured poster dimensions.
  • A standalone HTML poster containing the specialized solver, baked obstacle field, compressed text distance field, responsive canvas, and selectable SVG text layer.

Compatibility

  • The editor and exported poster require WebGL 2 with renderable floating-point textures.
  • The interface rearranges the canvas and controls for narrow screens.
  • Exported HTML uses gzip compression when CompressionStream is available and falls back to run-length encoding otherwise.
  • The animation responds to reduced-motion preferences.

Known limits

  • Output is limited to 4096 pixels per side and ten megapixels in total.
  • The maximum text composition is eight segments, with 32 characters per segment.
  • Fine simulation detail increases GPU work but does not increase the poster's pixel dimensions.
  • PNG export can fail on devices that cannot read the floating-point rendering output.
  • The tool exports HTML or PNG, not a video file.

Privacy and processing

  • Text, simulation state, obstacle maps, and image data are generated locally in the browser.
  • HTML and PNG exports are created on the device through temporary Blob URLs.
  • TypeMatter Flow does not upload or persist the text composition or solver settings.

How letterforms become fluid boundaries

TypeMatter Flow rasterizes the composition at high resolution, builds a signed-distance field, and maps the covered letter shapes into an obstacle texture for the simulation grid. Its WebGL 2 solver moves velocity and dye, adds the current and pointer vortex, calculates curl and divergence, iterates pressure, and projects the velocity field around the solid letter boundaries. The renderer then combines dye, velocity, pressure, curl, the text field, and the surface controls into the final material. Standalone export bakes the obstacle and cropped text field into the HTML, with a separate selectable SVG text layer above the canvas.

Questions about TypeMatter Flow

Is the text in an exported TypeMatter Flow poster selectable?

Yes. The standalone HTML places a selectable SVG text layer over the animated fluid canvas while using baked letter shapes for the simulation obstacle.

Does simulation detail control PNG resolution?

No. Draft, balanced, and fine only change the fluid grid. The PNG and poster dimensions are set separately in the Output panel.

What browser features does TypeMatter Flow require?

It needs WebGL 2 and the EXT_color_buffer_float extension so the velocity, pressure, dye, and obstacle targets can use floating-point rendering.

Does TypeMatter Flow upload my text or poster?

No. Text shaping, simulation, PNG encoding, and standalone HTML generation occur in the browser.