https://framer.com/m/LiquidMaskTimeline-gE3OWu.js

Io / Enhancements / LiquidMaskTimeline

LiquidMaskTimeline

A scroll-scrubbed dissolve between two layers. A narrow incandescent front sweeps across layer A, and what is behind it is simply layer B — no void, no intermediate state. Everything worth looking at happens at the edge: a white-hot rim falling off through amber, with fine sparks thrown clear of it.

Enhancements54 controlstwo layersscroll-scrubbed

Examples

Live specimens for every control the component exposes. On the canvas the component always runs in Manual, so each frame below is frozen at the Progress it was given.

Default

Two photographs, everything else left at its defaults. This is the only specimen on the page driven by Scroll — on the published page it scrubs as the section travels through the viewport, between Scroll Start and Scroll End.

Progress

Driven By decides where progress comes from. Scroll maps the section’s travel through the viewport onto 0 → 1; Manual freezes it at Progress, which is what the canvas always uses so you can scrub while designing.

progress 0.30

progress 0.45

progress 0.75

Front shape

Radial opens from a point placed by Center X and Y. Linear sweeps a straight edge across at Sweep. Irregularity keeps the radial front off a perfect circle, which reads synthetic instantly.

radial · center 0.5 0.5

radial · center 0.22 0.72

linear · sweep 135°

Edge and rim

Burst throws fine specks off a band wider than the rim; Tear replaces them with a torn fringe. The rim itself is two-tone — white-hot exactly on the line, falling off through amber — and Silver Rim at 0 turns it off entirely.

burst

tear

silver rim 0

Layer B

Either layer takes an image or a video, and layer B can also be a flat colour — the cheapest way to burn a picture off to the surface behind it. Video layers either autoplay or scrub with Progress.

B: photograph

B: flat colour

Props

Every control on the instance panel. Twenty-four of them only appear once Advanced is switched on; those rows are marked Advanced.

PropTypeBehaviour
typeAenum"Layer A" — Image or Video for the layer that burns away.
imageAimage"Source A" — the picture in layer A. Mid-dark and horizontal reads best.
videoAfile"Source A" when Layer A is Video. mp4, webm or mov.
playbackAenum"Playback A" — Autoplay, or Scrubbed to map the clip onto Progress.
typeBenum"Layer B" — Image, Video or Color for what is revealed.
imageBimage"Source B" — the picture behind the front. There is nothing between the two layers.
videoBfile"Source B" when Layer B is Video.
playbackBenum"Playback B" — same choice as Playback A, for layer B.
colorBcolor"Source B" when Layer B is Color. Burns the picture off to a flat colour.
progressSourceenum"Driven By" — Scroll or Manual. The canvas always uses Manual.
previewProgressnumber"Progress" — 0 to 1. The frame shown in Manual, and while designing.
scrollStartnumberWhere in the section's travel through the viewport the dissolve begins.
scrollEndnumberWhere it finishes.
frontShapeenum"Front" — Radial opens from a point, Linear sweeps a straight edge.
sweepAnglenumber"Sweep" — angle of the linear front, in degrees.
centerXnumberHorizontal position of the radial front, 0 to 1.
centerYnumberVertical position of the radial front, 0 to 1.
dissolveTrackarray"Dissolve" — at / value keyframes that sweep the front across.
charWidthnumber"Char Width" — gap between the front eating A and the front revealing B. Below this width the hole is all char band.
heatTrackstring"Heat" — at / value keyframes for how hot the front burns.
etchATrackstring"Etch A" — keyframes for how heavily layer A is etched as the front passes.
edgeStyleenum"Edge" — Burst throws sparks off the front, Tear leaves a torn fringe.
frontWidthnumber"Spark Band" — how far sparks reach from the edge. Does not soften the cut.
maskSoftnessnumber"Cut Softness" — 0 is a hard cut; above 0 the layers ghost through each other.
rimColorcolor"Rim Core" — white-hot, exactly on the line.
rimWarmColorcolor"Rim Falloff" — the warm shoulder that makes it read as burning rather than drawn.
sparkleTrackarray"Sparkle" — keyframes for how many specks ride the front.
fringeWidthnumber"Fringe" — width of the torn fringe, Tear only.
fringeAmountnumber"Fringe Opacity" — Tear only.
fringeColorcolorColour of the fringe.
washBTrackarray"Fade B" — the same for layer B.
pushAobjectScale of layer A, from / to, across the dissolve.
pushBobjectScale of layer B, from / to.
backgroundColorcolorColour behind both layers.
advancedbooleanReveals the tuning group: damping, grain, sparkle, rim, depth, bloom and fade-in.
dampingnumberAdvanced — how heavily the scrub lags the scroll. Lower is heavier.
irregularitynumberAdvanced — noise on the front's radius. 0 gives a perfect circle, which reads synthetic.
frontNoiseScalenumberAdvanced — "Front Detail". Low for an organic burst, 25 to 40 for torn paper fibre.
etchEdgenumberAdvanced — "Etch Halo Amt", extra etch in a band just ahead of the front.
etchHalonumberAdvanced — "Etch Halo", the width of that band.
etchColorcolorAdvanced — "Etch Lines", colour of the etched lines.
dustDensitynumberAdvanced — "Dust Grid", base bokeh size; a finer layer rides on top of it.
dustAmountnumberAdvanced — "Dust Cover", coverage scale. Cores are meant to saturate — that is where the near-solid embers come from.
dustRatenumberAdvanced — "Dust Rate", how fast the dust turns over.
glowSpillnumberAdvanced — "Glow Spill", additive light thrown onto the unburned side while molten.
heatShimmernumberAdvanced — "Heat Shimmer", refraction and chromatic split on A along the front’s normal.
sparkleDensitynumberAdvanced — "Sparkle Grid", the size of the speck grid, 60 to 900.
sparkleAmountnumberAdvanced — "Sparkle Count". Above ~0.15 it reads as static rather than sparks.
edgeBoilnumberMovement in the outline with no scroll at all. 0 freezes it.
edgeBoilSpeednumberAdvanced — "Boil Speed", how fast the boiling edge moves.
sparkleRatenumberAdvanced — twinkles per second per speck; each speck has its own phase.
sparkleDriftnumberAdvanced — how far a speck moves over its life. At 0 they blink in place.
spikeLengthnumberAdvanced — length of the star spikes. 0 gives round dots, which read as noise.
sparkleColorcolorAdvanced — colour of the specks.
washColorcolorAdvanced — "Fade Toward", the colour Fade A and Fade B pull each layer toward.
washDesatnumberAdvanced — "Fade Desat", how far that fade desaturates on the way.
depthAnumberAdvanced — parallax displacement on layer A while it pushes.
depthBnumberAdvanced — the same displacement for layer B.
bloomTrackarrayAdvanced — "Bloom" keyframes for the glow over the brightest parts of the edge.
bloomThresholdnumberAdvanced — brightness above which the bloom takes hold.
fadeInDurationnumberAdvanced — "Fade In", how long the canvas takes to fade up on load, in seconds.
PropTypeBehaviour
typeAenum"Layer A" — Image or Video for the layer that burns away.
imageAimage"Source A" — the picture in layer A. Mid-dark and horizontal reads best.
videoAfile"Source A" when Layer A is Video. mp4, webm or mov.
playbackAenum"Playback A" — Autoplay, or Scrubbed to map the clip onto Progress.
typeBenum"Layer B" — Image, Video or Color for what is revealed.
imageBimage"Source B" — the picture behind the front. There is nothing between the two layers.
videoBfile"Source B" when Layer B is Video.
playbackBenum"Playback B" — same choice as Playback A, for layer B.
colorBcolor"Source B" when Layer B is Color. Burns the picture off to a flat colour.
progressSourceenum"Driven By" — Scroll or Manual. The canvas always uses Manual.
previewProgressnumber"Progress" — 0 to 1. The frame shown in Manual, and while designing.
scrollStartnumberWhere in the section's travel through the viewport the dissolve begins.
scrollEndnumberWhere it finishes.
frontShapeenum"Front" — Radial opens from a point, Linear sweeps a straight edge.
sweepAnglenumber"Sweep" — angle of the linear front, in degrees.
centerXnumberHorizontal position of the radial front, 0 to 1.
centerYnumberVertical position of the radial front, 0 to 1.
dissolveTrackarray"Dissolve" — at / value keyframes that sweep the front across.
charWidthnumber"Char Width" — gap between the front eating A and the front revealing B. Below this width the hole is all char band.
heatTrackstring"Heat" — at / value keyframes for how hot the front burns.
etchATrackstring"Etch A" — keyframes for how heavily layer A is etched as the front passes.
edgeStyleenum"Edge" — Burst throws sparks off the front, Tear leaves a torn fringe.
frontWidthnumber"Spark Band" — how far sparks reach from the edge. Does not soften the cut.
maskSoftnessnumber"Cut Softness" — 0 is a hard cut; above 0 the layers ghost through each other.
rimColorcolor"Rim Core" — white-hot, exactly on the line.
rimWarmColorcolor"Rim Falloff" — the warm shoulder that makes it read as burning rather than drawn.
sparkleTrackarray"Sparkle" — keyframes for how many specks ride the front.
fringeWidthnumber"Fringe" — width of the torn fringe, Tear only.
fringeAmountnumber"Fringe Opacity" — Tear only.
fringeColorcolorColour of the fringe.
washBTrackarray"Fade B" — the same for layer B.
pushAobjectScale of layer A, from / to, across the dissolve.
pushBobjectScale of layer B, from / to.
backgroundColorcolorColour behind both layers.
advancedbooleanReveals the tuning group: damping, grain, sparkle, rim, depth, bloom and fade-in.
dampingnumberAdvanced — how heavily the scrub lags the scroll. Lower is heavier.
irregularitynumberAdvanced — noise on the front's radius. 0 gives a perfect circle, which reads synthetic.
frontNoiseScalenumberAdvanced — "Front Detail". Low for an organic burst, 25 to 40 for torn paper fibre.
etchEdgenumberAdvanced — "Etch Halo Amt", extra etch in a band just ahead of the front.
etchHalonumberAdvanced — "Etch Halo", the width of that band.
etchColorcolorAdvanced — "Etch Lines", colour of the etched lines.
dustDensitynumberAdvanced — "Dust Grid", base bokeh size; a finer layer rides on top of it.
dustAmountnumberAdvanced — "Dust Cover", coverage scale. Cores are meant to saturate — that is where the near-solid embers come from.
dustRatenumberAdvanced — "Dust Rate", how fast the dust turns over.
glowSpillnumberAdvanced — "Glow Spill", additive light thrown onto the unburned side while molten.
heatShimmernumberAdvanced — "Heat Shimmer", refraction and chromatic split on A along the front’s normal.
sparkleDensitynumberAdvanced — "Sparkle Grid", the size of the speck grid, 60 to 900.
sparkleAmountnumberAdvanced — "Sparkle Count". Above ~0.15 it reads as static rather than sparks.
edgeBoilnumberMovement in the outline with no scroll at all. 0 freezes it.
edgeBoilSpeednumberAdvanced — "Boil Speed", how fast the boiling edge moves.
sparkleRatenumberAdvanced — twinkles per second per speck; each speck has its own phase.
sparkleDriftnumberAdvanced — how far a speck moves over its life. At 0 they blink in place.
spikeLengthnumberAdvanced — length of the star spikes. 0 gives round dots, which read as noise.
sparkleColorcolorAdvanced — colour of the specks.
washColorcolorAdvanced — "Fade Toward", the colour Fade A and Fade B pull each layer toward.
washDesatnumberAdvanced — "Fade Desat", how far that fade desaturates on the way.
depthAnumberAdvanced — parallax displacement on layer A while it pushes.
depthBnumberAdvanced — the same displacement for layer B.
bloomTrackarrayAdvanced — "Bloom" keyframes for the glow over the brightest parts of the edge.
bloomThresholdnumberAdvanced — brightness above which the bloom takes hold.
fadeInDurationnumberAdvanced — "Fade In", how long the canvas takes to fade up on load, in seconds.

Usage

Guidance carried over from the component definition.

Reach for LiquidMaskTimeline

A section should hand one photograph over to another as it scrolls, and the handover is the point.

The transition has to land on the same frame every time — scrubbed, not timed.

The edge is meant to be looked at: heat, sparks and a rim, not a crossfade.

A hero or chapter break can afford a WebGL canvas.

Reach for something else

A plain crossfade is enough — an appear effect costs a fraction of a WebGL canvas.

The two pictures are unrelated; the dissolve then reads as a glitch rather than a transition.

The block must survive without WebGL, or sit many-to-a-page on mobile.

Io — Enhancements

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.

io

An experiment in what a design system becomes when AI can consume it.

© 2026 io

Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.