heroIntermediateanimation

Bauhaus Geometry Hero

Primary-color geometric blocks behind a bold sans-serif headline.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a Bauhaus-inspired hero with Tailwind: warm parchment background, four primary-colored geometric shapes drifting slowly behind the content — a red square, a yellow circle, a blue triangle (built from CSS borders), and a black diamond (rotated 45deg square). Each shape has its own keyframe drift loop translating ±20px and rotating ±8deg over 18-25 seconds. A centered content block uses backdrop-filter for a slightly translucent parchment overlay. Inside: a JetBrains Mono date signature, a Space Grotesk Bold uppercase 3-line headline ('FORM/FOLLOWS/FUNCTION.'), supporting copy, and a solid black uppercase CTA with mono letter-spacing. Reads as a homage to Bauhaus poster design.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-bauhaus-hero
-->
<section class="hero"><div class="shape s1"></div><div class="shape s2"></div><div class="shape s3"></div><div class="shape s4"></div><div class="copy"><span class="sig">VIBEDEX · 1926—2026</span><h1>FORM<br>FOLLOWS<br>FUNCTION.</h1><p>One hundred years of considered design. Components engineered like buildings — every detail load-bearing.</p><a class="cta" href="#">EXPLORE THE COLLECTION →</a></div></section>