# Bauhaus composition hero > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The top of a website for a fictional design summer school, Werkhalle. On the left is a 136px black Archivo headline ("Shape / is a / verb.", with the last word in red), a short lede, a blue CTA and a three-cell stat row. On the right is a 560px square "poster" holding seven flat shapes in red, blue, yellow and black, printed with `mix-blend-mode: multiply` so overlaps darken the way overprinted ink does. Clicking the poster, or one of three Roman-numeral buttons, rearranges the same seven shapes into a different composition. Every shape moves, resizes and rotates on a 900ms expo-out curve with a 60ms stagger. What makes it worth copying: one set of DOM nodes, three coordinate tables, and the motion does all the work. ## Reference behaviour 1. Initial state: composition I ("Weight") is shown. The big red circle sits top-left, a black half-disc and ring top-right, a blue square bottom-right, a yellow triangle under the circle, and a black bar along the bottom. The caption reads "I / III · Weight · The circle anchors the corner." and button I is pressed. 2. The grid behind the shapes (70px squares, 1px `--line`) shows through every shape because of `multiply`. 3. Click anywhere on the poster: the poster advances to the next composition (I → II → III → I). 4. During the change, each shape transitions `transform` (translate + rotate), `width` and `height` over 900ms with `cubic-bezier(.16,1,.3,1)`. Shape *n* starts `n × 60ms` late (0–360ms across seven shapes). 5. Composition II ("Tension"): one 18 × 512px vertical bar splits the poster; the square tilts 12°, the half-disc flips 180° into a bowl, the circle drops bottom-right. 6. Composition III ("Rotation"): the bar crosses the poster at −32°, the square turns 45° into a diamond, the triangle points down, the half-disc stands on its side (90°). 7. Buttons I / II / III jump straight to that composition. Their `aria-pressed` reflects the current composition. 8. The caption updates its number, title and one-line description as the shapes move. It is a polite live region. 9. Clicking during a transition simply retargets: the CSS transitions pick up from the current in-flight values. 10. Nav links underline on hover (2px, 5px offset). The CTA turns from blue to black on hover; "Apply" in the nav turns red. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────────────┐ │ ●■▲ Werkhalle Programme Faculty Archive Visit [APPLY] │ 64 nav, 1px ink rule ├──────────────────────────────────────────────────────────────────────────────┤ │ S │ [FORM][COLOUR][TYPE] ┌──────────────── 560 ─────────────┐│ │ U │ Shape │ grid 70px ││ │ M │ is a 136px / .84 │ ● ◗ ││ │ M │ verb. (red) │ ○ ││ │ E │ lede 16px, 430px measure │ ▲ ■ ││ │ R │ [Apply by 31 January →] Read the… │ ▬▬▬▬▬▬▬▬▬▬▬▬ CLICK TO RECOMP ││ │ │ ───────────────────────── └──────────────────────────────────┘│ │ │ 06 weeks │ 60 places │ €1,480 I / III Weight desc [I][II][III] │ └──────────────────────────────────────────────────────────────────────────────┘ 56px gutters · columns: 1fr | 560px · gap 72px · hero padding 40 56 36 ``` - `