# Efecto Poster Recipes

Complete step-by-step recipes with exact tool calls. Each recipe creates a polished poster from scratch.

---

## Recipe 1: Cyberpunk Event Poster (9:16)

Video background with left-aligned futuristic typography, ASCII minimal effect with subtle cyberpunk post-processing. Content pushed to the bottom.

### Tool Calls

**1. Create poster**
```
create_poster:
  aspectRatio: "9:16"
  backgroundColor: "#0a0a14"
```

**2. Set page layout (content at bottom)**
```
set_page_layout:
  justifyContent: "end"
```

**3. Set video background**
```
set_background:
  type: "video"
  videoUrl: "/assets/manga.mp4"
```

**4. Add decorative line above text**
```
add_layer:
  type: "line"
  startX: 25, startY: 60, endX: 75, endY: 60
  strokeColor: "#4cc9f0", strokeWidth: 0.002, strokeOpacity: 0.4
```

**5. Add text group (left-aligned)**
```
add_group:
  x: 50, y: 50, width: 85
  layoutMode: "column"
  alignItems: "center"
  justifyContent: "center"
  gap: 1
  children: [
    {
      type: "text",
      content: "NEON\nDREAMS",
      fontFamily: "Anton",
      fontSize: 120,
      fontWeight: "400",
      color: "#f72585",
      textAlign: "left",
      lineHeight: 0.95,
      letterSpacing: -2
    },
    {
      type: "text",
      content: "A NIGHT OF ELECTRONIC MUSIC",
      fontFamily: "Outfit",
      fontSize: 16,
      fontWeight: "300",
      color: "#4cc9f0",
      textAlign: "left",
      letterSpacing: 6,
      textTransform: "uppercase"
    },
    {
      type: "text",
      content: "MARCH 15, 2026 / WAREHOUSE 9 / 10PM",
      fontFamily: "Outfit",
      fontSize: 12,
      fontWeight: "400",
      color: "#888888",
      textAlign: "left",
      letterSpacing: 3
    }
  ]
```

**6. Apply ASCII minimal effect**
```
apply_effect:
  effectId: "ascii-minimal"
  cellSize: 6
  color: true
```

**7. Add post-processing stack (subtle cyberpunk)**
```
add_postprocess: type: "bloom", intensity: 1.8, radius: 0.5, threshold: 0.15
add_postprocess: type: "chromatic-aberration", strength: 0.005, angle: 45
add_postprocess: type: "scanlines", count: 350, intensity: 0.3
```

**8. Render**
```
render_image: format: "png"
```

**Design notes**: Video background (manga.mp4) gives the ASCII effect dynamic source material. Left-aligned text feels more editorial than centered. The `ascii-minimal` with smaller cellSize (6) creates finer detail than `ascii-standard`. Chromatic aberration at 0.005 is very subtle — just enough color fringing without overwhelming the text. Page `justifyContent: "end"` pushes everything to the bottom third.

---

## Recipe 2: Editorial Magazine Cover (3:4)

Stock photo background with dither ink effect for a risograph/printmaking aesthetic. Refined serif typography with tight spacing.

### Tool Calls

**1. Create poster**
```
create_poster:
  aspectRatio: "3:4"
  backgroundColor: "#0a0a0a"
```

**2. Set page layout (content at bottom, tight spacing)**
```
set_page_layout:
  justifyContent: "end"
  gap: 1
  padding: 6
```

**3. Search for a dark portrait image**
```
search_images:
  query: "portrait fashion"
  orientation: "vertical"
  luminance: "dark"
  type: "photo"
```

**4. Set image background**
```
set_background:
  type: "image"
  imageUrl: <use URL from search results>
  objectFit: "cover"
```

**5. Add headline group**
```
add_group:
  x: 50, y: 50, width: 80
  layoutMode: "column"
  alignItems: "center"
  justifyContent: "center"
  gap: 0.1
  children: [
    {
      type: "text",
      content: "The Art of\nSilence",
      fontFamily: "Playfair Display",
      fontSize: 49,
      fontWeight: "800",
      color: "#ffffff",
      textAlign: "left",
      lineHeight: 1.0,
      letterSpacing: -1
    },
    {
      type: "text",
      content: "An intimate portrait series exploring solitude in urban spaces",
      fontFamily: "DM Sans",
      fontSize: 16,
      fontWeight: "300",
      color: "#cccccc",
      textAlign: "left",
      lineHeight: 1.4
    }
  ]
```

**6. Add magazine title at bottom**
```
add_layer:
  type: "text"
  content: "APERTURE"
  fontFamily: "DM Sans"
  fontSize: 14
  fontWeight: "500"
  color: "#ffffff"
  letterSpacing: 8
  textTransform: "uppercase"
  textAlign: "center"
  x: 50, y: 90
```

**7. Apply dither effect with ink palette**
```
apply_effect:
  effectId: "dither-floyd-steinberg"
  pixelation: 3
  paletteId: "ink"
```

Note: No `add_postprocess` calls — dither effects use the built-in palette. Post-processes are ignored for dither.

**8. Render**
```
render_image: format: "png"
```

**Design notes**: The `dither-floyd-steinberg` with `ink` palette transforms the photo into a high-contrast printmaking aesthetic — dark navy (#1a1a2e) and warm cream (#f5f5dc). Smaller headline (49px) feels more refined than oversized text. The APERTURE label at the bottom (not top) creates a footer stamp effect. Tight gap (0.1) and reduced padding (6%) pack the layout.

---

## Recipe 3: Retro Game Art (1:1)

Video background with Game Boy dither effect, pixel-style typography, centered layout.

### Tool Calls

**1. Create poster**
```
create_poster:
  aspectRatio: "1:1"
  backgroundColor: "#0f380f"
```

**2. Set page layout (vertically centered)**
```
set_page_layout:
  justifyContent: "center"
```

**3. Set video background**
```
set_background:
  type: "video"
  videoUrl: "/assets/motorcycle.mp4"
```

**4. Add centered text group**
```
add_group:
  x: 50, y: 50, width: 80
  layoutMode: "column"
  alignItems: "center"
  justifyContent: "center"
  gap: 4
  children: [
    {
      type: "text",
      content: "GAME\nOVER",
      fontFamily: "Bungee",
      fontSize: 96,
      fontWeight: "400",
      color: "#9bbc0f",
      textAlign: "center",
      lineHeight: 1.0
    },
    {
      type: "text",
      content: "INSERT COIN TO CONTINUE",
      fontFamily: "Space Mono",
      fontSize: 16,
      fontWeight: "400",
      color: "#8bac0f",
      textAlign: "center",
      letterSpacing: 3
    },
    {
      type: "text",
      content: "SCORE: 999,999",
      fontFamily: "Space Mono",
      fontSize: 14,
      fontWeight: "700",
      color: "#306230",
      textAlign: "center"
    }
  ]
```

**5. Apply dither effect with gameboy palette**
```
apply_effect:
  effectId: "dither-atkinson"
  pixelation: 5
  paletteId: "gameboy"
  bloomEnabled: true
  bloomIntensity: 0.8
  bloomRadius: 30
```

Note: No `add_postprocess` calls — dither effects use built-in palette and bloom. Post-processes are ignored for dither.

**6. Render**
```
render_image: format: "png"
```

**Design notes**: Using a video background (motorcycle.mp4) instead of a solid color gives the dither effect rich source material to work with — the Atkinson dithering with Game Boy palette transforms the video into a dynamic retro scene. The text overlays in matching green tones blend naturally. `justifyContent: "center"` keeps everything vertically balanced.

---

## Recipe 4: Tech Conference Card (16:9)

Navy gradient with a 3D model accent, centered typography, CMYK halftone effect for a print-inspired look.

### Tool Calls

**1. Create poster**
```
create_poster:
  aspectRatio: "16:9"
  backgroundColor: "#0f172a"
```

**2. Set page layout (content at bottom)**
```
set_page_layout:
  justifyContent: "end"
```

**3. Set gradient background**
```
set_background:
  type: "gradient"
  gradientStyle: "linear"
  gradientAngle: 135
  gradientStartColor: "#0f172a"
  gradientEndColor: "#1e293b"
```

**4. Add 3D model accent**
```
add_layer:
  type: "3d"
  name: "Duck"
  mediaUrl: "https://threejs.org/examples/models/gltf/duck.glb"
  material: "chrome"
  color: "#4729db"
  width: 50
  height: 50
```

**5. Add centered text group**
```
add_group:
  x: 50, y: 50, width: 80
  layoutMode: "column"
  alignItems: "center"
  justifyContent: "center"
  gap: 2
  children: [
    {
      type: "text",
      content: "DEV//CONF",
      fontFamily: "Space Grotesk",
      fontSize: 72,
      fontWeight: "700",
      color: "#ffffff",
      textAlign: "center",
      letterSpacing: -2
    },
    {
      type: "text",
      content: "The Future of Web Development",
      fontFamily: "DM Sans",
      fontSize: 24,
      fontWeight: "400",
      color: "#aaaaaa",
      textAlign: "center"
    },
    {
      type: "text",
      content: "JUNE 12-14, 2026  /  SAN FRANCISCO",
      fontFamily: "DM Sans",
      fontSize: 14,
      fontWeight: "500",
      color: "#666666",
      textAlign: "center",
      letterSpacing: 3
    }
  ]
```

**6. Apply CMYK halftone effect with post-processing**
```
apply_effect:
  effectId: "halftone-cmyk"
  dotSize: 0.05

add_postprocess: type: "bloom", intensity: 0.8, radius: 0.3, threshold: 0.3
add_postprocess: type: "vignette", radius: 0.9
```

**7. Render**
```
render_image: format: "png"
```

**Design notes**: The navy gradient (#0f172a → #1e293b) creates a deeper, richer background than generic dark blue. The 3D duck model with chrome material and purple tint (#4729db) adds a playful tech mascot feel. CMYK halftone gives the print-quality dot pattern with color separation — more visually interesting than mono halftone. Centered layout is cleaner than the two-column approach for a card format. `justifyContent: "end"` pushes content to the lower portion, leaving the 3D model prominent.

---

## Recipe 5: Artistic Photo Poster (9:16)

Stock photo with Kuwahara painterly effect, bold centered text overlay, film-like post-processing. Content anchored to bottom.

### Tool Calls

**1. Create poster**
```
create_poster:
  aspectRatio: "9:16"
  backgroundColor: "#0a0a0a"
```

**2. Set page layout (content at bottom)**
```
set_page_layout:
  justifyContent: "end"
```

**3. Search for a nature image**
```
search_images:
  query: "mountain landscape dramatic"
  orientation: "vertical"
  luminance: "neutral"
  type: "photo"
```

**4. Set image background**
```
set_background:
  type: "image"
  imageUrl: <use URL from search results>
  objectFit: "cover"
```

**5. Add centered text group**
```
add_group:
  x: 50, y: 50, width: 85
  layoutMode: "column"
  alignItems: "center"
  justifyContent: "center"
  gap: 3
  children: [
    {
      type: "text",
      content: "WILD",
      fontFamily: "Bebas Neue",
      fontSize: 140,
      fontWeight: "400",
      color: "#ffffff",
      textAlign: "center",
      letterSpacing: 8
    },
    {
      type: "text",
      content: "nature / adventure / freedom",
      fontFamily: "DM Sans",
      fontSize: 18,
      fontWeight: "300",
      color: "#f0f0f0",
      textAlign: "center",
      letterSpacing: 4
    }
  ]
```

**6. Apply Kuwahara art effect**
```
apply_effect:
  effectId: "art-kuwahara"
```

**7. Add film-like post-processing**
```
add_postprocess: type: "vignette", radius: 0.6
add_postprocess: type: "grain", size: 2.0, speed: 0.3, colorAmount: 0.2
add_postprocess: type: "brightness-contrast", contrast: 1.15, saturation: 0.85
```

**8. Render**
```
render_image: format: "png"
```

**Design notes**: Kuwahara transforms the photo into a painterly artwork while keeping the composition intact. The massive Bebas Neue headline with wide letter spacing floats over the image. Subtitle in near-white (#f0f0f0) has better contrast than dimmer grays. `justifyContent: "end"` anchors text to the lower third, letting the photo breathe above. Desaturated colors + grain gives it a fine-art print quality.