Brutalist Web Type

About this style

Web brutalism took off in the mid-2010s as a reaction against polished, template-driven websites. It borrows its name from Brutalist architecture, which left raw concrete and structure exposed, and does the same with the web's raw materials: default Times and monospace fonts, blue underlined links, gray buttons, visible borders and abrupt changes. Artists, studios, publications and independent projects use it to look honest and unpackaged. Done well, it is a strict system rather than a mess.

Make a 10-second brutalist web-type piece: a raw HTML page that builds itself in hard cuts.

<inputs>
Studio: STATIC ROOM. Statements: "NO EASING." / "NO SHADOWS." / "JUST HTML." Headline: "WEBSITES" / "THAT LOAD." Nav links: Work, Notes, Contact. Project table (fictional): Harbor Seed Bank, 2026, 14 KB; Tallowmere Candles, 2025, 9 KB; Pilot Light Radio, 2025, 22 KB; Total, 45 KB. Footer: "Last updated 16 Oct 2026." Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: white #FFFFFF, black #000000, link blue #0000EE, visited purple #551A8B, highlight yellow #FFFF00. Nothing else.
Type: browser defaults only. font-family: serif for body text at 24px and the studio name at 64px bold; font-family: monospace, bold, for the statements and headline at 200–240px, letter-spacing −0.04em, line height 0.9; links underlined in link blue.
Grid: one 2px black border system, 120px left margin, everything flush left. A 120px top bar with the studio name at left and the nav links at right; the two-line headline block spanning the width; a raw HTML table (2px borders, 16px cell padding, 24px text, numbers right-aligned, a bold total row); a 480×270 broken-image box with a 2px border showing its alt text "[img: studio-front.jpg]"; a default unstyled <button>Contact</button>; the footer. The page is taller than the screen.
Cursor: the default black arrow (inline SVG, 1px white outline), moving in straight lines at constant speed.
Motion is hard cuts. Every change happens on a single frame: no tweens, fades, slides or transitions. Cuts fall on a 0.25s grid; the one exception is typing, at one character per 0.1s. Content loads in chunks like a slow connection, and each insert reflows everything below it instantly. Scrolling jumps in 120px wheel ticks. The caret is a 6×64px black bar, 0.5s on and 0.5s off. At most two inverted frames (black ground, white type), at least 1s apart.
Premium brutalism is deliberate: an exact border grid, real HTML defaults used with confidence, cuts on a strict rhythm. The cheap version is a messy pile of random fonts, neon and rotated stickers.
Banned: easing of any kind, opacity fades, transitions, rounded corners, shadows, gradients, web fonts, icon sets, emoji, centered layouts, rotation, colors beyond the five above, flashing more than 3 times per second.
</direction>

<structure>
0.00–0.75s: a white page; the caret blinks at x 120, y 120.
0.75–1.75s: "NO EASING." types in at 240px monospace, the caret leading.
1.75–2.25s: hard cut: "NO SHADOWS." at 240px, bottom-left, baseline at y 900.
2.25–3.00s: hard cut to an inverted frame: "JUST HTML." white on black, top-left.
3.00–4.75s: hard cut to the white page, which loads in chunks every 0.25s: the top bar with name and links; headline line 1; line 2; the table header; each of the three rows; the total row; then the image box, button and footer together. Each insert pushes the content below it down.
4.75–6.25s: the cursor enters from the right edge and travels in a straight line to "Work"; on hover the link turns white on #0000EE; it clicks at 6.0s.
6.25–7.50s: "Work" turns visited purple; the page jumps down three wheel ticks, 0.25s apart; the Pilot Light Radio row turns yellow.
7.50–8.50s: one jump back to the top; the caret appears after "LOAD." in the headline.
8.50–10.00s: hold; only the caret blinks.
For other durations, keep the 0.25s cut grid and stretch the holds.
</structure>

<build>
One self-contained index.html, CSS and JS inline. 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, clamping past the end to the last frame: 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, so seek can jump to any time. Use no web fonts: the browser's own serif and monospace are the point. 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.
Engine: plain HTML elements (a, table, button, a bordered alt-text box) with browser-default styling plus the borders above; seek(t) swaps content, classes and the scroll offset on exact frames. No canvas or three.js.
</build>

<check>
Before showing me, step through one frame per second (0–10s): screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check that nothing ever tweens or fades (compare consecutive 30fps frames around each cut), the caret blinks exactly once per second, the borders align to one grid, and the table's total equals its rows. Confirm seek(10) and seek(11) 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

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

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,…

Split-Flap Departure Board

Made by us

A mechanical station departure board where every flap steps through its drum to land on times, destinations and statuse…

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,…