AI CSS Animations

Impasto Paint

Under a raking light, a steel palette knife drags thick oil paint across linen toned raw sienna in 26 slabs of Prussian blue, burnt orange, Naples yellow, rose and white, leaving scraped streaks, raised edges and torn lips, until the camera pulls back on the finished abstract and its label.

Written and rendered by AI CSS Animations Oct 19, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
three.js
Topics
Shapes
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Impasto is paint applied so thickly that it stands up from the surface and keeps the marks of the brush or knife that laid it. Titian and later Rembrandt built up highlights with it, and Vincent van Gogh made its ridges central to his style in the 1880s. A palette knife spreads oil paint in flat, scraped slabs with raised edges and torn lips where the blade lifts, and Nicolas de Staël built abstract canvases from knife-laid blocks of color in the early 1950s. Painters and digital artists still prize the way a raking light catches its ridges.

The prompt

Make a 10-second impasto painting film: a palette knife drags thick oil paint across a toned canvas in slabs whose ridges and torn edges catch a raking light, until a bold abstract stands finished.

<inputs>
If I don't give you something, use the default and don't ask.
- Painter: Ines Varro (fictional).
- Painting: "Harbor, Late"
- Label line: "Oil on linen, palette knife · 80 × 60 cm"
- Paints: Prussian blue, burnt orange, Naples yellow, quinacridone rose, titanium white, ivory black.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a raking-light close-up of a painting being made: buttery oil paint laid in slabs with a steel palette knife on linen toned raw sienna. Every slab is flat and scraped in the middle, raised at its edges and torn into a lip where the knife lifted, lit low from the left so every ridge throws a small shadow.
- Palette: toned ground raw sienna #B8743E over linen #D8C7A8 (showing in a few bare patches); Prussian blue #1D3557, whose thin scrapes go #2E5C88; burnt orange #D9622B; Naples yellow #EBC46A; quinacridone rose #CC3F72; titanium white #F3EFE6; ivory black #1D1B1A, used once; knife steel #C7CBCF, walnut handle #5B3A26, brass ferrule #B98E4A; the wall beyond the canvas #2A2624; type #F3EFE6, secondary #BCAE9C. The warm sienna ground glows through every gap, so the cool blue slabs and the white read as light on water.
- The canvas: a plane 80 × 60 (1 unit = 1 cm) carrying the linen weave as a fine normal and the toned ground over it; the paint is a ShaderMaterial on that plane that evaluates, per fragment, every knife stroke laid so far, in order.
- A stroke is one drag of the knife along a quadratic Bézier of length L, W wide (3–9: the knife is held so its contact edge matches W, up to the blade's full length dragged edge-on), in stroke coordinates u (along, 0 to L) and v (across, −W/2 to W/2):
  - height: a flat, knife-pressed layer h₀ (0.08–0.15) under the blade with fine scrape streaks running along u (seeded 1D noise across v); squeezed-out ridges along both edges (a Gaussian 1.6·h₀ tall and 0.35 wide) whose outline breaks into a ragged, torn edge (noise along u); a heavier loaded blob at u = 0; a torn lip ridge 3·h₀ tall at u = L, where the blade lifted, pulled into small peaks; along the stroke the layer thins (h₀ falls by up to 60%) and in its last third it skips, leaving patches where the paint beneath shows through;
  - color: the stroke's paint, with an optional second paint loaded on one side of the blade and smeared into the first along a seam of long marbled streaks; where the knife drags across wet paint beneath, it picks up 15% of that color into its streaks;
  - layering: a later stroke covers what's under it wherever it has paint, and its blade flattens the old ridges it passes over (their height × 0.3).
- Lighting the paint, all in the paint shader, so the ridges carry the image: normals from the height field by finite differences; a raking key from the left at 22° elevation, warm #FFF1DE; Blinn–Phong specular for wet oil (shininess 90, strength 0.55) plus a broad softbox reflection; self-shadowing by marching the height field 6 steps toward the key, so ridges throw short soft shadows to their right; a cool ambient #8C96A8 at 30% in the shadows. The toned ground and bare linen stay clearly readable and nothing goes black.
- The knife, a real trowel palette knife (MeshPhysicalMaterial steel, metalness 1, roughness 0.2, envMap from RoomEnvironment through PMREMGenerator): a pear-shaped blade 10 long and 5 wide at its widest and 0.05 thick, a cranked shank with two bends, a brass ferrule and a turned walnut handle. It rides each stroke's path tilted 18° to the canvas with its edge on the paint, bending slightly under pressure (a vertex bend toward the tip), the stroke's paint smeared on its underside and edge and thinning as it goes; it lifts off at u = L with a 0.15 s flick that makes the torn lip, and casts a soft shadow on the paint (a DirectionalLight from the key's direction, PCFSoftShadowMap, 2048).
- The composition, 26 strokes in three passes, built so it reads as a bold abstract of a harbor at dusk:
  1. blocking, 0.6–3.6 s: seven broad strokes, W 7–9: a Prussian blue mass across the lower half in three horizontal drags, a burnt orange band above it, Naples yellow across the top left, rose cutting in at the right;
  2. building, 3.6–5.8 s: eleven medium strokes, W 4–6, several two-loaded (blue with white, orange with rose), laid at angles across the blocks so ridges cross;
  3. accents, 6.4–8.0 s: eight short, quick strokes, W 3–5: white slabs and ticks over the blue like breaking light, one long Naples yellow drag and one short ivory black mark low at the left.
- Motion: the knife travels each path on cubic-bezier(0.45, 0, 0.25, 1): about 0.36 s per blocking stroke, then at time-lapse pace, 0.16 s per building stroke and 0.14 s per accent, with 0.04–0.07 s between strokes as it lifts, moves and settles onto the paint; a stroke is revealed exactly up to the knife's position, never ahead of it.
- Camera: fov 30, looking straight at the canvas from slightly left. It opens close, on a 24 × 13.5 window of bare toned linen at the lower left where the first strokes land, and drifts slowly right through the blocking at that macro scale (never whipping after the knife), ridges large and legible; it widens to a 48 × 27 window during the build; at 6.0 s it sits close on a just-finished two-loaded stroke with the knife lifted clear; from 6.4 s it pulls back to the whole painting with a margin of dark wall, the canvas about 1060px wide, centered at (1120, 500), by 8.0 s.
- Type (HTML over the canvas): a gallery label at bottom left, x 120–560, from y 900: the painter in Source Serif 4 600, 26px, #F3EFE6; the painting's title in Source Serif 4 400 italic, 26px; the label line in Inter Tight 400, 20px, secondary. Text rises 10px as it fades in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: paint you could touch: ridges, torn lips and scrape streaks catching a raking light, two paints marbling in one stroke, a knife that is clearly steel and casts a shadow. Cheap: flat colored rectangles, an emboss filter, brush strokes, paint appearing ahead of the knife.
Banned: brushes, smooth vector shapes, emboss or bevel filters, gradients not made by the paint, colors outside the six paints and the ground, mud (no stroke mixes more than two paints), hands, bloom, motion blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: close on the toned linen; the knife comes in loaded with Prussian blue and settles onto the canvas.
- 0.6–3.6s: the blocking: seven broad drags as the camera drifts right; ridges and torn lips large in frame.
- 3.6–5.8s: the build: the camera widens; two-loaded strokes marble blue into white and orange into rose; ridges cross ridges.
- 5.8–6.4s: a still beat: at 6.0 s the camera rests close on a finished two-loaded stroke, its ridges and torn lip lit hard from the left, the knife lifted clear above it.
- 6.4–8.0s: the camera pulls back to the whole painting as the accents land: white ticks, the long yellow drag, the one black mark.
- 8.0–8.6s: the knife lifts out of frame; the label rises in.
- 8.6–10.0s: hold.
For other lengths, add or remove building strokes; keep each stroke's own timing and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- The paint shader loops over the stroke array in order (uniform arrays of control points, widths, paints, h₀, seeds and start and end times), evaluating height and color up to each stroke's progress at t; normals and shadows re-evaluate the same height function. The knife's pose and bend and the camera are closed-form functions of t.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every stroke shows edge ridges, scrape streaks and a torn lip where it ends, the raking light makes ridges cast small shadows, paint never appears ahead of the knife, the knife reads as steel and casts a shadow, no stroke mixes more than two paints, the 6.0 s frame is a still, clean macro of ridged paint, and the finished painting reads as a bold composition with the label clear of it. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

More like this on the motion design inspiration board: Motion graphics inspiration