https://framer.com/m/Liquidmask-FEkATP.js
Io / Enhancements / EtchedPortraitReveal
EtchedPortraitReveal
EtchedPortraitReveal redraws an image as a live copperplate engraving, then lets the photograph bleed back through under the pointer or as the page scrolls.
Examples
Live specimens for every control the component exposes.
Default
The engraving is computed from the picture in real time — no pre-rendered artwork. The base image should be mid-dark and horizontal; a bright or busy source turns the hatching to noise.
Engraving density
lineCount is how many engraving lines cross the width, from 40 to 400. Fewer lines read as a woodcut, more as a banknote.
line count 60
line count 140
line count 300
Angle and hatch
lineAngle turns the whole plate. crossHatch fades a second layer of lines into the deep shadows — 0 leaves the shadows in single hatch.
angle 0°
angle 45°
cross hatch 0
Warp and wobble
warpStrength bends the lines around the tones in the picture; wobble adds the hand-cut irregularity that keeps it from looking printed.
default ink
warp 2×
wobble up
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for EtchedPortraitReveal
A portrait or hero image should arrive as an engraving and resolve into a photograph.
The treatment must be computed live so any image can be dropped in.
Ink and paper colours need to sit with the rest of the palette.
The reveal should follow the pointer, or dissolve on scroll.
Reach for something else
The source is bright, pale or vertical — the hatching will read as noise.
You need a plain image treatment — use a fill and a filter.
The picture must stay legible at small sizes — the lines collapse.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.