Kinetic Constructivism

# Visual style: Kinetic Constructivism

Constructivism set in motion. On bone-white paper, solid geometric primitives — discs, triangles, squares and thick diagonal bars in red, blue and yellow — are not placed but engineered to move along axes: discs orbit, triangles swing like pendulums, blocks march to a beat. The kinematics descend from El Lissitzky and Rodchenko posters; the rhythm comes from the machine itself.

## Philosophy
The kinetic-constructivist creed: geometry is not static ornament — it is a machine. Constructivism treats the canvas as engineering: the diagonal is a vector of force, the circle is an axis of rotation, the triangle is a wedge in motion. When those primitives actually move, the poster becomes the machine: every disc orbits, every diagonal drives forward.

Core principles:
- Primitives are parts: only the most basic geometry (circle, triangle, square, thick bar, arc), assembled like machine components; no illustration, no photography
- Motion is structure: animation is not garnish but the externalization of compositional relationships — discs orbit and spin, triangles swing, squares march to a beat, diagonal blocks sweep in
- Three colors, one ink, one paper: constructivist red #E0231B, ultramarine blue #1C4A87, chrome yellow #F4B301, on warm ink #17130E and bone paper #EFE9DC — never a fourth hue
- The diagonal is the main axis: organize key compositions along -30deg / -45deg diagonals for tension and direction; orthogonal layout is reserved for the stable scaffold
- Hard edges, zero radius: every edge is a knife-cut straight line, flat solid fills, no gradients, no shadows, no glow
- Mechanical easing: entrances use expo-out (fast start, slow settle), loops use linear or stepped gear motion, rebounds use restrained back — never a cutesy bounce

Design principles:
- Performance line: animate transform / opacity only; all geometric motion via transform (translate / rotate / scale), never triggering reflow
- Accessibility line: under prefers-reduced-motion every loop settles into its constructivist end-state; the frame remains a complete constructivist poster with zero information loss
- Rhythm line: only one group of primitives leads the motion per viewport while the rest holds a static scaffold, avoiding the cheap look of everything moving at once
- Typography: ultra-bold uppercase sans-serif headlines + tabular numeric labels; the type blocks are themselves part of the composition and may rotate along the diagonal

## Do
- Set the page on bone paper #EFE9DC with warm ink #17130E for a printed-poster feel
- Use only three accents — constructivist red #E0231B, ultramarine #1C4A87, chrome yellow #F4B301 — never a fourth
- Use only basic primitives: circle, triangle, square, thick diagonal bar, arc — flat fills, hard edges, zero radius
- Organize key compositions along -30deg / -45deg diagonals with rotated type blocks and color bands for directional tension
- Make primitives genuinely move mechanically: discs orbit/spin, triangles swing, squares march, diagonal blocks sweep
- Entrances use expo-out (cubic-bezier(0.16,1,0.3,1), 0.6-0.9s); rotation loops use linear or steps() for a gear feel
- Headlines in ultra-bold uppercase sans (Archivo/Anton family, wght 800-900) + tabular numeric labels
- Every animation ships a prefers-reduced-motion fallback that settles on the complete constructivist end-state

## Don't
- Never use rounded corners, shadows (md+), gradients, glow or blur — constructivism is knife-cut hard edges and flat color
- Never introduce a fourth hue, never use low-saturation pastels, never muddy the primaries
- Never let illustration, photography or 3D skeuomorphism steal the stage from geometry — primitives are the protagonist
- Never use cutesy bouncy easing or dragging loops over 1.2s
- Never let every primitive move at once (keep a static scaffold; one dominant motion at a time)
- Never animate top/left/width/height (layout thrash) — geometric motion uses transform only
- Never skip the prefers-reduced-motion fallback

## Rules for the AI
# Kinetic Constructivism Design System

You are an expert frontend developer specializing in kinetic constructivism. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Kinetic Constructivism
- **Essence**: geometric primitives are machine parts; motion is the externalization of compositional relationships — the poster moves
- **Mood**: rational, forceful, industrial, propaganda-poster directional tension
- **Inspiration**: El Lissitzky, Alexander Rodchenko, Varvara Stepanova Soviet constructivist posters; Bauhaus geometry; the primitive-in-motion origins of motion graphics

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Rounded corners / shadows / gradients / glow / blur | Constructivism is knife-cut hard edges + flat fills; any softening kills the industrial feel |
| A fourth hue / low-sat pastels / muddied primaries | Only red, blue, yellow + ink + paper; color is a structural signal, not atmosphere |
| Illustration / photography / 3D skeuomorphism | Basic primitives are the protagonist; anything else steals the stage |
| Cutesy bouncy easing / loops over 1.2s | Breaks the mechanical rhythm; use expo-out entrances, linear or stepped loops |
| Every primitive moving at once | Keep a static scaffold; one dominant motion at a time |
| Animating top/left/width/height/margin | Layout thrash; only transform and opacity may animate |
| Missing prefers-reduced-motion fallback | Accessibility is non-negotiable |

## Required

### The Frame (paper, ink, three colors)
- Background #EFE9DC (bone paper), body #17130E (warm ink)
- Three accents: constructivist red #E0231B, ultramarine #1C4A87, chrome yellow #F4B301
- Flat fills, hard edges (rounded-none), key blocks get a 2px or 4px ink stroke

### Primitive Library (only these)
Disc, triangle, square, thick diagonal bar, arc / concentric ring. Assemble like machine parts; no other shapes.

### Diagonal Composition
Organize key compositions along -30deg or -45deg diagonals; headline type blocks may rotate -3deg to -6deg; color bands cut in along the diagonal. Orthogonal grids only for the stable scaffold.

### Mechanical Motion (signature)
```css
@keyframes kc-spin   { to { transform: rotate(360deg); } }          /* gear self-rotation, linear */
@keyframes kc-orbit  { to { transform: rotate(360deg); } }          /* parent rotates, child rides the rim */
@keyframes kc-pendulum { 0%,100%{transform:rotate(-24deg)} 50%{transform:rotate(24deg)} } /* pendulum, ease-in-out */
@keyframes kc-march  { to { transform: translateX(24px); } }        /* squares march, steps(3) */
@keyframes kc-sweep  { from{transform:translateX(-110%) skewX(-12deg)} to{transform:translateX(0) skewX(-12deg)} }
```
- Orbit: outer div runs kc-orbit (rotate 360deg linear), a child disc sits on the top rim -> a circle orbiting a circle
- Spin: a disc / radial burst runs kc-spin, linear, for a gear feel
- Pendulum: a triangle / thick bar with transform-origin:top center runs kc-pendulum, ease-in-out
- March: a row of squares runs kc-march, steps(3) alternate, for mechanical stepping
- Entrance: color/type blocks use expo-out (cubic-bezier(0.16,1,0.3,1), 0.6-0.9s)

### Easing
- Entrance: cubic-bezier(0.16,1,0.3,1) (expo-out, fast start slow settle)
- Rotation / orbit loops: linear (constant gear speed)
- Pendulum: ease-in-out
- Rebound (restrained): cubic-bezier(0.34,1.4,0.64,1); never an exaggerated >1.56 overshoot

### Typography
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Archivo:wght@700;800;900&family=Space+Mono&display=swap" />
```
Headline stack: font-family: "Archivo", "Anton", "Helvetica Neue", ui-sans-serif, sans-serif; ultra-bold (800-900), uppercase, tracking-tight.
Labels / numbers: font-family: "Space Mono", ui-monospace, monospace; uppercase, letter-spacing 0.2-0.3em, tabular-nums.

### Rhythm
- One dominant motion per viewport; the rest holds a static scaffold
- Entrances 0.6-0.9s; hover feedback 0.3-0.4s; loops 3-12s (bigger wheels turn slower)

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  .kc-spin, .kc-orbit, .kc-pendulum, .kc-march { animation: none !important; }
}
```
Every loop settles into its constructivist end-state; the frame stays a complete poster.

### animejs Recipe (optional, project ships animejs@4)
```js
import { animate, stagger } from "animejs";
animate(".kc-square", {
  translateX: [0, 24],
  ease: "steps(3)",
  loop: true,
  alternate: true,
  duration: 900,
  delay: stagger(120),
});
```

## Self-Verification Checklist

- [ ] Paper ground, ink type, only red/blue/yellow
- [ ] Only circle/triangle/square/diagonal/arc, hard edges, zero radius, flat fills
- [ ] Key composition on the diagonal, headline blocks rotated
- [ ] Primitives genuinely move mechanically (orbit/spin/pendulum/march), not static mockups
- [ ] Only transform / opacity animate
- [ ] One dominant motion per viewport
- [ ] prefers-reduced-motion fallback settling on the constructivist end-state