A live WebGL piece that recuts any photo as a banknote-style intaglio engraving: fine parallel lines swell with the shadows and bend around the form, a second set crosses only in the deepest darks, and the whole plate sits pressed into warm, fibrous paper with a soft bevel. The lines are cut in one by one along their direction on arrival, then drift very slowly, and a soft loupe follows the cursor to reveal finer line work. Ink and paper colors, density, angle, contour, cross hatching, loupe, grain and speed are props. Adapts its resolution, idles at 30fps, shows a still print for reduced motion and a toned photo without WebGL.
The import and the props worth knowing about, in one place.
import { LineEngraving } from "@/components/beste/component/line-engraving";
<LineEngraving
className="aspect-[4/5] w-full max-w-md"
imageSrc="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=1200&h=1500&fit=crop&q=80"
imageAlt="Portrait of a bearded man in a dark shirt"
inkColor="#18222f" // any CSS color, tokens included
paperColor="#f3eee3"
density={0.55} // open to very fine, 0 to 1
angle={28} // direction of the lines, in degrees
contour={0.5} // how far the lines bend around the form
crossHatch={0.6} // crossing lines in the deepest shadows
loupe={0.6} // finer lines under the cursor, 0 turns it off
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc* | string | — | Photo the engraving is cut from. Loaded with CORS so WebGL can read it. Portraits on a plain ground engrave best. |
imageAlt | string | — | Description of the photo for screen readers. |
inkColor | string | — | Color of the printed lines. Any CSS color, tokens included. |
paperColor | string | — | Color of the paper. |
density | number | — | How close the lines sit, 0 (open) to 1 (very fine). |
angle | number | — | Direction the lines run, in degrees. |
contour | number | — | How far the lines bend to follow the form, 0 (straight) to 1. |
crossHatch | number | — | Second set of crossing lines in the deepest shadows, 0 (none) to 1. |
loupe | number | — | Strength and size of the loupe that follows the cursor with finer lines, 0 (off) to 1. |
speed | number | — | Pace of the draw-in and the slow drift of the lines, 1 is the default. |
grain | number | — | Paper grain, 0 to 1. |
plateMark | boolean | — | Pressed plate mark around the engraving, like an intaglio print. |
interactive | boolean | — | Follow the cursor with the loupe. |
paused | boolean | — | Freeze on the current frame. |
className | string | — | |
children | ReactNode | — |