Matrix Generation

The Matrix System is Poliage's core differentiator. It automatically generates all combinations of your variants—no Playwright scripts required.

The Problem

Your product has:

3 user roles (Admin, User, Guest)
4 languages (English, German, French, Korean)
2 themes (Light, Dark)

That's 24 variations for every screenshot. Writing and maintaining 24 Playwright scripts is a nightmare.

The Solution

Define your dimensions once:

{
  "variants": {
    "dimensions": {
      "role": {
        "options": { "admin": {...}, "user": {...}, "guest": {...} }
      },
      "locale": {
        "options": { "en": {...}, "de": {...}, "fr": {...}, "ko": {...} }
      },
      "theme": {
        "options": { "light": {...}, "dark": {...} }
      }
    }
  }
}

Run one command:

poliage run --all-variants

Get 24 looping GIFs, automatically organized, automatically hosted.

Use Cases

Theme: Dark mode, light mode, high contrast
Locale: Different languages (en, ko, de, ja)
Role: Admin, user, guest permissions
Device: Desktop, tablet, mobile viewports

Defining Dimensions

Configure variants in docsync.config.json:

{
  "variants": {
    "dimensions": {
      "theme": {
        "label": "Theme",
        "options": {
          "dark": {
            "name": "Dark Mode",
            "inject": [
              { "method": "localStorage", "key": "theme", "value": "dark" },
              {
                "method": "cookie",
                "name": "theme_preference",
                "value": "dark"
              }
            ]
          },
          "light": {
            "name": "Light Mode",
            "inject": [
              { "method": "localStorage", "key": "theme", "value": "light" }
            ]
          }
        }
      },
      "locale": {
        "label": "Language",
        "options": {
          "ko": {
            "name": "Korean",
            "inject": [
              {
                "method": "browser",
                "locale": "ko-KR",
                "timezone": "Asia/Seoul"
              }
            ]
          },
          "en": {
            "name": "English",
            "inject": [
              {
                "method": "browser",
                "locale": "en-US",
                "timezone": "America/New_York"
              }
            ]
          }
        }
      }
    }
  }
}

Injection Methods

Method	Description	Example
`localStorage`	Sets a localStorage key	`{ "method": "localStorage", "key": "theme", "value": "dark" }`
`cookie`	Sets a browser cookie	`{ "method": "cookie", "name": "session", "value": "abc123" }`
`urlParam`	Adds URL parameter	`{ "method": "urlParam", "key": "lang", "value": "ko" }`
`browser`	Browser settings	`{ "method": "browser", "locale": "ko-KR", "timezone": "Asia/Seoul" }`

Running with Variants

All Variants

poliage run --all-variants

Specific Variant

poliage run --variant "theme:dark"

Multiple Dimensions

poliage run --variant "theme:dark,locale:ko"

Output Structure

Assets are organized by variant:

.poliage/output/
├── default/
│   └── homepage.png
├── theme-dark/
│   └── homepage.png
├── theme-light/
│   └── homepage.png
└── locale-ko/
    └── homepage.png

Accessing Variants via CDN

If using Poliage Platform, access variants with query parameters:

https://cdn.poliage.com/v1/assets/[project]/[visual-key]?context=dark
https://cdn.poliage.com/v1/assets/[project]/[visual-key]?context=ko-KR

Variants work by injecting state before your scenario runs. Ensure your application reads from the injected sources (localStorage, cookies, etc.) on initial load.