{
  "id": "dither-serif",
  "name": "Dither Serif",
  "tagline": "A stippled 3D mascot, big serif headlines with one cobalt script word, floating UI and a skewed stamp that slams.",
  "description": "Product-launch style for a booking or payments tool. A black-and-white dithered 3D mascot (shaded per pixel with an ordered Bayer threshold) walks through clean white, vivid cobalt and black scenes. Headlines are a large elegant serif with ONE word swapped to a cobalt handwritten script, white product cards float on blue, a phone shows the storefront, a desktop checkout with a pricing slider and subtotal panel builds up, then a big skewed cobalt stamp slams across the UI. Cuts use an iris from the mascot or a halftone dot wipe; it ends on a white card with wordmark, tagline, cobalt button and URL.",
  "mood": [
    "crisp",
    "playful",
    "premium"
  ],
  "pacing": "medium",
  "format": "16:9",
  "width": 1920,
  "height": 1080,
  "durationSeconds": 8.5,
  "palette": {
    "white": "#ffffff",
    "ink": "#0b0d14",
    "cobalt": "#0f4cff",
    "cobaltLight": "#5b86ff",
    "cobaltTint": "#e5ecff",
    "panel": "#f1f4fa",
    "iconWell": "#eef2fc",
    "muted": "#6b7385",
    "black": "#07080c"
  },
  "fonts": {
    "display": {
      "family": "DM Serif Display",
      "weights": [
        400
      ],
      "source": "Google Fonts",
      "usage": "Headlines 104–170px, wordmark 230px, card titles and prices 50–70px, tracking -0.01em, never more than three lines"
    },
    "body": {
      "family": "Inter",
      "weights": [
        400,
        500,
        600
      ],
      "source": "Google Fonts",
      "usage": "UI text 17–38px: row titles, field text, buttons and pills"
    },
    "accent": {
      "family": "Covered By Your Grace",
      "weights": [
        400
      ],
      "source": "Google Fonts",
      "usage": "The ONE accent word per headline in cobalt (#0f4cff, or #5b86ff on black, white on cobalt), 1.35–2.1x the serif size, written on with a left-to-right clip reveal"
    }
  },
  "easing": {
    "slam": "expo.out",
    "pop": "back.out(1.6)",
    "stampIn": "power3.in",
    "slide": "power3.inOut",
    "float": "sine.inOut"
  },
  "transitions": [
    "iris: a clip-path circle opens from the mascot into the next colour scene (0.55s power2.in)",
    "halftone wipe: a 30x17 dot grid grows to cover the frame then shrinks away in reverse order (0.62s), drawn on a canvas from the timeline",
    "hard cut from white UI to black right after the stamp lands"
  ],
  "textAnimations": [
    "serif lines slam up 80–110px with opacity 0 → 1, expo.out 0.5s, 0.12s stagger",
    "script accent is revealed by clip-path inset left → right in 0.4s, then a cobalt squiggle underline draws on (pathLength 1 → 0)",
    "stamp: scale 3.4 → 1 in 0.16s power3.in, then 1.04 bounce and a 4-step screen shake",
    "numbers count: slider price tweens $18 → $34 while the knob and fill travel"
  ],
  "rhythm": {
    "averageShotSeconds": 1.4,
    "notes": "Six beats: mascot intro + headline (1.4s), product cards (1.4s), phone storefront (1.5s), checkout UI with stamp (1.7s), black statement (1.2s), end card (1.25s). Something new lands every ~0.5s and nothing sits still longer than 1s."
  },
  "tags": [
    "launch",
    "product-ui",
    "dither",
    "serif",
    "mascot"
  ],
  "guide": "- Palette: white #ffffff, cobalt #0f4cff, black #07080c, ink #0b0d14, UI grey #f1f4fa. Alternate white, cobalt and black scenes; the same 3D mascot appears in every scene and always faces the thing it talks about.\n- Make the mascot with real dithering, not a texture: shade a surface of revolution per pixel (light from the top left, rim darkening, one specular), then threshold against an 8x8 Bayer matrix on a low-res canvas (about 110x123 or 170x190) shown with image-rendering: pixelated at 3x. Draw the face on separate canvases (open, happy, blink) so you can swap or slide it. The same renderer makes icons (vase, bowl, mug) for cards and list rows.\n- Headlines: DM Serif Display 104–170px, ONE word swapped to a cobalt handwritten script (Covered By Your Grace, 1.35–2.1x size) that is revealed left to right and underlined with a hand-drawn squiggle. Write original copy such as 'Got a class to sell?' and 'in minutes.'\n- UI: white cards with 34–36px radius and soft shadows, an icon well in #eef2fc, serif prices in cobalt, phone with a 14px black bezel, desktop panels with a black wallet button, cobalt pay button, pricing slider and line-item subtotal. Add a cursor that ticks an upsell box and presses pay before the stamp.\n- The stamp: a cobalt slab 1380x420, rotation -5deg, skewX -9deg, double white inner border, serif 330px white word ('Handled.'). Scale 3.4 → 1 in 0.16s power3.in, small bounce, then shake the UI beneath it by 8–16px in four quick steps.\n- Cuts: iris from the mascot into cobalt, a canvas halftone dot wipe into white scenes, and a hard cut to black. Fill the cobalt and black backgrounds with a dithered dot gradient from one corner or behind the mascot, never a smooth glow.\n- Avoid: glossy 3D renders, drop-shadow glow on UI, gradients, more than one script word per headline, centred title cards that only fade in."
}