Text Reveal Shader
Words condensing out of light into liquid chrome.
PrimitiveShadersAdvanced
$ npx remotion-ui@latest add text-reveal-shaderThe copy is rasterised once to an alpha texture and handed to a fragment shader as its source, so the shader reads glyph coverage and generates everything else per pixel. That is what buys the refraction: a CSS or SVG mask can uncover letterforms but cannot bend them through a moving film, because it has no access to the pixels either side of the edge it is drawing.
The reveal is a diagonal sweep whose threshold is perturbed by two crossed
sines, one running in x and one in y at unrelated periods. One sine alone gives
a wavy line that still reads as a machine wipe; crossing two breaks the repeat
and the edge reads as a wet meniscus pulling across the letters. wobble sets
how hard they bend it, and 0 gives a straight wipe.
Two values carry the look, and they are where to spend time tuning:
bandWidth is the width of a narrow exponential band pinned to the edge. Inside
it the glyph is refracted, with the displacement taken from differences between
channels of the iridescent field, so the offset follows whatever the film is
doing locally rather than pushing in a fixed direction, and the three channels
are sampled at decreasing strength to disperse the edge into colour. Widen it
and the effect becomes a general blur; narrow it and it reads as a clean
chromatic rim.
settle is how long after the edge has passed the glyph interior takes to relax
from the live iridescent field to flat silver. This is what makes the words read
as condensing out of light rather than as light-coloured type being uncovered.
Set it high and the letters never stop shimmering; set it near zero and they
snap to chrome the instant the edge clears them.
delay and duration are in frames. The face is worth pinning explicitly via
fontFamily: the glyphs become a texture, so an unpinned system stack resolves
differently on a dev machine and a render worker.
Distinct from masked-slide-reveal, which slides a hard-edged mask over type,
and from light-sweep-text, which passes a specular highlight across glyphs
that are already fully visible.
Render with --gl=angle. Motion comes from the frame only, so the same frame
renders to identical pixels every time.
The type is rasterised once to an alpha texture and handed to a fragment shader as its source, which is what buys the refraction: a CSS or SVG mask can uncover letterforms but cannot bend them through a moving film, having no access to the pixels either side of its edge. The reveal threshold is perturbed by two crossed sines at unrelated periods so the edge reads as a wet meniscus rather than a wipe. bandWidth and settle are where the taste lives. Distinct from masked-slide-reveal (hard-edged mask over type) and light-sweep-text (specular pass over already-visible glyphs). Render with --gl=angle.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/text-reveal-shader- Use when: full-frame shader backgrounds and ambient GPU fields.
- Customize: text, backgroundColor, colors, silverColor, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { TextRevealShader } from "@/remotion/primitives/text-reveal-shader";
// Render with --gl=angle
<TextRevealShader text={"LIQUID\nCHROME"} bandWidth={0.022} settle={0.16} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "LIQUID\nCHROME" | Copy to reveal. Newlines start a new line; the block stays centred. |
| backgroundColor | string | "#050505" | Plate behind the words. |
| colors | [string, string] | ["#e4ac59", "#f0abc0"] | The two ends of the iridescent film the words condense out of. |
| silverColor | string | "#ded8cf" | Colour the glyph interior settles to once the edge has passed. |
| angle | number | 34 | Direction of the sweep, in degrees. 0 sweeps left to right. |
| delay | number | 0 | Frame the reveal starts on. |
| duration | number | 78 | How many frames the sweep takes to cross the frame. |
| wobble | number | 0.06 | How far the two crossed sines bend the edge. 0 gives a straight wipe. |
| bandWidth | number | 0.022 | Width of the refracting band at the edge, in frame widths. Wider becomes a general blur; narrower reads as a clean chromatic rim. |
| refraction | number | 0.055 | How far the band displaces the glyph. |
| settle | number | 0.16 | How long after the edge the interior takes to settle to flat silver. |
| fontSize | number | 170 | Type size in px, measured against the composition height. |
| fontWeight | number | 800 | Weight passed to the canvas rasteriser. |
| fontFamily | string | "system-ui, -apple-system, Segoe UI, Roboto, sans-serif" | Worth pinning explicitly: the glyphs become a texture, so an unpinned stack resolves differently on a dev box and a render worker. |
| letterSpacing | number | 4 | Extra tracking in px. |
| lineHeight | number | 1.02 | Line height as a multiple of the type size. |