Cubist Planes

About this style

Analytic Cubism is the phase of Cubism that Pablo Picasso and Georges Braque developed in Paris between about 1909 and 1912. They broke objects into small faceted planes seen from several viewpoints at once, in a narrow range of ochres, browns and greys so color would not distract from structure, with shading that slides from one plane into the next. Stenciled letters and painted wood grain reminded viewers that a picture is a flat surface. Its multi-angle way of seeing still shapes editorial illustration, poster design and motion graphics.

Make a 10-second Analytic Cubist still life: a guitar, a bottle and a glass on a table break into faceted planes that turn to show other viewpoints, then lock into one composition.

<inputs>
Title: Table with Guitar, No. 4. Line: Oil on canvas, seen from several sides at once. Stenciled fragments: CAF and 32. Objects: a guitar, a wine bottle, a glass and a table edge. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette, the narrow Analytic range: ground ochre-grey #A8987C, ochre #B98B4E, light ochre #D8B67C, umber #6A4E31, warm grey #9D968A, cool grey #6E716D, slate #3D3F3C, cream light #E8DEC5, charcoal line #26221E. No other hues.
The still life, drawn once at load in three registered viewpoints at the same scale (guitar body centered at (900, 560), bottle at (1240, 430), glass at (640, 470), the table edge a tilted line across y 760):
- front view: the guitar lying on a −28° diagonal: a waisted figure-eight body 620px long, a round sound hole with a rosette ring, a bridge, six strings running up a neck with 12 frets to a headstock with six pegs; the bottle upright, 520px tall, a cylinder with sloping shoulders, a neck, a lip and a rectangular label; a tumbler 220px tall with an elliptical rim and base;
- top view: the guitar's sound hole as a full circle within its flat outline, the bottle as concentric circles (lip, shoulder, base), the glass rim as a full circle with its base inside;
- side view: the guitar as a thin profile showing the depth of its sides and the neck edge-on, the bottle and glass as profiles.
Facets: divide the picture into about 70 planes with seeded cut lines that lean within ±25° of vertical or horizontal and crowd toward a central pyramid, thinning toward the edges the way Analytic canvases dissolve at their margins. Each plane is assigned one viewpoint (about half front, a quarter each top and side) and shows that view's drawing clipped to it.
Cubist shading: each plane gets passage, a tonal ramp from dark along one or two of its edges to light across it, between two neighboring palette values, overlaid with small square-ended brush dabs (10–16px long, 6–9px wide) in short diagonal rows at 20%, generated once at load. Lines are charcoal, 2–4px and slightly broken, and some plane edges are left open so light planes bleed into the ground.
Two collage-era details: one plane carries combed faux-bois wood grain in ochre and umber (wavy parallel lines around two knots), and the fragments CAF and 32 sit on two planes in "Allerta Stencil" 400, 96px and 72px, charcoal, slightly uneven like paint brushed through a stencil.
Caption: the title in "Crimson Pro" 500 italic, 32px, cream light, and the line beneath it in Crimson Pro 400, 22px, tracked 0.08em, at bottom left from (120, 960), over the quiet edge of the picture.
Motion is analysis. Planes separate along their normals (6–14px) and gain a slight tilt (a narrowing on one axis); then each flips about its own long axis like a card (scale through 0 on cubic-bezier(0.65, 0, 0.35, 1) over 0.5s), showing its assigned viewpoint on the reverse, the flips sweeping outward from the center 30ms apart. Reassembly slides each plane home on cubic-bezier(0.22, 1, 0.36, 1) over 0.6s with no overshoot.
The real thing is one subject seen from several sides at once: a sound hole front-on beside a neck edge-on, a glass rim as a full circle over its profile, shading that slides from plane to plane; the cheap version is a low-poly triangle filter over a picture.
Banned: saturated color, reds, blues or greens, a low-poly triangle mesh, gradients spanning more than one plane, drop shadows, glow, 3D rendering or lighting, regular grids, real artists' signatures or painting titles, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–1.2s: the ochre-grey ground; the front-view still life draws on in charcoal (table edge, glass, bottle, then the guitar) with a light tonal wash, plainly readable.
1.2–2.2s: cut lines sweep out from the center; the picture splits into planes that part along their normals and tilt.
2.2–4.8s: the planes flip in a wave from the center outward, each turning to its assigned viewpoint and taking on its passage shading and brush dabs.
4.8–5.7s: the planes slide home and lock edge to edge; the composition is whole.
5.7–7.0s: charcoal scaffolding lines (a few long verticals and diagonals) draw across the planes and tie them together; the faux-bois plane combs in; CAF and 32 stencil on, letter by letter.
7.0–7.8s: the caption fades up, rising 10px.
7.8–10.0s: hold, completely still.
For other durations, scale every timestamp proportionally.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; no other libraries (no three.js: this style is flat). Draw in Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself: await document.fonts.load() for each face, then define window.seek. At load, render the three viewpoint drawings, the plane polygons, each plane's shaded front and back, the brush dabs and the faux-bois into offscreen canvases; each frame only transforms and composites them. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Anything cumulative is precomputed once at load at a fixed step or solved analytically from t, so any frame can be drawn directly. 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.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check the guitar, bottle and glass are still recognizable in the final frame (sound hole, strings and frets, the bottle's neck, the glass rim as a full circle), every plane shows passage rather than a flat fill, the locked planes leave no gaps, and only the palette's hues appear. Confirm seek(duration) and seek(duration + 1) 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

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…

Bauhaus Geometry

Made by us

A primary-colored circle, square and triangle roll, drop and turn into place on a black bar, assembling a constructed B…

Constructivist Poster

Made by us

A Constructivist poster in motion: red bars, a wedge piercing a black circle, halftone fields and condensed uppercase t…