Skip to content

Bauhaus Grid

Red, blue and black modules that pop, rotate in waves and swap colour on a cream page.

1:1Medium pace7splayfulcraftedmodernist

Square design-poster style for events, studios and brand reels. A 4×4 grid of geometric modules (circles, arches, quarters, leaves) pops in from the centre, rotates in staggered waves, swaps colours, then a blue wipe reveals a bouncing lowercase wordmark. Small italic-serif and mono HUD labels frame every scene.

Use this style

With Frame Jam installed, press Use this style in the local gallery, or just ask your agent:

Make a video with the Frame Jam style "bauhaus-grid" and open it for review.

style.json Install Frame Jam

Palette

background#ece6d6

red#f2542d

blue#2f4bf5

black#121212

text#121212

textOnBlue#ece6d6

Type

Display: Outfit 800Lowercase wordmark 210px, tracking -0.04em
Label: Instrument Serif 400Italic scene label top-left, 40px
Body: JetBrains Mono 500Uppercase HUD meta and timecode, 17px, tracking 0.08em

Motion

Pop: back.out(1.8)
Rotate: power3.inOut
Wipe: expo.inOut
Drop: bounce.out
Average shot: 2.3s

Every ~0.8s the grid does one thing: pop, rotate wave, colour swap, rotate back, breathe. Waves use grid staggers from centre, start or end.

Transitions and text

circle ring scales past the frame to clear it
full-frame blue wipe from the bottom (scaleY 0→1)
per-letter rise with alternating ±14° rotation, back.out
a red dot drops onto the wordmark with bounce.out
letters wobble once in alternating directions
timecode counts frames in the corner

Style guide your agent follows

Only cream #ece6d6, red #f2542d, blue #2f4bf5 and black #121212. No gradients, no shadows.
Modules are 168px squares shaped with border-radius only (50%, arch, quarter, leaf, drop). Lay them on a strict 4×4 grid with 16px gutters.
Animate the grid with GSAP grid staggers ({ grid: [4,4], from: "center" | "start" | "end" }) so every move reads as a wave.
Swap red and blue in one beat instead of fading. Rotate in 90° steps with power3.inOut.
Frame the page with an italic serif label top-left and mono uppercase meta plus a frame timecode at the bottom.
End on a lowercase wordmark that bounces per letter, with one red dot as the accent and a single factual line (dates, place).