Impasto
A live oil painting that paints itself from any photo: thick brushstrokes follow the picture's contours from broad blocking-in to fine detail, each with bristle grooves and ridges of paint, lit by a raking light that glints on the wet surface while linen shows through the thin passages. The light follows the cursor, dragging with a mouse lays fresh strokes, and the finished canvas is slowly painted over again. Stroke size, count, pace, thickness, flow, sheen, canvas texture and primer are all props. Adapts its resolution, pauses offscreen, paints the finished canvas at once for reduced motion and falls back to the plain photo without WebGL.
Usage
The import and the props worth knowing about, in one place.
import { Impasto } from "@/components/beste/component/impasto";
<Impasto
className="aspect-[4/3]"
src="https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?w=1600&q=80"
alt="Sunrise over a misty valley"
strokeSize={0.7} // broader brushwork, 0 to 1
thickness={0.8} // taller ridges of paint
flow={0.4} // looser, swirling strokes
sheen={0.6} // wet shine under the light
repaint={0} // keep the finished painting
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Photo the painting is made from. Loaded with CORS so the canvas can read its colors. |
alt | string | — | Description of the photo for screen readers. |
strokeSize | number | — | Size of the brushstrokes, 0 (fine) to 1 (broad). |
strokes | number | — | Brushstrokes laid down for one painting. |
paintTime | number | — | Seconds one painting takes to lay down. |
thickness | number | — | Height of the paint ridges under the raking light, 0 to 1. |
flow | number | — | How closely strokes follow the photo's contours, 0 (loose swirl) to 1 (along every edge). |
sheen | number | — | Wet shine on the paint, 0 to 1. |
canvasTexture | number | — | Linen weave showing through thin paint, 0 to 1. |
repaint | number | — | Seconds a finished painting rests before it is painted over again; 0 keeps it. |
primerColor | string | — | Color of the primed canvas. Any CSS color. |
lightFollow | boolean | — | The raking light follows the cursor. |
interactive | boolean | — | Dragging with a mouse lays fresh strokes. |
paused | boolean | — | Freeze the painting where it is. |
className | string | — | |
children | ReactNode | — |
