{
  "schemaVersion": "1.2",
  "kind": "template",
  "id": "beforeafter-split",
  "variantId": "beforeafter-split",
  "template": "beforeafter",
  "title": "Before and After Split",
  "url": "https://cliphou.se/templates/beforeafter-split/",
  "editorUrl": "https://cliphou.se/#/v/beforeafter-split",
  "templateVersion": 1,
  "latestTemplateVersion": 1,
  "sourceHash": "7a073e435210132b",
  "generation": {
    "model": "Claude Opus 5.5",
    "modelId": "claude-opus-5-5",
    "provider": "Anthropic",
    "effort": "medium"
  },
  "siteCommit": "27d0f0df8e4cf1d189d78476bbbb4d8c7f2dacaa",
  "license": "MIT-0",
  "licenseUrl": "https://cliphou.se/license/",
  "price": "Free",
  "attributionRequired": false,
  "format": {
    "aspectRatio": "4:5",
    "width": 1080,
    "height": 1350,
    "fps": 30,
    "durationInFrames": 300,
    "seconds": 10
  },
  "scenes": [
    {
      "type": "title-reveal",
      "label": "Title reveal",
      "from": 0,
      "duration": 70,
      "roles": [
        "headline"
      ]
    },
    {
      "type": "comparison",
      "label": "Comparison",
      "from": 70,
      "duration": 160,
      "roles": [
        "point1",
        "point2"
      ]
    },
    {
      "type": "end-screen",
      "label": "End screen",
      "from": 230,
      "duration": 70,
      "roles": [
        "brand",
        "cta"
      ]
    }
  ],
  "props": {
    "texts": {
      "headline": "Your workflow, fixed",
      "point1": "14 open tabs",
      "point2": "One clean inbox",
      "brand": "Tidyflow",
      "cta": "Try it free"
    },
    "theme": {
      "background": "#f6f4ef",
      "surface": "#d9d4c7",
      "foreground": "#1d1c1a",
      "accent": "#1f8a5b",
      "accent2": "#e0452b"
    }
  },
  "editableFields": {
    "texts": {
      "headline": {
        "label": "Headline",
        "maxLength": 24,
        "current": "Your workflow, fixed"
      },
      "point1": {
        "label": "Point 1",
        "maxLength": 16,
        "current": "14 open tabs"
      },
      "point2": {
        "label": "Point 2",
        "maxLength": 16,
        "current": "One clean inbox"
      },
      "brand": {
        "label": "Brand",
        "maxLength": 18,
        "current": "Tidyflow"
      },
      "cta": {
        "label": "Call to action",
        "maxLength": 20,
        "current": "Try it free"
      }
    },
    "theme": {
      "background": {
        "format": "#RRGGBB",
        "current": "#f6f4ef"
      },
      "surface": {
        "format": "#RRGGBB",
        "current": "#d9d4c7"
      },
      "foreground": {
        "format": "#RRGGBB",
        "current": "#1d1c1a"
      },
      "accent": {
        "format": "#RRGGBB",
        "current": "#1f8a5b"
      },
      "accent2": {
        "format": "#RRGGBB",
        "current": "#e0452b"
      }
    }
  },
  "jsonSchema": {
    "$schema": "https://json-schema.org/draft/2020-12/schema",
    "type": "object",
    "properties": {
      "texts": {
        "type": "object",
        "properties": {
          "headline": {
            "type": "string",
            "minLength": 1,
            "maxLength": 24,
            "role": "headline"
          },
          "point1": {
            "type": "string",
            "minLength": 1,
            "maxLength": 16,
            "role": "point1"
          },
          "point2": {
            "type": "string",
            "minLength": 1,
            "maxLength": 16,
            "role": "point2"
          },
          "brand": {
            "type": "string",
            "minLength": 1,
            "maxLength": 18,
            "role": "brand"
          },
          "cta": {
            "type": "string",
            "minLength": 1,
            "maxLength": 20,
            "role": "cta"
          }
        },
        "required": [
          "headline",
          "point1",
          "point2",
          "brand",
          "cta"
        ],
        "additionalProperties": false
      },
      "theme": {
        "type": "object",
        "properties": {
          "background": {
            "type": "string",
            "pattern": "^#[0-9a-fA-F]{6}$",
            "role": "background"
          },
          "surface": {
            "type": "string",
            "pattern": "^#[0-9a-fA-F]{6}$",
            "role": "surface"
          },
          "foreground": {
            "type": "string",
            "pattern": "^#[0-9a-fA-F]{6}$",
            "role": "foreground"
          },
          "accent": {
            "type": "string",
            "pattern": "^#[0-9a-fA-F]{6}$",
            "role": "accent"
          },
          "accent2": {
            "type": "string",
            "pattern": "^#[0-9a-fA-F]{6}$",
            "role": "accent2"
          }
        },
        "required": [
          "background",
          "surface",
          "foreground",
          "accent",
          "accent2"
        ],
        "additionalProperties": false
      }
    },
    "required": [
      "texts",
      "theme"
    ],
    "additionalProperties": false
  },
  "handoff": {
    "urlTemplate": "https://cliphou.se/#/v/beforeafter-split?props=<url-encoded props JSON>",
    "example": "https://cliphou.se/#/v/beforeafter-split?props=%7B%22texts%22%3A%7B%22headline%22%3A%22Your%20workflow%2C%20fixed%22%2C%22point1%22%3A%2214%20open%20tabs%22%2C%22point2%22%3A%22One%20clean%20inbox%22%2C%22brand%22%3A%22Tidyflow%22%2C%22cta%22%3A%22Try%20it%20free%22%7D%2C%22theme%22%3A%7B%22background%22%3A%22%23f6f4ef%22%2C%22surface%22%3A%22%23d9d4c7%22%2C%22foreground%22%3A%22%231d1c1a%22%2C%22accent%22%3A%22%231f8a5b%22%2C%22accent2%22%3A%22%23e0452b%22%7D%7D",
    "maxEncodedLength": 8000,
    "note": "cliphou.se validates the props before it opens them. Invalid props are rejected and never saved."
  },
  "source": {
    "package": "https://cliphou.se/source/beforeafter/v1.tar.gz",
    "packageSha256": "3ae8150bc8051c215a3bfffdf775c6283f0b1ecfdc0913d9fc34b7ee0ab90a29",
    "templateVersion": 1,
    "renderCommand": "npm ci && npx remotion render src/index.ts beforeafter out/video.mp4 --props=props.json",
    "repository": "https://github.com/sunmer/voodoo",
    "path": "src/videos/beforeafter/",
    "contents": "Remotion component, schema, scene metadata, shared helpers, exact dependency versions, lockfile, example props, and MIT-0 license. Fonts install from pinned Fontsource packages.",
    "note": "Rendering uses Remotion, which has separate license terms: https://remotion.dev/license"
  },
  "instructions": [
    "For text and color edits, change only props.texts and props.theme. Keep each text within maxLength and each color as #RRGGBB.",
    "Return text and color edits as handoff.urlTemplate with the props JSON URL-encoded.",
    "For layout, motion, timing, or scene edits, download source.package, extract it, and edit the code.",
    "Render the source package with source.renderCommand. Edit props.json to change text and colors.",
    "Never send code through the handoff URL. It accepts props only."
  ]
}