Deliberate Narrative Conflict Resolution

# Deliberate Narrative Conflict Resolution

{
  "summary": "A high-fidelity calendar UI that uses slow, choreographed animations to demonstrate AI conflict resolution. The aesthetic combines a professional grid layout with 'Studio Lighting' glow effects and bold, oversized scheduling blocks that transform from conflict states to resolved states.",
  "style": {
    "description": "The style is 'Cinematic Minimalist Dashboard'. It pairs the technical Satoshi sans-serif with the bold, wide Cabinet Grotesk for headings. Colors are used functionally: green for resolution/success and red for friction/conflicts. Animation is the primary feedback mechanism, using long-duration cubic-beziers to create a 'deliberate' rather than 'instant' feel. Lighting is simulated using subtle top-down and corner-bound radial gradients.",
    "prompt": "Create a dark-themed UI style guide. **Colors**: Background #0c0c0e; Green Accent #22c55e; Red Conflict #ef4444; Borders white/10. **Typography**: Headings use 'Cabinet Grotesk' (800 weight, uppercase, tracking-widest); Body uses 'Satoshi' (400, 500, 700 weights). **Studio Lighting**: Apply a radial gradient `circle at 50% 0%` with rgba(34, 197, 94, 0.08) and another at `100% 100%` with white at 0.05 opacity. **Visual Elements**: Use rounded corners (16px to 24px), semi-transparent backgrounds (bg-white/5), and intense glows for active states (e.g., shadow: 0 20px 60px rgba(34,197,94,0.4)). **Motion Philosophy**: All animations must use `animation-fill-mode: forwards` and non-linear easing like `cubic-bezier(0.65, 0, 0.35, 1)` for a glide effect."
  },
  "layout_and_structure": {
    "description": "The layout is a multi-column calendar grid with a fixed sidebar for time markers and a floating bottom dock for tools.",
    "prompts": [
      {
        "part": "Header",
        "prompt": "Design a top navigation bar with a logo area on the left (icon + 'SYNC.' text in Cabinet Grotesk). On the right, place a stack of overlapping team avatars with 2px borders and an 'Invite Team' button (pill-shaped, white/5 bg, border white/10)."
      },
      {
        "part": "Calendar Grid",
        "prompt": "Construct a grid with 5 columns. The first column is narrow (80px) containing time markers from 08:00 AM to 01:00 PM with 80px vertical spacing. Highlight the 'Current Time' marker in green with a subtle pill background. The next 4 columns represent users, each topped with a 40px avatar and name."
      },
      {
        "part": "Busy State Blocks",
        "prompt": "Within the grid, create blocks of varying heights (e.g., 64px, 80px). Style: background red-500 at 10% opacity, border red-500 at 20% opacity. Content includes a 'BUSY' label (10px, uppercase, 700 weight) and a time range subtext."
      },
      {
        "part": "Floating Tool Dock",
        "prompt": "Create a bottom-centered floating toolbar. Style: bg #121214, border white/10, shadow-2xl, rounded-2xl. Include three sections separated by vertical dividers: 'Analyze Grid' (search icon), 'Sync Active' (wand icon + green highlight), and 'Configuration' (settings icon)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Resolution Sync Block",
      "description": "A high-priority green block that appears to 'float' and expand over the grid.",
      "prompt": "Design a 72px tall block with background #22c55e and 24px rounded corners. Include a 'Sparkle' icon, bold text 'Scheduled: [Event Name]', and a timestamp. **Animation sequence**: 1. Glide upward over 5 seconds from the bottom of the viewport using `cubic-bezier(0.65, 0, 0.35, 1)`. 2. After gliding, expand width to fill all user columns over 2 seconds using `cubic-bezier(0.7, 0, 0.3, 1)`. Add small user avatars in the bottom right that bounce into view sequentially at the end of the expansion."
    },
    {
      "component": "Shaking Conflict Card",
      "description": "A red block that indicates scheduling friction through vibration.",
      "prompt": "Implement a 'Conflict' card with a shake animation: `translateX(-3px)` to `translateX(3px)` repeating for 4 seconds. After the shake, the card should fade out and scale down to 0.9x over 1 second, effectively disappearing as the conflict is 'resolved'."
    }
  ]
}