Cut-out portrait type poster

Bold 2:3 poster with Bauhaus-style colour blocks, where a giant word turns from solid to outlined as it passes behind and across a cut-out portrait.

Prompt

## Goal

Design a brand poster for Atelier Forma, a brand identity studio. The big word across the poster is "Forms". Photo of the person: none yet. Keep it bold and editorial.

Use the style, layout, image and motion rules below exactly. Replace the sample text with text that fits the goal, keeping similar lengths.

## Style

Keep this exactly: it is what makes the design look the way it does.
- A 2:3 poster, centered on a #1A1A1A page. Its width is `min(100vw, 66.667svh)` and its height 1.5× that. Store the width in a CSS variable (`--w`) and size and place **everything** inside as a fraction of it, so the poster scales as one piece. Below, "0.2w" means 0.2 × that width; all positions are from the poster's top-left corner.
- Colors: cream background #EFE8DD, ink #111111, red #D7261E, yellow #F2B21B, white #FFFFFF.
- Fonts (Google Fonts): **Anton** for the big word; **Montserrat** 300, 500 and 700 for everything else. Fall back to Impact and Arial. Load the Google Fonts stylesheet so it can never block the page (in plain HTML: `media="print" onload="this.media='all'"` on the `<link>`), because if it hangs, nothing else may run.
- Big word: Anton 400 (never bold: synthetic bold breaks the effect below), 0.33w, line-height 1, letter-spacing 0.01em, uppercase, centered across the full poster width, its top at 0.8w.
- Kicker "The art of": Montserrat 300, 0.042w, letter-spacing 0.12em, uppercase, white. Title below it: Montserrat 700, 0.088w, line-height 1, letter-spacing 0.02em, uppercase, white.
- Short yellow rules: 0.07w × 0.006w, #F2B21B.
- Tag list and tagline: Montserrat 500, uppercase; tags 0.024w with letter-spacing 0.2em and line-height 1.7 (white); tagline 0.024w with letter-spacing 0.14em and line-height 1.5 (ink).
- Button: a red pill (radius 999px) with white Montserrat 700 text at 0.034w, letter-spacing 0.04em, uppercase, padding 0.024w × 0.055w, a 0.025w gap before a right-arrow icon (a 2.4-stroke line arrow, 1.1em), and shadow `0 0.012w 0.03w rgb(0 0 0 / 0.25)`. Keyboard focus: a yellow outline 4px outside the pill.

## Layout

Everything is absolutely positioned inside the poster, which clips its overflow. From back to front:
1. **Red strip** down the left edge: 0.035w wide, full height.
2. **Black block**: left 0.035w, top 0, 0.465w wide, 0.58w tall.
3. **Red block**: left 0.5w, top 0, 0.4w wide, 0.36w tall.
4. **Red circle**: left 0.44w, top 0.1w, 0.62w across, opacity 0.92.
5. **Yellow square**: left 0.14w, top 0.44w, 0.2w wide, 0.24w tall, with a black dot 0.06w across, 0.045w in from its top and left.
6. **Three black bars** on the right edge: 0.08w long, 0.012w thick, 0.012w apart, the first at top 0.7w.
7. **Solid big word**, white, with a faint shadow `0 0.004w 0.02w rgb(0 0 0 / 0.1)`.
8. **The person**: the cut-out photo, 0.88w wide with its natural height, its left edge at 0.2w and its bottom on the poster's bottom edge (it is cropped on the right).
9. **Red outline frame** over the face: left 0.66w, top 0.34w, 0.17w × 0.4w, a 0.004w red border (at least 1.5px), radius 0.03w, transparent inside.
10. **Outlined big word**: exactly the same text, font, size and position as layer 7, but with a transparent fill and a 0.003w white stroke (`-webkit-text-stroke`, at least 1.5px).
11. **Text and button**:
- In the black block, left 0.075w, top 0.075w: the kicker, the title, a yellow rule with 0.035w above and below, then the tag list.
- Tagline at left 0.075w, top 1.13w, in four short lines, with a yellow rule 0.02w below it.
- The button with its top-left at (0.24w, 1.3w).
- Three short "spark" strokes in ink just left of the button (left 0.15w, top 1.285w, 0.08w wide), like a hand-drawn burst.
- A hand-drawn curved arrow in white (4.5 stroke, round caps) at left 0.68w, top 1.15w, 0.13w wide, sweeping down and left to point at the button.

**This layer order makes the effect:** the person hides the solid word wherever they stand, so the word looks solid beside them and only outlined across their clothes. The circle sits behind their head; the outline frame sits on top of their face. Do not reorder these layers, and do not fake the effect with masks or by cutting the word into pieces.

## Motion

Use CSS transitions between a hidden starting state and the final poster. Add the starting class with script before the first paint (in plain HTML, a one-line inline script in the `<head>`; never in the markup), so the poster shows complete if JavaScript doesn't run. Remove the class once the fonts are ready (`document.fonts.ready`), or after 1.5 seconds at the latest, so the poster never stays blank if the fonts are blocked or slow. All easing is cubic-bezier(0.22, 1, 0.36, 1) over 900ms for movement, with 700ms opacity fades.
- The blocks come in from their nearest edge, one after another: strip (0ms) from the top, black block (80ms) from the left, red block (160ms) from the top, circle (260ms) scaling up from 0.4 and fading in, yellow square (360ms) scaling up from 0, bars (420ms) from the right.
- The person (450ms) rises 6% and fades in.
- The letters of both copies of the big word rise 40% and fade in together, 70ms apart, from 600ms.
- The text and frame fade in at 900ms, the tagline, sparks and arrow at 1100ms, and the button scales up from 0.85 at 1200ms.
- Hover or focus on the button: the arrow icon moves right by 0.25em, and the button scales to 1.03.
- With prefers-reduced-motion: reduce, show the final poster with no transitions.

## Sample content

- Kicker "The art of", title "Identity" (keep the title inside the black block: 8 letters at most). Tags: "Logos", "Type", "Systems", "Motion".
- Big word "Forms" (4 to 6 letters fit best).
- Tagline "We shape / ideas into / brands people / remember." Button "Start a project".
- The big word is the page's `h1` (the outlined copy); hide the solid copy and all decorative shapes from screen readers with `aria-hidden="true"`, and give the poster an aria-label describing it.

## Images

There is one image: a photo of a person **cut out on a transparent background**, saved as `images/portrait.png` next to the page (in a framework project, wherever the project keeps static images). Follow the first step that applies:
1. **The user gave you a cut-out** (a PNG or WebP with a transparent background): use it.
2. **The user gave you a photo that still has its background**: remove the background. Use any background-removal tool or connector you have; or, if you can run commands, the free `rembg` tool: `pip install "rembg[cpu,cli]"` (the `cli` part is needed for the command), then `rembg i <photo> images/portrait.png`. Check the result really is transparent. If you can't remove it, use the placeholder below and tell the user to supply a transparent version.
3. **No photo, but you can generate images**: generate a portrait from the image prompt below, then remove its background as in step 2.
4. **Otherwise**: use the placeholder and tell the user to add their cut-out as `images/portrait.png`.

Never place a photo with its background still on: the design only works with real transparency.

Always reference the image at `images/portrait.png` and add a **placeholder** in the same place and size: a dark grey (#2A2A2A) silhouette (a circle for the head over rounded shoulders) with the small label "Add your cut-out: images/portrait.png". Show the placeholder **only when the image fails to load** (for example with the image's `error` event); otherwise it would show through the transparent parts of the cut-out.

Image prompt: "Editorial studio portrait of a confident person with bold red lipstick and small gold hoop earrings, wearing a black high-neck top under a black blazer, head slightly tilted, looking at the camera, framed from the top of the head to the waist, centered, on a plain flat light grey seamless background, soft even studio light, sharp focus, 2:3 portrait."

## Output

If you are working inside an existing project, build the poster as a component that follows that project's framework, styling and file conventions (for example React, Next.js, Vue, Svelte, Tailwind or CSS modules), and load the fonts the way the project loads fonts. In a component framework:
- start the intro transition, and attach the image's error handler, inside the framework's mount hook (for example `useEffect`), and clean up anything you start when the component unmounts;
- use refs, not `document.querySelector`;
- scope every style to the component, and never style `html` or `body`;
- only touch `window` and `document` on the client (in Next.js, mark the file `"use client"`).

Otherwise, produce a single self-contained HTML file with the CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag, with no libraries or frameworks besides the Google Fonts link. Either way it must look right at 1440×900 and at 390px wide (the poster then fills the screen width), with semantic HTML and a visible keyboard focus state on the button.

Loading live preview…

## Goal Design a brand poster for Atelier Forma, a brand identity studio. The big word across the poster is "Forms". Photo of the person: none yet. Keep it bold and editorial. Use the style, layout, image and motion rules below exactly. Replace the sample text with text that fits the goal, keeping similar lengths. ## Style Keep this exactly: it is what makes the design look the way it does. - A 2:3 poster, centered on a #1A1A1A page. Its width is `min(100vw, 66.667svh)` and its height 1.5× that. Store the width in a CSS variable (`--w`) and size and place **everything** inside as a fraction of it, so the poster scales as one piece. Below, "0.2w" means 0.2 × that width; all positions are from the poster's top-left corner. - Colors: cream background #EFE8DD, ink #111111, red #D7261E, yellow #F2B21B, white #FFFFFF. - Fonts (Google Fonts): **Anton** for the big word; **Montserrat** 300, 500 and 700 for everything else. Fall back to Impact and Arial. Load the Google Fonts stylesheet so it can never block the page (in plain HTML: `media="print" onload="this.media='all'"` on the `<link>`), because if it hangs, nothing else may run. - Big word: Anton 400 (never bold: synthetic bold breaks the effect below), 0.33w, line-height 1, letter-spacing 0.01em, uppercase, centered across the full poster width, its top at 0.8w. - Kicker "The art of": Montserrat 300, 0.042w, letter-spacing 0.12em, uppercase, white. Title below it: Montserrat 700, 0.088w, line-height 1, letter-spacing 0.02em, uppercase, white. - Short yellow rules: 0.07w × 0.006w, #F2B21B. - Tag list and tagline: Montserrat 500, uppercase; tags 0.024w with letter-spacing 0.2em and line-height 1.7 (white); tagline 0.024w with letter-spacing 0.14em and line-height 1.5 (ink). - Button: a red pill (radius 999px) with white Montserrat 700 text at 0.034w, letter-spacing 0.04em, uppercase, padding 0.024w × 0.055w, a 0.025w gap before a right-arrow icon (a 2.4-stroke line arrow, 1.1em), and shadow `0 0.012w 0.03w rgb(0 0 0 / 0.25)`. Keyboard focus: a yellow outline 4px outside the pill. ## Layout Everything is absolutely positioned inside the poster, which clips its overflow. From back to front: 1. **Red strip** down the left edge: 0.035w wide, full height. 2. **Black block**: left 0.035w, top 0, 0.465w wide, 0.58w tall. 3. **Red block**: left 0.5w, top 0, 0.4w wide, 0.36w tall. 4. **Red circle**: left 0.44w, top 0.1w, 0.62w across, opacity 0.92. 5. **Yellow square**: left 0.14w, top 0.44w, 0.2w wide, 0.24w tall, with a black dot 0.06w across, 0.045w in from its top and left. 6. **Three black bars** on the right edge: 0.08w long, 0.012w thick, 0.012w apart, the first at top 0.7w. 7. **Solid big word**, white, with a faint shadow `0 0.004w 0.02w rgb(0 0 0 / 0.1)`. 8. **The person**: the cut-out photo, 0.88w wide with its natural height, its left edge at 0.2w and its bottom on the poster's bottom edge (it is cropped on the right). 9. **Red outline frame** over the face: left 0.66w, top 0.34w, 0.17w × 0.4w, a 0.004w red border (at least 1.5px), radius 0.03w, transparent inside. 10. **Outlined big word**: exactly the same text, font, size and position as layer 7, but with a transparent fill and a 0.003w white stroke (`-webkit-text-stroke`, at least 1.5px). 11. **Text and button**: - In the black block, left 0.075w, top 0.075w: the kicker, the title, a yellow rule with 0.035w above and below, then the tag list. - Tagline at left 0.075w, top 1.13w, in four short lines, with a yellow rule 0.02w below it. - The button with its top-left at (0.24w, 1.3w). - Three short "spark" strokes in ink just left of the button (left 0.15w, top 1.285w, 0.08w wide), like a hand-drawn burst. - A hand-drawn curved arrow in white (4.5 stroke, round caps) at left 0.68w, top 1.15w, 0.13w wide, sweeping down and left to point at the button. **This layer order makes the effect:** the person hides the solid word wherever they stand, so the word looks solid beside them and only outlined across their clothes. The circle sits behind their head; the outline frame sits on top of their face. Do not reorder these layers, and do not fake the effect with masks or by cutting the word into pieces. ## Motion Use CSS transitions between a hidden starting state and the final poster. Add the starting class with script before the first paint (in plain HTML, a one-line inline script in the `<head>`; never in the markup), so the poster shows complete if JavaScript doesn't run. Remove the class once the fonts are ready (`document.fonts.ready`), or after 1.5 seconds at the latest, so the poster never stays blank if the fonts are blocked or slow. All easing is cubic-bezier(0.22, 1, 0.36, 1) over 900ms for movement, with 700ms opacity fades. - The blocks come in from their nearest edge, one after another: strip (0ms) from the top, black block (80ms) from the left, red block (160ms) from the top, circle (260ms) scaling up from 0.4 and fading in, yellow square (360ms) scaling up from 0, bars (420ms) from the right. - The person (450ms) rises 6% and fades in. - The letters of both copies of the big word rise 40% and fade in together, 70ms apart, from 600ms. - The text and frame fade in at 900ms, the tagline, sparks and arrow at 1100ms, and the button scales up from 0.85 at 1200ms. - Hover or focus on the button: the arrow icon moves right by 0.25em, and the button scales to 1.03. - With prefers-reduced-motion: reduce, show the final poster with no transitions. ## Sample content - Kicker "The art of", title "Identity" (keep the title inside the black block: 8 letters at most). Tags: "Logos", "Type", "Systems", "Motion". - Big word "Forms" (4 to 6 letters fit best). - Tagline "We shape / ideas into / brands people / remember." Button "Start a project". - The big word is the page's `h1` (the outlined copy); hide the solid copy and all decorative shapes from screen readers with `aria-hidden="true"`, and give the poster an aria-label describing it. ## Images There is one image: a photo of a person **cut out on a transparent background**, saved as `images/portrait.png` next to the page (in a framework project, wherever the project keeps static images). Follow the first step that applies: 1. **The user gave you a cut-out** (a PNG or WebP with a transparent background): use it. 2. **The user gave you a photo that still has its background**: remove the background. Use any background-removal tool or connector you have; or, if you can run commands, the free `rembg` tool: `pip install "rembg[cpu,cli]"` (the `cli` part is needed for the command), then `rembg i <photo> images/portrait.png`. Check the result really is transparent. If you can't remove it, use the placeholder below and tell the user to supply a transparent version. 3. **No photo, but you can generate images**: generate a portrait from the image prompt below, then remove its background as in step 2. 4. **Otherwise**: use the placeholder and tell the user to add their cut-out as `images/portrait.png`. Never place a photo with its background still on: the design only works with real transparency. Always reference the image at `images/portrait.png` and add a **placeholder** in the same place and size: a dark grey (#2A2A2A) silhouette (a circle for the head over rounded shoulders) with the small label "Add your cut-out: images/portrait.png". Show the placeholder **only when the image fails to load** (for example with the image's `error` event); otherwise it would show through the transparent parts of the cut-out. Image prompt: "Editorial studio portrait of a confident person with bold red lipstick and small gold hoop earrings, wearing a black high-neck top under a black blazer, head slightly tilted, looking at the camera, framed from the top of the head to the waist, centered, on a plain flat light grey seamless background, soft even studio light, sharp focus, 2:3 portrait." ## Output If you are working inside an existing project, build the poster as a component that follows that project's framework, styling and file conventions (for example React, Next.js, Vue, Svelte, Tailwind or CSS modules), and load the fonts the way the project loads fonts. In a component framework: - start the intro transition, and attach the image's error handler, inside the framework's mount hook (for example `useEffect`), and clean up anything you start when the component unmounts; - use refs, not `document.querySelector`; - scope every style to the component, and never style `html` or `body`; - only touch `window` and `document` on the client (in Next.js, mark the file `"use client"`). Otherwise, produce a single self-contained HTML file with the CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag, with no libraries or frameworks besides the Google Fonts link. Either way it must look right at 1440×900 and at 390px wide (the poster then fills the screen width), with semantic HTML and a visible keyboard focus state on the button.