Swiss Grid Layout text animation: the word aimotions animated in this style
095PrintCSS

Swiss Grid Layout

Red, black and white modules snap onto a strict six-column grid while a huge, tightly tracked neo-grotesque word rises flush left. Based on the mid-century International Typographic Style; ideal for editorial, architecture and conference identities.

Prompt · replace [TEXT]

Tool-agnostic
Design [TEXT] as an animated Swiss International Style poster in red, black and white. Show a strict six-column grid as thin red guide lines that draw in first, then fade back. Modules snap onto the grid with sharp expo easing: a tall red block bleeding off the top edge, hairline black rules, a small black square, a huge numeral and two small flush-left text columns (one bold, one regular). [TEXT] sits flush left at the bottom, set in a heavy lowercase neo-grotesque with very tight tracking, each letter rising out of a baseline mask with a short stagger. Halfway through, the red block, numeral and square slide sideways to a second asymmetric arrangement on the same grid. Hold, then everything retracts and the loop restarts. Crisp, objective, no ornament.

Visual DNA

  • Strict six-column grid shown in thin red guides during the build
  • Asymmetric flush-left layout with a large bleeding red block
  • Huge lowercase neo-grotesque, very tight tracking, rising out of a line mask
  • Small bold and regular text columns, hairline rules and a big numeral
  • Modules slide to a second arrangement mid-loop with sharp expo easing
Category
Print & Design Movements
Demo built with
CSS
Energy
Lively
Background
Light bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Swiss Grid Layout look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

Related styles

All Print styles →
009ReactiveCSS

Magnetic Letters

magnetic text effect · magnetic hover · cursor attraction text · spring letters

Details →
098KineticCanvas

Echo Trails

echo text effect · repeating text trail · stacked color echo · motion trail typography

Details →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥