A live WebGL piece that turns any photo into an architect's ink drawing and back: contour lines traced from the photo itself sweep across warm fibrous paper like a moving pen, fine broken hatching follows in the shadows, then a watercolor wash of the real colors blooms outward along a feathered front with darker tide lines at its edge, and finally the drawing lets go as the photograph sharpens into place. Driven by a 0 to 1 progress (made for scroll) or looping on its own. Paper and ink colors, line weight, line detail, speed and grain are props. Adapts its resolution, stops drawing once it catches up, holds the finished photo for reduced motion and shows the plain photo without WebGL.
The import and the props worth knowing about, in one place.
import { SketchToPhoto } from "@/components/beste/component/sketch-to-photo";
<SketchToPhoto
className="aspect-[4/3]"
imageSrc="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=2000&q=80"
imageAlt="A modern house with wide glass walls and a pool"
paperColor="#f1ece2" // any CSS color, tokens included
inkColor="#2b2723"
lineWeight={0.4} // hairline to bold, 0 to 1
lineDetail={0.5} // main contours only to every detail, 0 to 1
progress={0.5} // 0 paper, 0.4 drawn, 0.75 washed, 1 photo; leave it out to loop
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc* | string | — | Photo the drawing is made from. Loaded with CORS so WebGL can read it. Strong lines draw best. |
imageAlt | string | — | Description of the photo for screen readers. |
paperColor | string | — | Color of the paper. Any CSS color, tokens included. |
inkColor | string | — | Color of the pen lines and hatching. |
lineWeight | number | — | Thickness of the pen lines, 0 (hairline) to 1. |
lineDetail | number | — | How many edges of the photo become lines, 0 (only the main contours) to 1 (every detail). |
progress | number | — | Where the piece is, 0 to 1: blank paper, lines drawn by 0.4, watercolor washed in by 0.75, full photo at 1. Used when autoplay is off. |
autoplay | boolean | — | Loop the whole sequence on its own. Defaults to on when no progress is given. |
speed | number | — | Pace of the autoplay loop and of the easing toward a new progress, 1 is the default. |
grain | number | — | Paper grain, 0 to 1. |
paused | boolean | — | Freeze on the current frame. |
className | string | — | |
children | ReactNode | — |