{
  "id": "ui-microstudy",
  "name": "UI Microstudy",
  "tagline": "One crisp interface component morphs into the next while a cursor clicks, drags and hovers, and the colour field changes every beat.",
  "description": "A code-made UI motion study for product tours, feature reels and design-engineering showcases. A single white or near-black pill/card sits dead centre on a flat saturated colour with a few faint circles and bands. A cursor performs a real interaction, and the component springs into the next one (button, music player, volume bar, segmented control, stat card with ticking number and drawing chart, command palette, emoji reactions, star rating, toast stack) while a circular wipe swaps the background colour.",
  "mood": [
    "crisp",
    "playful",
    "precise"
  ],
  "pacing": "medium",
  "format": "16:9",
  "width": 1920,
  "height": 1080,
  "durationSeconds": 8,
  "palette": {
    "pink": "#ff5c93",
    "purple": "#7c4dff",
    "teal": "#0fb5a6",
    "blue": "#2f5bff",
    "orange": "#ff7a1a",
    "green": "#1fc76a",
    "yellow": "#ffc82e",
    "redOrange": "#ff4a2b",
    "cardInk": "#17171d",
    "cardWhite": "#ffffff",
    "textMuted": "#8d8d9a"
  },
  "fonts": {
    "display": {
      "family": "Inter",
      "weights": [
        600,
        700,
        800
      ],
      "source": "Google Fonts",
      "usage": "All UI text. Headline numbers 108px/800 with -0.045em tracking, labels 24–32px/600, captions 18–22px/500; tabular numerals"
    },
    "body": {
      "family": "Inter",
      "weights": [
        500,
        600
      ],
      "source": "Google Fonts",
      "usage": "Secondary labels and sublines in muted grey (#8d8d9a on dark, #6b6b76 on white)"
    },
    "mono": {
      "family": "JetBrains Mono",
      "weights": [
        500
      ],
      "source": "Google Fonts",
      "usage": "Tiny technical captions (shortcut hints, the wordmark subline) at 20–22px"
    }
  },
  "easing": {
    "morph": "back.out(1.5)",
    "pop": "back.out(3)",
    "drag": "power2.inOut",
    "cursor": "power3.out",
    "tick": "power3.out",
    "wipe": "power3.out"
  },
  "transitions": [
    "card morph: width, height and border-radius spring to the next component's size with back.out(1.5) in ~0.6s",
    "circular wipe from the frame centre (clip-path circle 0 to 1180px, 0.7s) reveals the next background colour",
    "old content fades and shrinks to 0.94 in 0.14s, new content fades up 0.16s into the morph"
  ],
  "textAnimations": [
    "number tick: 66,963 to 84,320 over 0.9s with power3.out",
    "typed query: letters appear on 0.06s beats with a moving orange caret",
    "emoji, stars and chart dots pop in with scale 0 to 1, back.out(2.6–3)",
    "wordmark letters rise 60px with back.out(2) and 0.03s stagger"
  ],
  "rhythm": {
    "averageShotSeconds": 0.75,
    "notes": "Ten morphs in 8s: about 0.65–0.9s per component, 1.15s for the stat card. Each beat is one cursor action (hover, press, drag) then a morph. Close with a small dark confirmation pill that reads 'every frame is code', then a wordmark card on the opening colour."
  },
  "tags": [
    "ui",
    "morph",
    "product-tour",
    "components",
    "cursor"
  ],
  "guide": "- Put exactly one component on screen, centred on a flat saturated field (#ff5c93, #7c4dff, #0fb5a6, #2f5bff, #ff7a1a, #1fc76a, #ffc82e, #ff4a2b). Add 3 faint shapes (a 10% white disc, a 24% white ring, a 5% black diagonal band); never gradients or glows.\n- Cards are white (#ffffff) or ink (#17171d), 88–104px tall pills (radius = height/2) or 300–420px cards (radius 34–44), with a two-layer soft shadow (0 34px 70px -14px rgba(20,10,40,.36) + 0 10px 22px rgba(20,10,40,.16)). Keep components 340–760px wide on a 1920 frame.\n- Use one persistent card element and tween width/height/border-radius with back.out(1.5) over ~0.6s; fade old content out in 0.14s and new content in 0.16s later. Change the background colour on every morph with a centre-out circular clip-path wipe (power3.out, 0.7s) and never reuse a neighbouring colour.\n- A black arrow cursor with a white outline drives every beat: arrive with power3.out, scale to 0.8 and spring back (back.out(3)) on press, drag with power2.inOut while the thing it drags (knob, fill, highlight) uses the same tween so they never drift apart.\n- Animate the content, not just the shell: tick numbers (power3.out), draw chart lines with pathLength dashoffset, type queries on 0.06s beats, pop emoji and stars at scale 0 to 1 with back.out(3). Draw emoji and icons as inline SVG, never system emoji.\n- Typography is Inter only: 600–800 weights, tight tracking (-0.01em body, -0.045em on big numbers), tabular numerals, copy that is specific and short (\"Make it move\", \"Plays this week\", \"Theme saved\").\n- Plan 7–10 components, ~0.7–1.2s each; end with a small dark confirmation pill carrying the tagline, then a wordmark card on the opening colour. Avoid centred titles, drop-in text blocks, or any component that holds longer than 1.3s without a cursor action."
}