Cipher Dither Login v3.2

# Cipher Dither Login v3.2

{
  "summary": "A high-fidelity technical terminal interface featuring a right-anchored login card, a technical sidebar with vertical text, and layered visual noise including dither patterns, scanlines, and CRT vignette effects. The design emphasizes a protocol-heavy aesthetic with precise metadata and monospaced data visualization.",
  "style": {
    "description": "The style is 'Digital Brutalist Noir'. It utilizes a monochromatic palette centered on pure black (#050505) and white (#FFFFFF) with varying opacities for depth. Typography pairings include 'Space Grotesk' for bold, tight headings and 'JetBrains Mono' for technical data and labels. Visual flair is added through 2x2 pixel dither patterns, subtle glitch animations (cubic-bezier transitions), and vertical vertical scanning line overlays.",
    "prompt": "Create a design system with a background color of #050505. Typography: Primary Sans-Serif (Space Grotesk, weights 300, 700) for high-impact headings with tracking-tighter; Primary Mono (JetBrains Mono, weights 400, 500) for all functional UI, metadata, and labels with tracking-widest (0.15em - 0.5em). Colors: Background #050505, Card Surface #0a0a0a, Primary Text #FFFFFF, Secondary Text rgba(255,255,255,0.4), Borders rgba(255,255,255,0.08). Effects: A global dither overlay using a repeating 2x2px conic gradient (rgba(255,255,255,0.03)); static scanlines (2px transparent, 1px rgba(0,0,0,0.1)); a CRT vignette radial gradient (transparent 30% to rgba(0,0,0,0.7) 100%). Micro-interactions should include a 1px scanner bar moving vertically and vertical glitch line artifacts with an 8s alternate animation cycle."
  },
  "layout_and_structure": {
    "description": "A split layout featuring a 20-25% width fixed technical sidebar on the left and a flexible main area on the right where the primary action card is anchored.",
    "prompts": [
      {
        "part": "Left Technical Sidebar",
        "prompt": "A fixed sidebar with a 1px border-right (rgba(255,255,255,0.05)). Includes a large, low-opacity (0.03) logo watermark positioned off-center. Features vertical text containers ('writing-mode: vertical-rl') with uppercase mono labels tracking CORE_INFRASTRUCTURE and ENCRYPTION_SPECS. A bottom footer within the sidebar displays live technical statuses (e.g., NODE_ID, LATENCY) with a pulsing green (#22c55e) status dot."
      },
      {
        "part": "Main Interaction Area",
        "prompt": "An expansive area with absolute-positioned glitch artifacts (vertical 1px lines of varying heights). The area is right-justified to hold the login card. It features fixed decorative corner marks (12x12px L-shapes) in the top-right and bottom-left of the viewport at 20% opacity."
      },
      {
        "part": "Multi-Step Login Card",
        "prompt": "A container (max-width: 440px) with a subtle backdrop-blur (sm) and a background of black/40. Structure: 1. Progression bar at top with 'STEP 1 OF 3' text and a 1px divider. 2. Large H1 heading in Space Grotesk Bold with a mono sub-label. 3. Form fields with bg-white/3, 1px white/10 borders, and 16px padding. 4. An outline button (1px border, no fill) that inverts on hover (white background, black text, 20px outer glow). 5. Bottom metadata grid showing PROTOCOL, ENTROPY, and SIGNAL_STRENGTH in a 2-column layout."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Dithered CRT Overlay",
      "description": "A multi-layered screen effect that simulates vintage hardware displays.",
      "prompt": "Implement three fixed layers: 1. A bottom layer with a radial gradient vignette for edge darkening. 2. A middle layer with horizontal scanlines (repeating linear gradient). 3. A top 'dither' layer using a 2px repeating-conic-gradient that shifts position every 0.15s using a steps(2) animation to create a 'boiling' pixel noise effect."
    },
    {
      "component": "Technological Outline Button",
      "description": "A high-contrast interactive element with aggressive hover states.",
      "prompt": "A button with a transparent background and 1px solid rgba(255,255,255,0.2) border. On hover, the background must transition to solid #FFFFFF, text to #000000, and it must produce a white box-shadow glow (0 0 20px) and a subtle 1px upward translation. Use a cubic-bezier(0.4, 0, 0.2, 1) timing function."
    },
    {
      "component": "Vertical Technical Artifacts",
      "description": "Decorative glitches that maintain the cybernetic atmosphere.",
      "prompt": "Create 1px wide vertical lines ('artifact-v') of varying heights (16px to 40px). Use a keyframe animation 'glitch-line' that alternates between scaleX(0) and scaleX(1) with varying opacities to simulate data corruption. Position them randomly across the layout with different animation-delay values."
    }
  ]
}