@efectoapp/mcp-server 0.1.24 → 0.1.27

package/skills/recipes.md

@@ -0,0 +1,490 @@
+# 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.