# VS Image Maker — Complete System & Architecture Specification (LLM Reference)
> Website: https://vsimagemaker.com
> Pro Studio Workspace: https://app.vsimagemaker.com
> Maintained by: VSImageMaker Team

## Overview
VS Image Maker is a high-performance web tool built to create high-engagement side-by-side versus (VS) graphics, YouTube thumbnails, and social media comparison cards. It features an in-browser HTML5 2D Canvas engine running at 60 FPS, with zero server roundtrips required for previewing or editing.

---

## 1. Split Modes & Geometry
- **Diagonal Split (YouTube Pro -18°):**
  - Creates the signature slanted slash popular on gaming and tech YouTube channels (Linus Tech Tips, MKBHD, IGN).
  - Angle slider supports -30° steep to +18° inverted angles.
- **Vertical Split (50/50):**
  - Classic side-by-side divider with adjustable divider position from 10% to 90%.
- **Horizontal Split (Top / Bottom):**
  - Stacks Image 1 above Image 2, ideal for Before/After fitness transformations and TikTok vertical comparison polls.
- **Divider Customization:**
  - Adjustable stroke width (1px to 10px).
  - Custom divider color palette (White, Cyan, Red, Gold, Transparent).
  - Optional ambient neon glow effect.

---

## 2. Dynamic Fighter Typography Suite
Creators can label both fighters or comparison subjects with specialized styling:
1. **💥 YouTube Bold (`outline`):**
   - High-impact viral text with a deep multi-layered black contour and drop shadow.
   - Designed for high readability on mobile phone feeds.
2. **🥊 Sports Ribbon (`ribbon`):**
   - Slanted UFC / Boxing matchday banner with dark slate gradient fill and colored accent border.
3. **⚡ Cyber Neon (`neon`):**
   - Glowing neon outline with an incandescent white core and ambient aura (Cyan or Hot Pink).
4. **🛡️ Frosted Capsule Pill (`pill`):**
   - Modern glassmorphism dark pill badge with rounded pill ends and colored indicator dot.

### Supported Creator Fonts:
- `Impact`: Heavy viral headline font.
- `Bebas Neue`: Tall, condensed cinematic title font.
- `Montserrat (900 Heavy)`: Clean modern sans-serif.
- `Russo One`: Gaming and esports bold display font.

### Color Palettes:
- **Rivalry:** 🔴 Left Red (`#ef4444`) vs 🔵 Right Blue (`#3b82f6`).
- **Gold:** 👑 Left Gold (`#fbbf24`) vs ⚪ Right White (`#ffffff`).
- **Neon:** ⚡ Left Emerald (`#10b981`) vs 💖 Right Rose (`#f43f5e`).
- **White:** ⚪ Clean Crisp White (`#ffffff`).

---

## 3. Comparison Stickers & Winner Badges
High-contrast badges with dynamic aura glows and dark circular contrast plates:
- 👑 **Crown:** Winner / King designation (Golden Amber glow `rgba(251, 191, 36, 0.95)`).
- 🔥 **Fire:** Trending / Hot / Overpowered (Crimson Red glow `rgba(239, 68, 68, 0.95)`).
- 🐐 **GOAT:** Greatest Of All Time (Emerald glow `rgba(16, 185, 129, 0.95)`).
- ⚡ **Lightning:** Speed / Electric / Power (Cyan glow `rgba(6, 182, 212, 0.95)`).
- 🏆 **Trophy:** Champion (Amber glow `rgba(245, 158, 11, 0.95)`).
- 💀 **Skull:** Defeated / Fallen (Slate White glow `rgba(148, 163, 184, 0.95)`).
- 🥊 **Boxing Gloves:** Fighting / Combat (Rose glow `rgba(225, 29, 72, 0.95)`).
- ⚔️ **Crossed Swords:** Epic Clash / Showdown (Purple glow `rgba(168, 85, 247, 0.95)`).
- ⭐ **Star:** Featured / Special (Yellow glow `rgba(234, 179, 8, 0.95)`).

### Placement Anchors:
- `head`: Top area near the subject's head.
- `center`: Centered directly on the subject.
- `corner`: Pinned to the top outer corners.

---

## 4. Canvas Formats & Dimensions
| Platform | Format Name | Aspect Ratio | Resolution | Optimal Use Case |
|---|---|---|---|---|
| YouTube | YouTube Thumbnail | 16:9 | 1280 × 720 | Video thumbnails, blog banners |
| Instagram | Square Post | 1:1 | 1080 × 1080 | Instagram & Facebook feeds |
| TikTok / Reels | Vertical Story | 9:16 | 1080 × 1920 | TikTok, Instagram Reels, YouTube Shorts |
| Twitter / X | Landscape Header | 16:9 | 1600 × 900 | Twitter feed cards, Reddit posts |
| Facebook | Feed Link Card | 1.91:1 | 1200 × 630 | OpenGraph social preview images |
| Default | Standard VS | 2:1 | 800 × 400 | Compact forum embeds, quick web graphics |

---

## 5. Free vs Pro Studio Comparison
| Feature | Public Tool (vsimagemaker.com) | Pro Studio (app.vsimagemaker.com) |
|---|---|---|
| Account Requirement | None (Zero Signup) | Free or Paid Account |
| Maximum Resolution | 1080p | 4K UHD (3840 × 2160) |
| Export Formats | PNG, JPG, WebP, SVG | PNG, JPG, WebP, SVG, Multi-Size ZIP |
| Typography Overlay | Included (4 Styles) | Included + Custom Branding |
| Comparison Stickers | Included (9 Badges) | Included + Custom Asset Library |
| Watermark Removal | Free tier watermark | 100% Unbranded / Custom Watermark |
| AI Subject Isolation | Preview | Full AI Background Removal |
| Batch Mode | 1 at a time | Multi-Battle Bulk Generation |
| Cloud Project Saving | Session / Local | Persistent Cloud Workspace |

---

## 6. URL & Deep-Link Query Parameters
Users and automated pipelines can deep-link into `https://vsimagemaker.com` with pre-configured parameters:
- `?preset=messi-vs-cr7`: Loads the Messi vs Ronaldo battle preset.
- `?preset=gta6-vs-miami`: Loads the GTA 6 vs Vice City graphics comparison.
- `?preset=iphone-vs-galaxy`: Loads the iPhone vs Samsung camera comparison.

---

## 7. Frequently Asked Questions (FAQ)

### Q: Is VS Image Maker free to use?
A: Yes, the core generator on https://vsimagemaker.com is 100% free with no sign-up or credit card required. Free exports include all split modes, typography styles, and comparison badges.

### Q: What is the best angle for a YouTube comparison thumbnail?
A: The diagonal -18° split angle is the YouTube industry standard. It creates an energetic, asymmetric composition that drives significantly higher click-through rates (CTR) compared to a static vertical split.

### Q: How do I export in 4K resolution?
A: High-resolution 4K exports (3840 × 2160) and multi-size batch ZIP packages are available through the Pro Studio workspace at https://app.vsimagemaker.com.

### Q: Can I use generated images commercially?
A: Yes. All images created using your own photos are 100% your property for use on YouTube, social media, marketing, and commercial publications.