@webspire/mcp 0.7.1 → 0.8.0

package/data/registry.json

@@ -1,6 +1,6 @@
 {
   "version": "1.2.0",
-  "generated": "2026-03-21T18:18:27.871Z",
+  "generated": "2026-03-21T23:26:59.284Z",
   "snippets": [
     {
       "id": "animations/blur-in",
@@ -675,6 +675,60 @@
       },
       "css": "@property --breathe-hue {\n  syntax: \"<number>\";\n  initial-value: 280;\n  inherits: false;\n}\n\n.color-breathe {\n  --breathe-hue-start: 280;\n  --breathe-hue-end: 180;\n  --breathe-chroma: 0.2;\n  --breathe-lightness: 0.6;\n  --breathe-speed: 8s;\n  --breathe-hue: var(--breathe-hue-start);\n  background: oklch(var(--breathe-lightness) var(--breathe-chroma) var(--breathe-hue));\n  animation: color-breathe-shift var(--breathe-speed) ease-in-out infinite alternate;\n}\n\n@keyframes color-breathe-shift {\n  to {\n    --breathe-hue: var(--breathe-hue-end);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .color-breathe {\n    animation: none;\n  }\n}\n"
     },
+    {
+      "id": "decorative/frame-corners",
+      "title": "Frame Corners",
+      "description": "Minimal corner-frame accent for cards, images, and promo blocks using only pseudo-elements.",
+      "category": "decorative",
+      "tags": [
+        "frame",
+        "corners",
+        "accent",
+        "card",
+        "overlay"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 30,
+        "bytes": 753,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": false,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--frame-corner-color",
+          "--frame-corner-size",
+          "--frame-corner-thickness"
+        ],
+        "classes": [
+          ".frame-corners"
+        ],
+        "useCases": [
+          "editorial promo cards with a more designed perimeter",
+          "image blocks or hero media frames",
+          "category tiles that need a subtle graphic accent"
+        ],
+        "solves": [
+          "bordered cards feel too generic",
+          "need a graphic frame treatment without extra markup",
+          "want a pseudo-element accent that works inside Tailwind cards"
+        ],
+        "usageExample": "<article class=\"frame-corners relative rounded-3xl border border-white/10 bg-slate-950/80 p-6 text-white\">...</article>",
+        "defaultValues": {
+          "--frame-corner-color": "oklch(0.74 0.16 260 / 0.9)",
+          "--frame-corner-size": "22px",
+          "--frame-corner-thickness": "2px"
+        }
+      },
+      "css": ".frame-corners {\n  --frame-corner-color: oklch(0.74 0.16 260 / 0.9);\n  --frame-corner-size: 22px;\n  --frame-corner-thickness: 2px;\n  position: relative;\n}\n\n.frame-corners::before,\n.frame-corners::after {\n  content: \"\";\n  position: absolute;\n  width: var(--frame-corner-size);\n  height: var(--frame-corner-size);\n  pointer-events: none;\n}\n\n.frame-corners::before {\n  top: 0;\n  left: 0;\n  border-top: var(--frame-corner-thickness) solid var(--frame-corner-color);\n  border-left: var(--frame-corner-thickness) solid var(--frame-corner-color);\n}\n\n.frame-corners::after {\n  right: 0;\n  bottom: 0;\n  border-right: var(--frame-corner-thickness) solid var(--frame-corner-color);\n  border-bottom: var(--frame-corner-thickness) solid var(--frame-corner-color);\n}\n"
+    },
     {
       "id": "decorative/gradient-border",
       "title": "Gradient Border",
@@ -792,6 +846,65 @@
       },
       "css": ".gradient-mesh {\n  --mesh-color-1: oklch(0.6 0.25 280);\n  --mesh-color-2: oklch(0.55 0.2 330);\n  --mesh-color-3: oklch(0.5 0.2 200);\n  --mesh-color-4: oklch(0.45 0.15 150);\n  background:\n    conic-gradient(\n      from 45deg at 30% 40%,\n      var(--mesh-color-1),\n      var(--mesh-color-2),\n      var(--mesh-color-3)\n    ),\n    conic-gradient(\n      from 200deg at 70% 60%,\n      var(--mesh-color-2),\n      var(--mesh-color-4),\n      var(--mesh-color-1)\n    );\n  background-blend-mode: overlay;\n  filter: blur(40px) saturate(1.5);\n}\n"
     },
+    {
+      "id": "decorative/gradient-progress-line",
+      "title": "Gradient Progress Line",
+      "description": "A left-to-right progress line with configurable gradient stops. Use it for process progress, status semantics, or to sync a visual line with active steps.",
+      "category": "decorative",
+      "tags": [
+        "gradient",
+        "progress",
+        "line",
+        "status",
+        "steps",
+        "decorative"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-21",
+      "meta": {
+        "lines": 30,
+        "bytes": 890,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--progress-from",
+          "--progress-via",
+          "--progress-to",
+          "--progress-height",
+          "--progress-width"
+        ],
+        "classes": [
+          ".gradient-progress-line"
+        ],
+        "useCases": [
+          "process progress with semantic color progression",
+          "highlight current completion state in step sections",
+          "decorative status line under cards or timelines"
+        ],
+        "solves": [
+          "need more expressive progress feedback than a flat color bar",
+          "want progress width controlled from CSS or JS",
+          "need one reusable line that can sync with step activation"
+        ],
+        "usageExample": "<div class=\"gradient-progress-line\" style=\"--progress-width: 66%\"></div>",
+        "defaultValues": {
+          "--progress-from": "oklch(0.68 0.22 28)",
+          "--progress-via": "oklch(0.79 0.2 85)",
+          "--progress-to": "oklch(0.73 0.18 150)",
+          "--progress-height": "0.35rem",
+          "--progress-width": "0%"
+        }
+      },
+      "css": ".gradient-progress-line {\n  --progress-from: oklch(0.68 0.22 28);\n  --progress-via: oklch(0.79 0.2 85);\n  --progress-to: oklch(0.73 0.18 150);\n  --progress-height: 0.35rem;\n  --progress-width: 0%;\n  position: relative;\n  width: 100%;\n  height: var(--progress-height);\n  border-radius: 9999px;\n  overflow: hidden;\n  background: color-mix(in oklch, currentColor 14%, transparent);\n}\n\n.gradient-progress-line::after {\n  content: \"\";\n  position: absolute;\n  inset: 0 auto 0 0;\n  width: var(--progress-width);\n  border-radius: inherit;\n  background: linear-gradient(90deg, var(--progress-from), var(--progress-via), var(--progress-to));\n  box-shadow: 0 0 18px color-mix(in oklch, var(--progress-via) 32%, transparent);\n  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .gradient-progress-line::after {\n    transition-duration: 0.01ms;\n  }\n}\n"
+    },
     {
       "id": "decorative/grid-pattern",
       "title": "Grid Pattern",
@@ -849,6 +962,58 @@
       },
       "css": ".grid-pattern {\n  --grid-size: 3rem;\n  --grid-color: oklch(1 0 0 / 0.06);\n  --grid-thickness: 1px;\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--grid-color) 0 var(--grid-thickness),\n      transparent var(--grid-thickness) var(--grid-size)\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--grid-color) 0 var(--grid-thickness),\n      transparent var(--grid-thickness) var(--grid-size)\n    );\n}\n\n.grid-pattern-dots {\n  --grid-size: 2rem;\n  --grid-color: oklch(1 0 0 / 0.15);\n  --grid-dot-size: 1px;\n  background-image: radial-gradient(\n    circle,\n    var(--grid-color) var(--grid-dot-size),\n    transparent var(--grid-dot-size)\n  );\n  background-size: var(--grid-size) var(--grid-size);\n}\n"
     },
+    {
+      "id": "decorative/label-rail",
+      "title": "Label Rail",
+      "description": "Vertical rail accent for small label groups, metadata blocks, and editorial side notes.",
+      "category": "decorative",
+      "tags": [
+        "label",
+        "rail",
+        "accent",
+        "metadata",
+        "editorial"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 17,
+        "bytes": 382,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": false,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--label-rail-color",
+          "--label-rail-width"
+        ],
+        "classes": [
+          ".label-rail"
+        ],
+        "useCases": [
+          "metadata callouts in Tailwind cards",
+          "side labels or annotations in editorial layouts",
+          "small descriptive blocks that need more visual structure"
+        ],
+        "solves": [
+          "tiny content blocks need hierarchy without using a full border card",
+          "badges alone are too weak for side metadata",
+          "want a slim editorial accent that fits inside normal Tailwind markup"
+        ],
+        "usageExample": "<div class=\"label-rail text-sm text-slate-600\"><p class=\"font-semibold text-slate-900\">Research</p><p>Updated 2 days ago</p></div>",
+        "defaultValues": {
+          "--label-rail-color": "oklch(0.74 0.16 250 / 0.22)",
+          "--label-rail-width": "3px"
+        }
+      },
+      "css": ".label-rail {\n  --label-rail-color: oklch(0.74 0.16 250 / 0.22);\n  --label-rail-width: 3px;\n  position: relative;\n  padding-left: 1rem;\n}\n\n.label-rail::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.2rem;\n  bottom: 0.2rem;\n  width: var(--label-rail-width);\n  border-radius: 9999px;\n  background: linear-gradient(180deg, var(--label-rail-color), transparent);\n}\n"
+    },
     {
       "id": "decorative/morph-blob",
       "title": "Morph Blob",
@@ -1175,6 +1340,116 @@
       },
       "css": ".shimmer {\n  --shimmer-color: oklch(0.85 0 0 / 0.6);\n  --shimmer-bg: oklch(0.92 0 0);\n  --shimmer-speed: 1.5s;\n  position: relative;\n  overflow: hidden;\n  background: var(--shimmer-bg);\n  border-radius: 0.5rem;\n}\n\n.shimmer::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(90deg, transparent 0%, var(--shimmer-color) 50%, transparent 100%);\n  animation: shimmer-sweep var(--shimmer-speed) ease-in-out infinite;\n  transform: translateX(-100%);\n}\n\n@keyframes shimmer-sweep {\n  to {\n    transform: translateX(100%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .shimmer::after {\n    animation: none;\n    opacity: 0;\n  }\n}\n"
     },
+    {
+      "id": "decorative/stripe-reveal",
+      "title": "Stripe Reveal",
+      "description": "Hover overlay with animated repeating stripes for buttons, cards, and highlighted surfaces.",
+      "category": "decorative",
+      "tags": [
+        "stripe",
+        "hover",
+        "overlay",
+        "button",
+        "card"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 35,
+        "bytes": 971,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--stripe-color",
+          "--stripe-width",
+          "--stripe-gap",
+          "--stripe-angle",
+          "--stripe-duration"
+        ],
+        "classes": [
+          ".stripe-reveal"
+        ],
+        "useCases": [
+          "Tailwind CTA buttons with more graphic hover treatment",
+          "editorial callout cards or promo tiles",
+          "featured links that need a stronger visual pass on hover"
+        ],
+        "solves": [
+          "flat hover overlays feel too bland",
+          "need a more graphic interaction without images or JS",
+          "want a stripe-based reveal that works on both buttons and cards"
+        ],
+        "usageExample": "<button class=\"stripe-reveal relative rounded-full border border-white/10 px-5 py-3 font-semibold text-white\">Upgrade</button>",
+        "defaultValues": {
+          "--stripe-color": "oklch(0.82 0.12 90 / 0.34)",
+          "--stripe-width": "14px",
+          "--stripe-gap": "14px",
+          "--stripe-angle": "90deg",
+          "--stripe-duration": "0.42s"
+        }
+      },
+      "css": ".stripe-reveal {\n  --stripe-color: oklch(0.82 0.12 90 / 0.34);\n  --stripe-width: 14px;\n  --stripe-gap: 14px;\n  --stripe-angle: 90deg;\n  --stripe-duration: 0.42s;\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n}\n\n.stripe-reveal::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: repeating-linear-gradient(\n    var(--stripe-angle),\n    var(--stripe-color) 0 var(--stripe-width),\n    transparent var(--stripe-width) calc(var(--stripe-width) + var(--stripe-gap))\n  );\n  opacity: 0;\n  transform: translateX(-18%);\n  transition:\n    transform var(--stripe-duration) cubic-bezier(0.16, 1, 0.3, 1),\n    opacity var(--stripe-duration) cubic-bezier(0.16, 1, 0.3, 1);\n  pointer-events: none;\n  z-index: -1;\n}\n\n.stripe-reveal:hover::before,\n.stripe-reveal:focus-visible::before {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .stripe-reveal::before {\n    transition: none;\n  }\n}\n"
+    },
+    {
+      "id": "decorative/topographic-lines",
+      "title": "Topographic Lines",
+      "description": "Soft contour-line background accent for editorial cards, hero panels, and diagram-like surfaces.",
+      "category": "decorative",
+      "tags": [
+        "decorative",
+        "lines",
+        "topographic",
+        "background",
+        "contour"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 17,
+        "bytes": 628,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": false,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--topographic-line-color",
+          "--topographic-line-gap"
+        ],
+        "classes": [
+          ".topographic-lines"
+        ],
+        "useCases": [
+          "hero or promo backgrounds in Tailwind landing pages",
+          "editorial callouts with a technical or map-like accent",
+          "subtle diagrammatic texture on cards and empty states"
+        ],
+        "solves": [
+          "flat surfaces need more atmosphere than a plain gradient",
+          "grid and dot patterns can feel too mechanical",
+          "want a softer graphic background treatment without images"
+        ],
+        "usageExample": "<section class=\"topographic-lines relative overflow-hidden rounded-[2rem] border border-white/10 bg-slate-950/80 p-8 text-white\">...</section>",
+        "defaultValues": {
+          "--topographic-line-color": "oklch(0.74 0.08 240 / 0.18)",
+          "--topographic-line-gap": "14px"
+        }
+      },
+      "css": ".topographic-lines {\n  --topographic-line-color: oklch(0.74 0.08 240 / 0.18);\n  --topographic-line-gap: 14px;\n  position: relative;\n  overflow: hidden;\n}\n\n.topographic-lines::before {\n  content: \"\";\n  position: absolute;\n  inset: -10%;\n  background:\n    radial-gradient(\n      circle at 20% 25%,\n      transparent 0 16%,\n      var(--topographic-line-color) 16.2% 17.2%,\n      transparent 17.4% 24%\n    ),\n    radial-gradient(\n      circle at 58% 52%,\n      transparent 0 14%,\n      var(--topographic-line-color) 14.2% 15.2%,\n      transparent 15.4% 22%\n    ),\n    radial-gradient(\n      circle at 80% 28%,\n      transparent 0 10%,\n      var(--topographic-line-color) 10.2% 11.2%,\n      transparent 11.4% 17%\n    );\n  pointer-events: none;\n  z-index: -1;\n}\n"
+    },
     {
       "id": "depth/floating-stack",
       "title": "Floating Stack",
@@ -1753,6 +2028,59 @@
       },
       "css": ".border-draw {\n  --border-draw-color: oklch(0.65 0.25 280);\n  --border-draw-width: 2px;\n  --border-draw-speed: 0.4s;\n  position: relative;\n}\n\n.border-draw::before,\n.border-draw::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: var(--border-draw-width) solid var(--border-draw-color);\n  pointer-events: none;\n  transition: clip-path var(--border-draw-speed) ease-in-out;\n}\n\n.border-draw::before {\n  clip-path: inset(0 100% 100% 0);\n}\n\n.border-draw::after {\n  clip-path: inset(100% 0 0 100%);\n}\n\n.border-draw:hover::before {\n  clip-path: inset(0 0 0 0);\n}\n\n.border-draw:hover::after {\n  clip-path: inset(0 0 0 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .border-draw::before,\n  .border-draw::after {\n    transition: none;\n  }\n}\n"
     },
+    {
+      "id": "interactions/caption-slide-card",
+      "title": "Caption Slide Card",
+      "description": "Media card overlay where the caption block lifts into place on hover, useful for galleries, featured posts, and promo tiles.",
+      "category": "interactions",
+      "tags": [
+        "card",
+        "caption",
+        "hover",
+        "media",
+        "overlay"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 28,
+        "bytes": 710,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--caption-slide-distance",
+          "--caption-slide-duration"
+        ],
+        "classes": [
+          ".caption-slide-card",
+          ".caption-slide-body"
+        ],
+        "useCases": [
+          "Tailwind media cards with hoverable caption overlays",
+          "blog or case-study teasers with image-first presentation",
+          "gallery and promo tiles with a clearer hover state"
+        ],
+        "solves": [
+          "plain image cards feel too inert",
+          "need a hover caption without complex 3D transforms",
+          "want a card reveal pattern that still fits normal Tailwind card markup"
+        ],
+        "usageExample": "<article class=\"caption-slide-card relative overflow-hidden rounded-3xl\"><div class=\"caption-slide-body p-6 text-white\">...</div></article>",
+        "defaultValues": {
+          "--caption-slide-distance": "18px",
+          "--caption-slide-duration": "0.38s"
+        }
+      },
+      "css": ".caption-slide-card {\n  --caption-slide-distance: 18px;\n  --caption-slide-duration: 0.38s;\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n}\n\n.caption-slide-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(180deg, transparent 28%, rgb(15 23 42 / 0.82));\n  opacity: 0.92;\n  z-index: -1;\n}\n\n.caption-slide-body {\n  transform: translateY(var(--caption-slide-distance));\n  transition: transform var(--caption-slide-duration) cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.caption-slide-card:hover .caption-slide-body,\n.caption-slide-card:focus-visible .caption-slide-body {\n  transform: translateY(0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .caption-slide-body {\n    transition: none;\n  }\n}\n"
+    },
     {
       "id": "interactions/expand-cards",
       "title": "Expand Cards",
@@ -1926,6 +2254,61 @@
       },
       "css": ".focus-ring:focus-visible {\n  --focus-color: oklch(0.55 0.2 250);\n  --focus-offset: 2px;\n  --focus-ring-width: 2px;\n  outline: var(--focus-ring-width) solid var(--focus-color);\n  outline-offset: var(--focus-offset);\n  box-shadow: 0 0 0 calc(var(--focus-offset) + var(--focus-ring-width) + 2px) oklch(1 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  .focus-ring:focus-visible {\n    box-shadow: 0 0 0 calc(var(--focus-offset) + var(--focus-ring-width) + 2px) oklch(0.15 0 0);\n  }\n}\n\n@supports not selector(:focus-visible) {\n  .focus-ring:focus {\n    outline: 2px solid oklch(0.55 0.2 250);\n    outline-offset: 2px;\n  }\n}\n"
     },
+    {
+      "id": "interactions/focus-within-panel",
+      "title": "Focus Within Panel",
+      "description": "Panel-level focus treatment that highlights a whole grouped UI block whenever one of its inner controls receives keyboard focus.",
+      "category": "interactions",
+      "tags": [
+        "focus",
+        "accessibility",
+        "panel",
+        "keyboard",
+        "form"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 15,
+        "bytes": 403,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": true,
+          "ariaNotes": [
+            "Useful for grouped form controls and keyboard navigation"
+          ]
+        },
+        "customProperties": [
+          "--focus-within-accent",
+          "--focus-within-shadow"
+        ],
+        "classes": [
+          ".focus-within-panel"
+        ],
+        "useCases": [
+          "grouped Tailwind form fields",
+          "settings cards with multiple controls",
+          "search bars or prompt panels with several focusable children"
+        ],
+        "solves": [
+          "keyboard focus is visible on the input but not on the containing surface",
+          "grouped panels feel disconnected during keyboard navigation",
+          "need a single state for multi-control cards"
+        ],
+        "usageExample": "<div class=\"focus-within-panel rounded-3xl border border-white/10 bg-slate-950/80 p-4 text-white\">...</div>",
+        "defaultValues": {
+          "--focus-within-accent": "oklch(0.72 0.16 250 / 0.2)",
+          "--focus-within-shadow": "0 0 0 1px color-mix(in oklab, white 18%, transparent), 0 0 0 6px var(--focus-within-accent)"
+        }
+      },
+      "css": ".focus-within-panel {\n  --focus-within-accent: oklch(0.72 0.16 250 / 0.2);\n  --focus-within-shadow:\n    0 0 0 1px color-mix(in oklab, white 18%, transparent), 0 0 0 6px var(--focus-within-accent);\n  transition: box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.focus-within-panel:focus-within {\n  box-shadow: var(--focus-within-shadow);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .focus-within-panel {\n    transition: none;\n  }\n}\n"
+    },
     {
       "id": "interactions/glow",
       "title": "Glow",
@@ -2038,6 +2421,59 @@
       },
       "css": ".hover-lift {\n  --lift-distance: -4px;\n  --lift-shadow: 0 8px 24px oklch(0 0 0 / 0.2);\n  --lift-duration: 0.25s;\n  transition:\n    transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),\n    box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.hover-lift:hover {\n  transform: translateY(var(--lift-distance));\n  box-shadow: var(--lift-shadow);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hover-lift {\n    transition: none;\n  }\n}\n"
     },
+    {
+      "id": "interactions/icon-shift-link",
+      "title": "Icon Shift Link",
+      "description": "Inline link treatment where the trailing icon glides forward on hover, ideal for text actions, cards, and section CTAs.",
+      "category": "interactions",
+      "tags": [
+        "link",
+        "icon",
+        "hover",
+        "cta",
+        "inline"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 19,
+        "bytes": 472,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--icon-shift-distance",
+          "--icon-shift-duration"
+        ],
+        "classes": [
+          ".icon-shift-link",
+          ".icon-shift-glyph"
+        ],
+        "useCases": [
+          "Tailwind text links with a clearer CTA direction",
+          "card footer actions or read-more links",
+          "section links where underline-only feels too passive"
+        ],
+        "solves": [
+          "text links need more direction without turning into buttons",
+          "icon links often feel static",
+          "want a tiny motion cue that fits normal Tailwind prose or cards"
+        ],
+        "usageExample": "<a class=\"icon-shift-link text-sm font-semibold text-slate-900\" href=\"#\"><span>Read more</span><span class=\"icon-shift-glyph\">→</span></a>",
+        "defaultValues": {
+          "--icon-shift-distance": "0.28rem",
+          "--icon-shift-duration": "0.28s"
+        }
+      },
+      "css": ".icon-shift-link {\n  --icon-shift-distance: 0.28rem;\n  --icon-shift-duration: 0.28s;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-decoration: none;\n}\n\n.icon-shift-link .icon-shift-glyph {\n  transition: transform var(--icon-shift-duration) cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.icon-shift-link:hover .icon-shift-glyph,\n.icon-shift-link:focus-visible .icon-shift-glyph {\n  transform: translateX(var(--icon-shift-distance));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .icon-shift-link .icon-shift-glyph {\n    transition: none;\n  }\n}\n"
+    },
     {
       "id": "interactions/magnetic",
       "title": "Magnetic",
@@ -2259,6 +2695,180 @@
       },
       "css": ".shine-sweep {\n  --shine-color: oklch(1 0 0 / 0.15);\n  --shine-speed: 0.6s;\n  position: relative;\n  overflow: hidden;\n  isolation: isolate;\n}\n\n.shine-sweep::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(120deg, transparent 30%, var(--shine-color) 50%, transparent 70%);\n  transform: translateX(-100%);\n  transition: none;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.shine-sweep:hover::after {\n  animation: shine-sweep-move var(--shine-speed) ease-out;\n}\n\n@keyframes shine-sweep-move {\n  to {\n    transform: translateX(100%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .shine-sweep::after {\n    display: none;\n  }\n}\n"
     },
+    {
+      "id": "interactions/stack-peek-card",
+      "title": "Stack Peek Card",
+      "description": "Card hover effect that reveals a two-layer stack behind the surface for a more editorial, dimensional hover state.",
+      "category": "interactions",
+      "tags": [
+        "hover",
+        "stack",
+        "cards",
+        "depth",
+        "editorial"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 61,
+        "bytes": 1887,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--stack-offset-x",
+          "--stack-offset-y",
+          "--stack-rotate-a",
+          "--stack-rotate-b",
+          "--stack-accent-a",
+          "--stack-accent-b",
+          "--stack-shadow"
+        ],
+        "classes": [
+          ".stack-peek-card"
+        ],
+        "useCases": [
+          "premium feature cards in Tailwind landing pages",
+          "editorial article teasers with more layered hover feedback",
+          "product cards that need more personality than a simple lift"
+        ],
+        "solves": [
+          "basic hover-lift feels too generic for hero cards",
+          "cards need depth without a full 3D tilt effect",
+          "want a stack reveal that still works in static Tailwind layouts"
+        ],
+        "usageExample": "<article class=\"stack-peek-card relative rounded-3xl border border-white/10 bg-slate-950/80 p-6 text-white\">...</article>",
+        "defaultValues": {
+          "--stack-offset-x": "14px",
+          "--stack-offset-y": "12px",
+          "--stack-rotate-a": "-4deg",
+          "--stack-rotate-b": "4deg",
+          "--stack-accent-a": "oklch(0.68 0.16 285 / 0.3)",
+          "--stack-accent-b": "oklch(0.78 0.12 220 / 0.24)",
+          "--stack-shadow": "0 22px 48px oklch(0.18 0.03 280 / 0.18)"
+        }
+      },
+      "css": ".stack-peek-card {\n  --stack-offset-x: 14px;\n  --stack-offset-y: 12px;\n  --stack-rotate-a: -4deg;\n  --stack-rotate-b: 4deg;\n  --stack-accent-a: oklch(0.68 0.16 285 / 0.3);\n  --stack-accent-b: oklch(0.78 0.12 220 / 0.24);\n  --stack-shadow: 0 22px 48px oklch(0.18 0.03 280 / 0.18);\n  position: relative;\n  isolation: isolate;\n  transition:\n    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),\n    box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.stack-peek-card::before,\n.stack-peek-card::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  border: 1px solid color-mix(in oklab, white 16%, transparent);\n  pointer-events: none;\n  z-index: -1;\n  transition:\n    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),\n    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.stack-peek-card::before {\n  background: linear-gradient(135deg, var(--stack-accent-a), transparent 70%);\n  opacity: 0.75;\n}\n\n.stack-peek-card::after {\n  background: linear-gradient(135deg, transparent 10%, var(--stack-accent-b));\n  opacity: 0.6;\n}\n\n.stack-peek-card:hover,\n.stack-peek-card:focus-visible {\n  transform: translateY(-6px);\n  box-shadow: var(--stack-shadow);\n}\n\n.stack-peek-card:hover::before,\n.stack-peek-card:focus-visible::before {\n  transform: translate3d(calc(var(--stack-offset-x) * -1), var(--stack-offset-y), 0)\n    rotate(var(--stack-rotate-a));\n}\n\n.stack-peek-card:hover::after,\n.stack-peek-card:focus-visible::after {\n  transform: translate3d(var(--stack-offset-x), calc(var(--stack-offset-y) + 6px), 0)\n    rotate(var(--stack-rotate-b));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .stack-peek-card,\n  .stack-peek-card::before,\n  .stack-peek-card::after {\n    transition: none;\n  }\n}\n"
+    },
+    {
+      "id": "interactions/thumb-reveal-link",
+      "title": "Thumb Reveal Link",
+      "description": "Link hover that reveals a small thumbnail beside the label, useful for editorial lists, menus, and featured link groups.",
+      "category": "interactions",
+      "tags": [
+        "link",
+        "hover",
+        "thumbnail",
+        "menu",
+        "editorial"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 57,
+        "bytes": 1715,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--thumb-reveal-scale",
+          "--thumb-reveal-rotate",
+          "--thumb-reveal-shift-x",
+          "--thumb-reveal-shift-y",
+          "--thumb-reveal-duration"
+        ],
+        "classes": [
+          ".thumb-reveal-link",
+          ".thumb-reveal-media"
+        ],
+        "useCases": [
+          "Tailwind navs with media-backed hover states",
+          "editorial article lists or featured links",
+          "portfolio and category menus that need more than a text hover"
+        ],
+        "solves": [
+          "text links alone feel too flat in featured lists",
+          "need a lightweight image-reveal hover without JS",
+          "want a thumbnail hover pattern that still works in Tailwind markup"
+        ],
+        "usageExample": "<a class=\"thumb-reveal-link relative text-xl font-semibold text-slate-950\" href=\"#\"><span>Research notes</span><img class=\"thumb-reveal-media\" src=\"/image.jpg\" alt=\"\" /></a>",
+        "defaultValues": {
+          "--thumb-reveal-scale": "0.88",
+          "--thumb-reveal-rotate": "-5deg",
+          "--thumb-reveal-shift-x": "14px",
+          "--thumb-reveal-shift-y": "-10px",
+          "--thumb-reveal-duration": "0.36s"
+        }
+      },
+      "css": ".thumb-reveal-link {\n  --thumb-reveal-scale: 0.88;\n  --thumb-reveal-rotate: -5deg;\n  --thumb-reveal-shift-x: 14px;\n  --thumb-reveal-shift-y: -10px;\n  --thumb-reveal-duration: 0.36s;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  text-decoration: none;\n}\n\n.thumb-reveal-media {\n  position: absolute;\n  left: calc(100% + 1rem);\n  top: 50%;\n  width: min(10rem, 36vw);\n  aspect-ratio: 1;\n  object-fit: cover;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in oklab, white 18%, transparent);\n  box-shadow: 0 24px 48px oklch(0.18 0.03 260 / 0.2);\n  opacity: 0;\n  pointer-events: none;\n  transform: translate3d(\n      calc(var(--thumb-reveal-shift-x) * -1),\n      calc(-50% - var(--thumb-reveal-shift-y)),\n      0\n    )\n    scale(var(--thumb-reveal-scale)) rotate(var(--thumb-reveal-rotate));\n  transition:\n    transform var(--thumb-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),\n    opacity var(--thumb-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1);\n  z-index: 10;\n}\n\n.thumb-reveal-link:hover .thumb-reveal-media,\n.thumb-reveal-link:focus-visible .thumb-reveal-media {\n  opacity: 1;\n  transform: translate3d(var(--thumb-reveal-shift-x), -50%, 0) scale(1) rotate(0deg);\n}\n\n@media (max-width: 767px) {\n  .thumb-reveal-media {\n    left: auto;\n    right: 0;\n    top: calc(100% + 0.75rem);\n    width: min(12rem, 64vw);\n    transform: translate3d(0, calc(var(--thumb-reveal-shift-y) * -1), 0)\n      scale(var(--thumb-reveal-scale)) rotate(var(--thumb-reveal-rotate));\n  }\n\n  .thumb-reveal-link:hover .thumb-reveal-media,\n  .thumb-reveal-link:focus-visible .thumb-reveal-media {\n    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb-reveal-media {\n    transition: none;\n  }\n}\n"
+    },
+    {
+      "id": "interactions/thumb-stack-link",
+      "title": "Thumb Stack Link",
+      "description": "Link hover that reveals a small stack of thumbnails, useful for menus, portfolios, and featured editorial lists.",
+      "category": "interactions",
+      "tags": [
+        "link",
+        "hover",
+        "thumbnails",
+        "stack",
+        "menu"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 71,
+        "bytes": 2259,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--thumb-stack-shift",
+          "--thumb-stack-duration"
+        ],
+        "classes": [
+          ".thumb-stack-link",
+          ".thumb-stack-media"
+        ],
+        "useCases": [
+          "Tailwind menus with richer hover states",
+          "portfolio category links or featured lists",
+          "editorial navigation that needs more visual presence than plain text"
+        ],
+        "solves": [
+          "single thumbnail reveal can feel too flat for premium menus",
+          "need a stacked media hover without JavaScript",
+          "want a more visual menu effect that still pastes cleanly into Tailwind layouts"
+        ],
+        "usageExample": "<a class=\"thumb-stack-link relative text-xl font-semibold text-slate-950\" href=\"#\"><span>Cases</span><img class=\"thumb-stack-media\" src=\"/a.jpg\" alt=\"\" /><img class=\"thumb-stack-media\" src=\"/b.jpg\" alt=\"\" /></a>",
+        "defaultValues": {
+          "--thumb-stack-shift": "14px",
+          "--thumb-stack-duration": "0.38s"
+        }
+      },
+      "css": ".thumb-stack-link {\n  --thumb-stack-shift: 14px;\n  --thumb-stack-duration: 0.38s;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.thumb-stack-link .thumb-stack-media {\n  position: absolute;\n  left: calc(100% + 1rem);\n  top: 50%;\n  width: min(8.5rem, 30vw);\n  aspect-ratio: 1;\n  object-fit: cover;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in oklab, white 18%, transparent);\n  box-shadow: 0 24px 48px oklch(0.18 0.03 260 / 0.18);\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    transform var(--thumb-stack-duration) cubic-bezier(0.16, 1, 0.3, 1),\n    opacity var(--thumb-stack-duration) cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.thumb-stack-link .thumb-stack-media:nth-of-type(1) {\n  transform: translate3d(calc(var(--thumb-stack-shift) * -1), calc(-50% - 12px), 0) rotate(-7deg)\n    scale(0.92);\n}\n\n.thumb-stack-link .thumb-stack-media:nth-of-type(2) {\n  transform: translate3d(calc(var(--thumb-stack-shift) * -0.35), calc(-50% + 10px), 0) rotate(5deg)\n    scale(0.96);\n}\n\n.thumb-stack-link:hover .thumb-stack-media:nth-of-type(1),\n.thumb-stack-link:focus-visible .thumb-stack-media:nth-of-type(1) {\n  opacity: 1;\n  transform: translate3d(var(--thumb-stack-shift), calc(-50% - 16px), 0) rotate(-5deg) scale(1);\n}\n\n.thumb-stack-link:hover .thumb-stack-media:nth-of-type(2),\n.thumb-stack-link:focus-visible .thumb-stack-media:nth-of-type(2) {\n  opacity: 1;\n  transform: translate3d(calc(var(--thumb-stack-shift) + 18px), calc(-50% + 14px), 0) rotate(4deg)\n    scale(1);\n}\n\n@media (max-width: 767px) {\n  .thumb-stack-link .thumb-stack-media {\n    left: auto;\n    right: 0;\n    top: calc(100% + 0.75rem);\n    width: min(10rem, 56vw);\n  }\n\n  .thumb-stack-link .thumb-stack-media:nth-of-type(1) {\n    transform: translate3d(0, 0, 0) rotate(-7deg) scale(0.92);\n  }\n\n  .thumb-stack-link .thumb-stack-media:nth-of-type(2) {\n    transform: translate3d(18px, 18px, 0) rotate(5deg) scale(0.96);\n  }\n\n  .thumb-stack-link:hover .thumb-stack-media:nth-of-type(1),\n  .thumb-stack-link:focus-visible .thumb-stack-media:nth-of-type(1) {\n    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);\n  }\n\n  .thumb-stack-link:hover .thumb-stack-media:nth-of-type(2),\n  .thumb-stack-link:focus-visible .thumb-stack-media:nth-of-type(2) {\n    transform: translate3d(20px, 20px, 0) rotate(4deg) scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb-stack-link .thumb-stack-media {\n    transition: none;\n  }\n}\n"
+    },
     {
       "id": "interactions/tilt",
       "title": "Tilt",
@@ -2441,8 +3051,8 @@
       "variants": [],
       "updatedAt": "2026-03-21",
       "meta": {
-        "lines": 31,
-        "bytes": 1098,
+        "lines": 42,
+        "bytes": 1554,
         "tailwind": "4.x",
         "browser": "baseline-2024",
         "accessibility": {
@@ -2471,7 +3081,7 @@
           "need premium lighting without canvas or JS libraries",
           "want cursor-driven highlights on cards"
         ],
-        "usageExample": "<article class=\"spotlight-card rounded-3xl p-8\" onmousemove=\"const r=this.getBoundingClientRect();this.style.setProperty(`--spotlight-x`,`${event.clientX-r.left}px`);this.style.setProperty(`--spotlight-y`,`${event.clientY-r.top}px`)\"></article>",
+        "usageExample": "<article class=\"spotlight-card rounded-3xl p-8\" onmousemove=\"const r=this.getBoundingClientRect();this.style.setProperty(`--spotlight-x`,`${event.clientX-r.left}px`);this.style.setProperty(`--spotlight-y`,`${event.clientY-r.top}px`)\" onmouseleave=\"this.style.setProperty(`--spotlight-x`,`50%`);this.style.setProperty(`--spotlight-y`,`50%`)\"></article>",
         "defaultValues": {
           "--spotlight-x": "50%",
           "--spotlight-y": "50%",
@@ -2481,7 +3091,113 @@
           "--spotlight-border": "rgb(255 255 255 / 0.12"
         }
       },
-      "css": ".spotlight-card {\n  position: relative;\n  overflow: hidden;\n  isolation: isolate;\n  background:\n    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02)),\n    var(--spotlight-surface, oklch(24% 0.02 255));\n  border: 1px solid var(--spotlight-border, rgb(255 255 255 / 0.12));\n}\n\n.spotlight-card::before {\n  content: \"\";\n  position: absolute;\n  inset: -30%;\n  background:\n    radial-gradient(\n      circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),\n      var(--spotlight-color, rgb(125 211 252 / 0.42)),\n      transparent 24%\n    ),\n    radial-gradient(\n      circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),\n      rgb(255 255 255 / 0.26),\n      transparent 12%\n    );\n  opacity: 0;\n  transition: opacity var(--spotlight-duration, 220ms ease);\n  pointer-events: none;\n}\n\n.spotlight-card::after {\n  content: \"\";\n  position: absolute;\n  inset: 1px;\n  border-radius: inherit;\n  border: 1px solid rgb(255 255 255 / 0.14);\n  mask: linear-gradient(180deg, black, transparent 40%);\n  pointer-events: none;\n}\n\n.spotlight-card:hover::before,\n.spotlight-card:focus-visible::before {\n  opacity: 1;\n}\n"
+      "css": ".spotlight-card {\n  position: relative;\n  overflow: hidden;\n  isolation: isolate;\n  background:\n    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02)),\n    var(--spotlight-surface, oklch(24% 0.02 255));\n  border: 1px solid var(--spotlight-border, rgb(255 255 255 / 0.12));\n  box-shadow:\n    inset 0 1px 0 rgb(255 255 255 / 0.08),\n    0 22px 50px rgb(0 0 0 / 0.28);\n  transition:\n    border-color 220ms ease,\n    background-color 220ms ease,\n    box-shadow 220ms ease;\n}\n\n.spotlight-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background:\n    radial-gradient(\n      18rem circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),\n      var(--spotlight-color, rgb(125 211 252 / 0.42)),\n      transparent 38%\n    ),\n    radial-gradient(\n      7rem circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),\n      rgb(255 255 255 / 0.24),\n      transparent 18%\n    ),\n    radial-gradient(circle at top, rgb(255 255 255 / 0.1), transparent 42%);\n  opacity: 0;\n  mix-blend-mode: screen;\n  transition: opacity var(--spotlight-duration, 220ms ease);\n  pointer-events: none;\n}\n\n.spotlight-card::after {\n  content: \"\";\n  position: absolute;\n  inset: 1px;\n  border-radius: inherit;\n  border: 1px solid rgb(255 255 255 / 0.14);\n  mask: linear-gradient(180deg, black, transparent 40%);\n  pointer-events: none;\n}\n\n.spotlight-card:hover,\n.spotlight-card:focus-visible {\n  border-color: rgb(255 255 255 / 0.18);\n  box-shadow:\n    inset 0 1px 0 rgb(255 255 255 / 0.12),\n    0 28px 65px rgb(0 0 0 / 0.35);\n}\n\n.spotlight-card:hover::before,\n.spotlight-card:focus-visible::before {\n  opacity: 1;\n}\n"
+    },
+    {
+      "id": "masks/box-unreveal",
+      "title": "Box Unreveal",
+      "description": "Full overlay panel that slides away on hover, revealing the base card beneath it.",
+      "category": "masks",
+      "tags": [
+        "mask",
+        "reveal",
+        "overlay",
+        "panel",
+        "card"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 24,
+        "bytes": 611,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--box-unreveal-duration",
+          "--box-unreveal-bg"
+        ],
+        "classes": [
+          ".box-unreveal"
+        ],
+        "useCases": [
+          "promo cards and CTAs with a stronger first-state cover",
+          "category tiles where hover reveals more neutral content beneath",
+          "Tailwind surfaces that need a clean unreveal motion"
+        ],
+        "solves": [
+          "ordinary overlays fade in but do not create a real before-and-after state",
+          "need a directional panel reveal without complex markup",
+          "want a boxy reveal inspired by menu unreveal motion but practical for cards"
+        ],
+        "usageExample": "<article class=\"box-unreveal relative rounded-[1.25rem] border border-white/10 bg-slate-950/80 p-6 text-white\">...</article>",
+        "defaultValues": {
+          "--box-unreveal-duration": "0.42s",
+          "--box-unreveal-bg": "linear-gradient(\n    135deg,\n    oklch(0.74 0.18 280 / 0.9),\n    oklch(0.66 0.18 220 / 0.9)\n  )"
+        }
+      },
+      "css": ".box-unreveal {\n  --box-unreveal-duration: 0.42s;\n  --box-unreveal-bg: linear-gradient(\n    135deg,\n    oklch(0.74 0.18 280 / 0.9),\n    oklch(0.66 0.18 220 / 0.9)\n  );\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n}\n\n.box-unreveal::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--box-unreveal-bg);\n  transform: scaleX(1);\n  transform-origin: right;\n  transition: transform var(--box-unreveal-duration) cubic-bezier(0.16, 1, 0.3, 1);\n  z-index: -1;\n}\n\n.box-unreveal:hover::before,\n.box-unreveal:focus-visible::before {\n  transform: scaleX(0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .box-unreveal::before {\n    transition: none;\n  }\n}\n"
+    },
+    {
+      "id": "masks/clip-slice-reveal",
+      "title": "Clip Slice Reveal",
+      "description": "Hover reveal that opens a clipped overlay across a card, useful for promo surfaces, category cards, and highlighted links.",
+      "category": "masks",
+      "tags": [
+        "mask",
+        "clip-path",
+        "reveal",
+        "card",
+        "promo"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 27,
+        "bytes": 786,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--clip-slice-from",
+          "--clip-slice-to",
+          "--clip-slice-duration"
+        ],
+        "classes": [
+          ".clip-slice-reveal"
+        ],
+        "useCases": [
+          "Tailwind promo cards with a stronger hover reveal",
+          "category surfaces that need more motion than a simple background shift",
+          "callout boxes or featured links with directional energy"
+        ],
+        "solves": [
+          "flat hover overlays lack shape and direction",
+          "diagonal and radial reveals are too specific for everyday cards",
+          "want a clip-path based reveal that stays easy to paste into Tailwind markup"
+        ],
+        "usageExample": "<article class=\"clip-slice-reveal relative rounded-[1.25rem] border border-white/10 bg-slate-950/80 p-6 text-white\">...</article>",
+        "defaultValues": {
+          "--clip-slice-from": "inset(0 100% 0 0 round 1.25rem)",
+          "--clip-slice-to": "inset(0 0 0 0 round 1.25rem)",
+          "--clip-slice-duration": "0.42s"
+        }
+      },
+      "css": ".clip-slice-reveal {\n  --clip-slice-from: inset(0 100% 0 0 round 1.25rem);\n  --clip-slice-to: inset(0 0 0 0 round 1.25rem);\n  --clip-slice-duration: 0.42s;\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n}\n\n.clip-slice-reveal::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(140deg, oklch(0.74 0.16 280 / 0.92), oklch(0.66 0.18 220 / 0.9)),\n    linear-gradient(180deg, rgb(255 255 255 / 0.18), transparent 42%);\n  clip-path: var(--clip-slice-from);\n  transition: clip-path var(--clip-slice-duration) cubic-bezier(0.16, 1, 0.3, 1);\n  z-index: -1;\n}\n\n.clip-slice-reveal:hover::before,\n.clip-slice-reveal:focus-visible::before {\n  clip-path: var(--clip-slice-to);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .clip-slice-reveal::before {\n    transition: none;\n  }\n}\n"
     },
     {
       "id": "masks/diagonal-reveal",
@@ -2952,6 +3668,62 @@
       },
       "css": ".scroll-unmask {\n  animation: scroll-unmask-reveal linear both;\n  animation-timeline: view();\n  animation-range: entry 0% cover 40%;\n}\n\n.scroll-unmask-left {\n  animation: scroll-unmask-left-reveal linear both;\n  animation-timeline: view();\n  animation-range: entry 0% cover 40%;\n}\n\n@keyframes scroll-unmask-reveal {\n  from {\n    clip-path: inset(0 0 100% 0);\n    opacity: 0.3;\n  }\n  to {\n    clip-path: inset(0);\n    opacity: 1;\n  }\n}\n\n@keyframes scroll-unmask-left-reveal {\n  from {\n    clip-path: inset(0 100% 0 0);\n    opacity: 0.3;\n  }\n  to {\n    clip-path: inset(0);\n    opacity: 1;\n  }\n}\n\n@supports not (animation-timeline: view()) {\n  .scroll-unmask,\n  .scroll-unmask-left {\n    clip-path: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .scroll-unmask,\n  .scroll-unmask-left {\n    animation: none;\n    clip-path: none;\n  }\n}\n"
     },
+    {
+      "id": "scroll/sequential-steps",
+      "title": "Sequential Steps",
+      "description": "Steps enter one after another with a configurable pause once the group becomes visible. Useful for horizontal process rows where regular viewport triggers fire all items at once.",
+      "category": "scroll",
+      "tags": [
+        "scroll",
+        "steps",
+        "sequence",
+        "onboarding",
+        "process",
+        "timeline"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-21",
+      "meta": {
+        "lines": 36,
+        "bytes": 1145,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--step-delay",
+          "--step-duration",
+          "--step-offset"
+        ],
+        "classes": [
+          ".sequential-steps",
+          ".sequential-step"
+        ],
+        "useCases": [
+          "onboarding or process rows with horizontal steps",
+          "timeline sections that should play once in sequence",
+          "how it works layouts with staged reveal timing"
+        ],
+        "solves": [
+          "all step items trigger at the same time in one viewport band",
+          "need configurable pause between cards or milestones",
+          "want a once-only sequence without per-item observers"
+        ],
+        "usageExample": "<div class=\"sequential-steps is-visible\"><article class=\"sequential-step\">Step</article><article class=\"sequential-step\">Step</article></div>",
+        "defaultValues": {
+          "--step-delay": "600ms",
+          "--step-duration": "0.5s",
+          "--step-offset": "18px"
+        }
+      },
+      "css": ".sequential-steps {\n  --step-delay: 600ms;\n  --step-duration: 0.5s;\n  --step-offset: 18px;\n}\n\n.sequential-step {\n  opacity: 0;\n  transform: translateY(var(--step-offset)) scale(0.98);\n}\n\n.sequential-steps.is-visible .sequential-step {\n  animation: sequential-step-in var(--step-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;\n}\n\n.sequential-steps.is-visible .sequential-step:nth-child(2) {\n  animation-delay: var(--step-delay);\n}\n.sequential-steps.is-visible .sequential-step:nth-child(3) {\n  animation-delay: calc(var(--step-delay) * 2);\n}\n.sequential-steps.is-visible .sequential-step:nth-child(4) {\n  animation-delay: calc(var(--step-delay) * 3);\n}\n.sequential-steps.is-visible .sequential-step:nth-child(5) {\n  animation-delay: calc(var(--step-delay) * 4);\n}\n.sequential-steps.is-visible .sequential-step:nth-child(6) {\n  animation-delay: calc(var(--step-delay) * 5);\n}\n\n@keyframes sequential-step-in {\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sequential-step,\n  .sequential-steps.is-visible .sequential-step {\n    opacity: 1;\n    transform: none;\n    animation: none;\n  }\n}\n"
+    },
     {
       "id": "scroll/snap-sections",
       "title": "Snap Sections",
@@ -3162,6 +3934,58 @@
       },
       "css": ".holographic-foil {\n  position: relative;\n  overflow: hidden;\n  isolation: isolate;\n  background:\n    linear-gradient(135deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02)),\n    var(--foil-base, oklch(18% 0.01 265));\n  border: 1px solid var(--foil-border, rgb(255 255 255 / 0.14));\n}\n\n.holographic-foil::before,\n.holographic-foil::after {\n  content: \"\";\n  position: absolute;\n  inset: -40%;\n  pointer-events: none;\n}\n\n.holographic-foil::before {\n  background: conic-gradient(\n    from 180deg at 50% 50%,\n    rgb(34 211 238 / 0.42),\n    rgb(192 132 252 / 0.42),\n    rgb(244 114 182 / 0.35),\n    rgb(34 211 238 / 0.42)\n  );\n  mix-blend-mode: screen;\n  filter: blur(24px) saturate(1.25);\n  animation: foil-shift var(--foil-speed, 10s) linear infinite;\n}\n\n.holographic-foil::after {\n  background: linear-gradient(120deg, transparent 20%, rgb(255 255 255 / 0.4) 48%, transparent 75%);\n  transform: translateX(-35%) rotate(12deg);\n  opacity: 0.55;\n}\n\n@keyframes foil-shift {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .holographic-foil::before {\n    animation: none;\n  }\n}\n"
     },
+    {
+      "id": "surfaces/rim-highlight-panel",
+      "title": "Rim Highlight Panel",
+      "description": "Card or panel surface with a subtle perimeter highlight and low ambient glow, suited for premium settings panels and featured surfaces.",
+      "category": "surfaces",
+      "tags": [
+        "surface",
+        "panel",
+        "border",
+        "glow",
+        "premium"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 37,
+        "bytes": 1161,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": false,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--rim-highlight-color",
+          "--rim-highlight-shadow"
+        ],
+        "classes": [
+          ".rim-highlight-panel"
+        ],
+        "useCases": [
+          "premium Tailwind cards and settings panels",
+          "feature callouts with a more elevated material edge",
+          "dashboard or marketing panels that need a refined perimeter"
+        ],
+        "solves": [
+          "flat cards need more material definition",
+          "simple borders look too generic on premium surfaces",
+          "want a subtle highlight edge without a heavy neon treatment"
+        ],
+        "usageExample": "<article class=\"rim-highlight-panel relative rounded-[1.5rem] bg-slate-950/80 p-6 text-white\">...</article>",
+        "defaultValues": {
+          "--rim-highlight-color": "oklch(0.78 0.12 230 / 0.22)",
+          "--rim-highlight-shadow": "0 24px 48px oklch(0.18 0.03 260 / 0.18)"
+        }
+      },
+      "css": ".rim-highlight-panel {\n  --rim-highlight-color: oklch(0.78 0.12 230 / 0.22);\n  --rim-highlight-shadow: 0 24px 48px oklch(0.18 0.03 260 / 0.18);\n  position: relative;\n  isolation: isolate;\n}\n\n.rim-highlight-panel::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: linear-gradient(\n    145deg,\n    color-mix(in oklab, white 24%, transparent),\n    var(--rim-highlight-color),\n    transparent 62%\n  );\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n  z-index: -1;\n}\n\n.rim-highlight-panel::after {\n  content: \"\";\n  position: absolute;\n  inset: auto 12% -18% 12%;\n  height: 36%;\n  border-radius: 9999px;\n  background: radial-gradient(\n    circle,\n    color-mix(in oklab, var(--rim-highlight-color) 48%, transparent),\n    transparent 70%\n  );\n  filter: blur(28px);\n  opacity: 0.9;\n  pointer-events: none;\n  z-index: -2;\n}\n\n.rim-highlight-panel:hover,\n.rim-highlight-panel:focus-visible {\n  box-shadow: var(--rim-highlight-shadow);\n}\n"
+    },
     {
       "id": "surfaces/soft-emboss",
       "title": "Soft Emboss",
@@ -3216,6 +4040,56 @@
       },
       "css": ".soft-emboss {\n  background: var(--emboss-bg, oklch(95% 0.01 250));\n  box-shadow:\n    var(--emboss-light, -10px -10px 20px rgb(255 255 255 / 0.9)),\n    var(--emboss-dark, 10px 10px 20px rgb(148 163 184 / 0.18)),\n    inset 0 1px 0 rgb(255 255 255 / 0.85);\n}\n\n.soft-emboss[data-pressed=\"true\"] {\n  box-shadow:\n    inset 8px 8px 16px rgb(148 163 184 / 0.18),\n    inset -8px -8px 16px rgb(255 255 255 / 0.9);\n}\n"
     },
+    {
+      "id": "surfaces/top-light-panel",
+      "title": "Top Light Panel",
+      "description": "Surface accent with a soft top-light gradient that makes cards and panels feel more dimensional without a full glow treatment.",
+      "category": "surfaces",
+      "tags": [
+        "surface",
+        "panel",
+        "gradient",
+        "light",
+        "card"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 13,
+        "bytes": 309,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": false,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--top-light-strength"
+        ],
+        "classes": [
+          ".top-light-panel"
+        ],
+        "useCases": [
+          "premium settings or pricing panels",
+          "hero cards and promo surfaces",
+          "dashboard cards that need a quieter surface accent"
+        ],
+        "solves": [
+          "surfaces look too flat with only border and shadow",
+          "full glow or foil effects are too loud",
+          "need a subtle lighting cue that fits Tailwind card stacks"
+        ],
+        "usageExample": "<article class=\"top-light-panel relative rounded-3xl border border-white/10 bg-slate-950/80 p-6 text-white\">...</article>",
+        "defaultValues": {
+          "--top-light-strength": "oklch(0.98 0.01 250 / 0.1)"
+        }
+      },
+      "css": ".top-light-panel {\n  --top-light-strength: oklch(0.98 0.01 250 / 0.1);\n  position: relative;\n  isolation: isolate;\n}\n\n.top-light-panel::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(180deg, var(--top-light-strength), transparent 28%);\n  pointer-events: none;\n  z-index: -1;\n}\n"
+    },
     {
       "id": "text/balance",
       "title": "Text Balance",
@@ -3367,6 +4241,60 @@
       },
       "css": ".text-gradient {\n  --text-gradient-from: oklch(0.7 0.25 280);\n  --text-gradient-to: oklch(0.65 0.2 330);\n  --text-gradient-angle: 135deg;\n  background: linear-gradient(\n    var(--text-gradient-angle),\n    var(--text-gradient-from),\n    var(--text-gradient-to)\n  );\n  background-clip: text;\n  -webkit-background-clip: text;\n  color: transparent;\n}\n"
     },
+    {
+      "id": "text/link-swap",
+      "title": "Link Swap",
+      "description": "Typographic link hover that swaps the visible label with a second colored layer using pseudo-elements and data-hover.",
+      "category": "text",
+      "tags": [
+        "text",
+        "link",
+        "hover",
+        "nav",
+        "typography"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 45,
+        "bytes": 1027,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--link-swap-from",
+          "--link-swap-to",
+          "--link-swap-duration"
+        ],
+        "classes": [
+          ".link-swap"
+        ],
+        "useCases": [
+          "Tailwind nav links with more refined hover motion",
+          "editorial link lists and inline text actions",
+          "category or menu labels that need motion without underline tricks"
+        ],
+        "solves": [
+          "basic color-change hovers feel too plain",
+          "border-draw is too structural for text-first navigation",
+          "need a pseudo-element based link effect that stays lightweight"
+        ],
+        "usageExample": "<a class=\"link-swap text-lg font-semibold\" data-hover=\"Patterns\" href=\"#\">Patterns</a>",
+        "defaultValues": {
+          "--link-swap-from": "currentColor",
+          "--link-swap-to": "oklch(0.72 0.18 265)",
+          "--link-swap-duration": "0.32s"
+        }
+      },
+      "css": ".link-swap {\n  --link-swap-from: currentColor;\n  --link-swap-to: oklch(0.72 0.18 265);\n  --link-swap-duration: 0.32s;\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  overflow: hidden;\n  color: var(--link-swap-from);\n  text-decoration: none;\n  vertical-align: top;\n}\n\n.link-swap::before,\n.link-swap::after {\n  content: attr(data-hover);\n  grid-area: 1 / 1;\n  transition:\n    transform var(--link-swap-duration) cubic-bezier(0.16, 1, 0.3, 1),\n    opacity var(--link-swap-duration) cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.link-swap::before {\n  color: var(--link-swap-from);\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.link-swap::after {\n  color: var(--link-swap-to);\n  transform: translateY(115%);\n  opacity: 0;\n}\n\n.link-swap:hover::before,\n.link-swap:focus-visible::before {\n  transform: translateY(-115%);\n  opacity: 0;\n}\n\n.link-swap:hover::after,\n.link-swap:focus-visible::after {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .link-swap::before,\n  .link-swap::after {\n    transition: none;\n  }\n}\n"
+    },
     {
       "id": "text/text-stroke-reveal",
       "title": "Text Stroke Reveal",
@@ -3524,6 +4452,60 @@
         }
       },
       "css": ".animate-typewriter {\n  --typewriter-duration: 1.2s;\n  --typewriter-delay: 0s;\n  clip-path: inset(0 100% 0 0);\n  animation: typewriter-reveal var(--typewriter-duration) var(--typewriter-delay)\n    cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n}\n\n@keyframes typewriter-reveal {\n  to {\n    clip-path: inset(0 0 0 0);\n  }\n}\n\n@supports not (clip-path: inset(0)) {\n  .animate-typewriter {\n    animation: none;\n    clip-path: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animate-typewriter {\n    animation: none;\n    clip-path: none;\n  }\n}\n"
+    },
+    {
+      "id": "text/underline-swipe",
+      "title": "Underline Swipe",
+      "description": "Inline link effect where the underline draws in with a directional swipe, suited for navs, article links, and text actions.",
+      "category": "text",
+      "tags": [
+        "text",
+        "link",
+        "underline",
+        "hover",
+        "nav"
+      ],
+      "responsive": false,
+      "darkMode": false,
+      "dependencies": [],
+      "variants": [],
+      "updatedAt": "2026-03-22",
+      "meta": {
+        "lines": 28,
+        "bytes": 623,
+        "tailwind": "4.x",
+        "browser": "baseline-2024",
+        "accessibility": {
+          "prefersReducedMotion": true,
+          "prefersColorScheme": false,
+          "supportsCheck": false
+        },
+        "customProperties": [
+          "--underline-swipe-color",
+          "--underline-swipe-thickness",
+          "--underline-swipe-duration"
+        ],
+        "classes": [
+          ".underline-swipe"
+        ],
+        "useCases": [
+          "Tailwind nav links that need a cleaner underline treatment",
+          "article links or section actions inside editorial layouts",
+          "secondary CTAs where border-draw would feel too heavy"
+        ],
+        "solves": [
+          "color-only hover is too weak for important text links",
+          "border-draw is too structural for inline navigation",
+          "need a small text-first effect that pastes into Tailwind markup easily"
+        ],
+        "usageExample": "<a class=\"underline-swipe text-lg font-semibold text-slate-900\" href=\"#\">Read the article</a>",
+        "defaultValues": {
+          "--underline-swipe-color": "currentColor",
+          "--underline-swipe-thickness": "2px",
+          "--underline-swipe-duration": "0.32s"
+        }
+      },
+      "css": ".underline-swipe {\n  --underline-swipe-color: currentColor;\n  --underline-swipe-thickness: 2px;\n  --underline-swipe-duration: 0.32s;\n  position: relative;\n  display: inline-block;\n  text-decoration: none;\n}\n\n.underline-swipe::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: -0.12em;\n  width: 100%;\n  height: var(--underline-swipe-thickness);\n  background: var(--underline-swipe-color);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform var(--underline-swipe-duration) cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.underline-swipe:hover::after,\n.underline-swipe:focus-visible::after {\n  transform: scaleX(1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .underline-swipe::after {\n    transition: none;\n  }\n}\n"
     }
   ],
   "patterns": [
@@ -8485,6 +9467,207 @@
       "css": null,
       "js": null
     },
+    {
+      "id": "blog/carousel",
+      "title": "Blog Scroll Carousel",
+      "summary": "Horizontal scroll-snap blog rail for featured articles with square thumbnails and compact metadata.",
+      "family": "blog",
+      "kind": "section",
+      "tier": "enhanced",
+      "extends": "blog/base",
+      "tags": [
+        "blog",
+        "carousel",
+        "scroll-snap",
+        "featured",
+        "rail"
+      ],
+      "search": {
+        "intent": [
+          "featured article carousel without JavaScript",
+          "horizontally scrolling blog cards"
+        ],
+        "keywords": [
+          "blog",
+          "carousel",
+          "scroll-snap",
+          "featured",
+          "rail",
+          "horizontal",
+          "articles"
+        ],
+        "useCases": [
+          "featured articles rail",
+          "newest posts strip",
+          "homepage highlight",
+          "category teaser"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "xl",
+        "shadow": "none",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": false,
+        "interactive": true,
+        "dependencies": [],
+        "animationPreset": "none"
+      },
+      "slots": [
+        {
+          "name": "heading",
+          "required": false,
+          "description": "Optional heading and intro."
+        },
+        {
+          "name": "posts",
+          "required": true,
+          "description": "Featured cards rendered in a horizontal scroll-snap row."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./carousel.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": [
+          "Native CSS scroll snap keeps this fast and low-complexity.",
+          "Best for 5-10 highlighted stories, not full archives."
+        ]
+      },
+      "ai": {
+        "prompts": [
+          "Create a horizontal featured article rail with CSS scroll snap.",
+          "Build a no-JS blog carousel for highlighted posts."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-21"
+      },
+      "html": "<section class=\"ws-blog bg-[var(--ws-blog-bg)] py-20\">\n  <div class=\"mx-auto max-w-7xl px-6\">\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\">\n      <div class=\"max-w-2xl\">\n        <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]\">Featured Rail</p>\n        <h2 class=\"mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl\">Highlighted reads</h2>\n        <p class=\"mt-3 text-base text-[var(--ws-blog-text-soft)]\">A horizontal rail for curated stories, powered by native CSS scroll snap.</p>\n      </div>\n      <div class=\"text-sm text-[var(--ws-blog-text-muted)]\">Swipe or trackpad-scroll</div>\n    </div>\n\n    <div class=\"-mx-6 mt-10 overflow-x-auto px-6 pb-2 [scrollbar-width:none] [-ms-overflow-style:none]\">\n      <div class=\"flex gap-5 snap-x snap-mandatory [&::-webkit-scrollbar]:hidden\">\n        <article class=\"group w-[min(320px,82vw)] flex-none snap-start\">\n          <a href=\"#\" class=\"block\">\n            <div class=\"aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]\">\n              <div class=\"h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100 transition duration-300 group-hover:scale-105\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Registry</span>\n              <h3 class=\"mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Wie eine Registry fuer Menschen und Agents gleichermassen lesbar wird</h3>\n              <div class=\"mt-2 text-sm text-[var(--ws-blog-text-muted)]\">21. Maerz 2026 · 9 Min</div>\n            </div>\n          </a>\n        </article>\n\n        <article class=\"group w-[min(320px,82vw)] flex-none snap-start\">\n          <a href=\"#\" class=\"block\">\n            <div class=\"aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]\">\n              <div class=\"h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Effects</span>\n              <h3 class=\"mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Scroll-, Hover- und Lighting-Demos richtig visualisieren</h3>\n              <div class=\"mt-2 text-sm text-[var(--ws-blog-text-muted)]\">18. Maerz 2026 · 6 Min</div>\n            </div>\n          </a>\n        </article>\n\n        <article class=\"group w-[min(320px,82vw)] flex-none snap-start\">\n          <a href=\"#\" class=\"block\">\n            <div class=\"aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]\">\n              <div class=\"h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Content</span>\n              <h3 class=\"mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Startseiten so schreiben, dass die Anwendung sofort verstanden wird</h3>\n              <div class=\"mt-2 text-sm text-[var(--ws-blog-text-muted)]\">13. Maerz 2026 · 7 Min</div>\n            </div>\n          </a>\n        </article>\n\n        <article class=\"group w-[min(320px,82vw)] flex-none snap-start\">\n          <a href=\"#\" class=\"block\">\n            <div class=\"aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]\">\n              <div class=\"h-full w-full bg-gradient-to-br from-sky-100 to-cyan-100 transition duration-300 group-hover:scale-105\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Workflow</span>\n              <h3 class=\"mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Wie man aus einem TODO echte Registry-Inhalte macht</h3>\n              <div class=\"mt-2 text-sm text-[var(--ws-blog-text-muted)]\">9. Maerz 2026 · 5 Min</div>\n            </div>\n          </a>\n        </article>\n      </div>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
+    {
+      "id": "blog/compact-list",
+      "title": "Blog Compact List",
+      "summary": "Dense blog list with small square thumbnails, strong title focus, and lightweight metadata for scanning many posts quickly.",
+      "family": "blog",
+      "kind": "section",
+      "tier": "enhanced",
+      "extends": "blog/base",
+      "tags": [
+        "blog",
+        "compact",
+        "list",
+        "thumbnails",
+        "editorial",
+        "feed"
+      ],
+      "search": {
+        "intent": [
+          "compact blog listing for many articles",
+          "dense article feed with thumbnails"
+        ],
+        "keywords": [
+          "blog",
+          "compact",
+          "list",
+          "feed",
+          "thumbnails",
+          "articles",
+          "editorial"
+        ],
+        "useCases": [
+          "large content archive",
+          "editorial feed",
+          "knowledge base",
+          "company insights"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "lg",
+        "shadow": "none",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": false,
+        "interactive": false,
+        "dependencies": [],
+        "animationPreset": "none"
+      },
+      "slots": [
+        {
+          "name": "heading",
+          "required": false,
+          "description": "List heading and optional intro copy."
+        },
+        {
+          "name": "posts",
+          "required": true,
+          "description": "Dense list of posts with thumbnail, title, subtitle, and meta row."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./compact-list.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": [
+          "Works especially well for long German titles because text gets most of the horizontal space.",
+          "Keep thumbnails small and lazy-loaded for large archives."
+        ]
+      },
+      "ai": {
+        "prompts": [
+          "Create a dense blog listing for hundreds of articles.",
+          "Build a compact editorial feed with square thumbnails."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-21"
+      },
+      "html": "<section class=\"ws-blog bg-[var(--ws-blog-bg)] py-20\">\n  <div class=\"mx-auto max-w-5xl px-6\">\n    <div class=\"max-w-2xl\">\n      <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]\">Insights Feed</p>\n      <h2 class=\"mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl\">Recent articles and deep dives</h2>\n      <p class=\"mt-3 text-base text-[var(--ws-blog-text-soft)]\">A compact listing built for fast scanning across a large editorial archive.</p>\n    </div>\n\n    <div class=\"mt-10 divide-y divide-[var(--ws-blog-border)] border-y border-[var(--ws-blog-border)]\">\n      <article class=\"group py-5\">\n        <a href=\"#\" class=\"flex gap-4\">\n          <div class=\"h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100\"></div>\n          </div>\n          <div class=\"min-w-0 flex-1\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Patterns</span>\n            <h3 class=\"mt-1 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Wie man eine skalierbare Pattern-Registry fuer Marketing, Produkt und Docs gleichzeitig baut</h3>\n            <p class=\"mt-1 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]\">Von Namensgebung bis Registry-Struktur: welche Entscheidungen sich bei vielen Komponenten wirklich auszahlen.</p>\n            <div class=\"mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--ws-blog-text-muted)]\">\n              <span>21. Maerz 2026</span>\n              <span>8 Min</span>\n              <span>Registry</span>\n            </div>\n          </div>\n        </a>\n      </article>\n\n      <article class=\"group py-5\">\n        <a href=\"#\" class=\"flex gap-4\">\n          <div class=\"h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100\"></div>\n          </div>\n          <div class=\"min-w-0 flex-1\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">CSS Effects</span>\n            <h3 class=\"mt-1 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Scroll-getriebene Animationen ohne JavaScript sauber fuer Produktseiten einsetzen</h3>\n            <p class=\"mt-1 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]\">Welche Scroll-Mechaniken sich fuer Storytelling lohnen und wo sie schnell zu laut oder ornamental werden.</p>\n            <div class=\"mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--ws-blog-text-muted)]\">\n              <span>18. Maerz 2026</span>\n              <span>6 Min</span>\n              <span>Scroll</span>\n            </div>\n          </div>\n        </a>\n      </article>\n\n      <article class=\"group py-5\">\n        <a href=\"#\" class=\"flex gap-4\">\n          <div class=\"h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-amber-100 to-orange-100\"></div>\n          </div>\n          <div class=\"min-w-0 flex-1\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Workflow</span>\n            <h3 class=\"mt-1 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Agentische Workflows fuer Landingpages: Was man wirklich standardisieren sollte</h3>\n            <p class=\"mt-1 line-clamp-2 text-sm text-[var(--ws-blog-text-soft)]\">Snippets, Patterns und Templates greifen nur dann sauber ineinander, wenn die Registry semantisch gepflegt ist.</p>\n            <div class=\"mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--ws-blog-text-muted)]\">\n              <span>14. Maerz 2026</span>\n              <span>7 Min</span>\n              <span>AI</span>\n            </div>\n          </div>\n        </a>\n      </article>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
     {
       "id": "blog/featured",
       "title": "Blog Featured",
@@ -8590,39 +9773,39 @@
       "js": null
     },
     {
-      "id": "blog/minimal",
-      "title": "Blog Minimal",
-      "summary": "Clean text-only blog listing with date, category, title, and excerpt in a single-column list.",
+      "id": "blog/magazine-grid",
+      "title": "Blog Magazine Grid",
+      "summary": "Asymmetric magazine-style blog grid with one large lead story and a supporting grid of smaller article cards.",
       "family": "blog",
       "kind": "section",
       "tier": "enhanced",
       "extends": "blog/base",
       "tags": [
         "blog",
-        "minimal",
-        "list",
-        "text-only",
-        "editorial"
+        "magazine",
+        "editorial",
+        "asymmetric-grid",
+        "featured"
       ],
       "search": {
         "intent": [
-          "minimal blog post list",
-          "text-only article listing"
+          "magazine style blog layout",
+          "asymmetric article grid with hero story"
         ],
         "keywords": [
           "blog",
-          "minimal",
-          "list",
-          "simple",
-          "text",
-          "articles",
-          "editorial"
+          "magazine",
+          "grid",
+          "editorial",
+          "hero",
+          "featured",
+          "articles"
         ],
         "useCases": [
-          "engineering blog",
-          "personal site",
-          "changelog",
-          "company updates"
+          "editorial landing page",
+          "featured content hub",
+          "category overview",
+          "homepage"
         ]
       },
       "frameworks": {
@@ -8632,7 +9815,7 @@
       },
       "tokens": {
         "color": "neutral",
-        "radius": "none",
+        "radius": "2xl",
         "shadow": "none",
         "spacing": "section-default",
         "typography": "marketing-default"
@@ -8649,17 +9832,22 @@
         {
           "name": "heading",
           "required": false,
-          "description": "Blog title and description."
+          "description": "Editorial heading block."
+        },
+        {
+          "name": "featured",
+          "required": true,
+          "description": "Large lead article."
         },
         {
           "name": "posts",
           "required": true,
-          "description": "List of posts with date, category, title, excerpt."
+          "description": "Smaller supporting stories arranged around the lead story."
         }
       ],
       "props": [],
       "files": {
-        "html": "./minimal.html",
+        "html": "./magazine-grid.html",
         "css": null,
         "js": null
       },
@@ -8667,60 +9855,261 @@
         "copyPasteReady": true,
         "ssrSafe": true,
         "tailwindOnly": true,
-        "notes": []
+        "notes": [
+          "Best used for a curated top area, not a full archive of hundreds of posts.",
+          "Keep only a handful of cards in this layout to preserve hierarchy."
+        ]
       },
       "ai": {
         "prompts": [
-          "Add a minimal text-only blog listing.",
-          "Create a clean single-column article list."
+          "Create a magazine-style blog section with one lead story and smaller supporting cards.",
+          "Build an asymmetric editorial grid for featured articles."
         ],
-        "compositionRole": "supporting"
+        "compositionRole": "entry"
       },
       "governance": {
         "status": "published",
         "quality": "stable",
         "owner": "design-system",
-        "updatedAt": "2026-03-10"
+        "updatedAt": "2026-03-21"
       },
-      "html": "<section class=\"ws-blog bg-[var(--ws-blog-bg)] py-20\">\n  <div class=\"mx-auto max-w-3xl px-6\">\n    <div class=\"mb-12\">\n      <h2 class=\"text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl\">Blog</h2>\n      <p class=\"mt-2 text-lg text-[var(--ws-blog-text-soft)]\">Thoughts on design systems, CSS, and modern web development.</p>\n    </div>\n\n    <div class=\"divide-y divide-[var(--ws-blog-border)] border-y border-[var(--ws-blog-border)]\">\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-03-08\">Mar 8, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">Patterns</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">The complete guide to building a pattern registry</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">From CSS snippets to full page sections — how we built a searchable, AI-native component library.</p>\n        </a>\n      </article>\n\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-02-28\">Feb 28, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">CSS</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Scroll-driven animations without JavaScript</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">Modern CSS scroll timelines replace Intersection Observer for reveal, parallax, and progress bar effects.</p>\n        </a>\n      </article>\n\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-02-20\">Feb 20, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">Workflow</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Using the CLI to scaffold landing pages</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">Combine the Webspire CLI with AI agents to compose full landing pages from registry patterns.</p>\n        </a>\n      </article>\n\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-02-14\">Feb 14, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">Deep dive</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Glass effects with OKLCH and fallbacks</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">A complete guide to building accessible glassmorphism with modern color spaces and progressive enhancement.</p>\n        </a>\n      </article>\n\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-02-06\">Feb 6, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">Architecture</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Why we chose Astro v6 for a pattern registry</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">Static-first, content-collections, and zero client JS — how Astro's architecture perfectly fits a documentation site.</p>\n        </a>\n      </article>\n    </div>\n  </div>\n</section>\n",
+      "html": "<section class=\"ws-blog bg-[var(--ws-blog-bg)] py-20\">\n  <div class=\"mx-auto max-w-7xl px-6\">\n    <div class=\"max-w-2xl\">\n      <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]\">Featured Stories</p>\n      <h2 class=\"mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl\">Editorial picks this month</h2>\n      <p class=\"mt-3 text-base text-[var(--ws-blog-text-soft)]\">A magazine-style top area with one lead story and a tighter supporting grid.</p>\n    </div>\n\n    <div class=\"mt-12 grid grid-cols-1 gap-6 md:grid-cols-3\">\n      <article class=\"group md:col-span-2 md:row-span-2\">\n        <a href=\"#\" class=\"block h-full rounded-[1.75rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4 md:p-5\">\n          <div class=\"aspect-square overflow-hidden rounded-[1.4rem]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-indigo-100 via-purple-100 to-fuchsia-100 transition duration-300 group-hover:scale-105\"></div>\n          </div>\n          <div class=\"mt-5\">\n            <span class=\"inline-flex rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-indigo-700\">Lead Story</span>\n            <h3 class=\"mt-3 text-2xl font-semibold leading-tight text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)] sm:text-3xl\">Wie moderne Registry-Systeme Design, Entwicklung und agentische Workflows auf dieselbe Inhaltsbasis stellen</h3>\n            <p class=\"mt-3 max-w-2xl text-sm leading-7 text-[var(--ws-blog-text-soft)]\">Eine praxisnahe Einordnung, warum Snippets, Patterns und Templates nur dann wirklich skalieren, wenn ihre Inhalte und Vorschauen dieselbe Sprache sprechen.</p>\n            <div class=\"mt-5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--ws-blog-text-muted)]\">\n              <span>21. Maerz 2026</span>\n              <span>10 Min</span>\n              <span>Registry Strategy</span>\n            </div>\n          </div>\n        </a>\n      </article>\n\n      <article class=\"group\">\n        <a href=\"#\" class=\"block rounded-[1.5rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4\">\n          <div class=\"aspect-square overflow-hidden rounded-[1.15rem]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105\"></div>\n          </div>\n          <div class=\"mt-4\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">CSS</span>\n            <h3 class=\"mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Scroll-Timelines als Layout-Werkzeug</h3>\n          </div>\n        </a>\n      </article>\n\n      <article class=\"group\">\n        <a href=\"#\" class=\"block rounded-[1.5rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4\">\n          <div class=\"aspect-square overflow-hidden rounded-[1.15rem]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105\"></div>\n          </div>\n          <div class=\"mt-4\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Workflow</span>\n            <h3 class=\"mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Was gute Demo-Inhalte leisten muessen</h3>\n          </div>\n        </a>\n      </article>\n\n      <article class=\"group\">\n        <a href=\"#\" class=\"block rounded-[1.5rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4\">\n          <div class=\"aspect-square overflow-hidden rounded-[1.15rem]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-sky-100 to-cyan-100 transition duration-300 group-hover:scale-105\"></div>\n          </div>\n          <div class=\"mt-4\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Design</span>\n            <h3 class=\"mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Materialsysteme fuer Premium-Surfaces</h3>\n          </div>\n        </a>\n      </article>\n\n      <article class=\"group\">\n        <a href=\"#\" class=\"block rounded-[1.5rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4\">\n          <div class=\"aspect-square overflow-hidden rounded-[1.15rem]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-rose-100 to-pink-100 transition duration-300 group-hover:scale-105\"></div>\n          </div>\n          <div class=\"mt-4\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Content</span>\n            <h3 class=\"mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Warum Startseiten semantisch klar sein muessen</h3>\n          </div>\n        </a>\n      </article>\n    </div>\n  </div>\n</section>\n",
       "css": null,
       "js": null
     },
     {
-      "id": "blog/sidebar",
-      "title": "Blog Sidebar",
-      "summary": "Two-column blog layout with article list on the left and sidebar with categories and recent posts on the right.",
+      "id": "blog/media-list",
+      "title": "Blog Media List",
+      "summary": "Text-dominant blog list with the content on the left and a compact square image on the right, inspired by editorial feeds like Medium.",
       "family": "blog",
       "kind": "section",
       "tier": "enhanced",
       "extends": "blog/base",
       "tags": [
         "blog",
-        "sidebar",
-        "two-column",
-        "categories",
-        "recent-posts"
+        "editorial",
+        "media",
+        "list",
+        "text-first",
+        "feed"
       ],
       "search": {
         "intent": [
-          "blog layout with sidebar",
-          "two-column blog page"
+          "medium style blog listing",
+          "text first article feed with image on the right"
         ],
         "keywords": [
           "blog",
-          "sidebar",
-          "two-column",
-          "categories",
-          "recent",
-          "posts",
-          "articles",
-          "layout"
+          "medium",
+          "editorial",
+          "list",
+          "image-right",
+          "text-first",
+          "articles"
         ],
         "useCases": [
-          "content blog",
-          "news site",
-          "knowledge base",
-          "company blog"
+          "editorial blog",
+          "content marketing",
+          "company insights",
+          "thought leadership"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "xl",
+        "shadow": "none",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": false,
+        "interactive": false,
+        "dependencies": [],
+        "animationPreset": "none"
+      },
+      "slots": [
+        {
+          "name": "heading",
+          "required": false,
+          "description": "Optional heading block for the list."
+        },
+        {
+          "name": "posts",
+          "required": true,
+          "description": "Editorial rows with dominant text and compact images."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./media-list.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": [
+          "Good replacement for wide horizontal cards when titles are long.",
+          "Keep images secondary so the text remains the entry point."
+        ]
+      },
+      "ai": {
+        "prompts": [
+          "Create a Medium-style blog feed with text on the left and image on the right.",
+          "Build a text-first article list for long headlines."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-21"
+      },
+      "html": "<section class=\"ws-blog bg-[var(--ws-blog-bg)] py-20\">\n  <div class=\"mx-auto max-w-5xl px-6\">\n    <div class=\"max-w-2xl\">\n      <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]\">Editorial Feed</p>\n      <h2 class=\"mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl\">Thoughtful writing, text first</h2>\n      <p class=\"mt-3 text-base text-[var(--ws-blog-text-soft)]\">A text-dominant listing where the image acts as an anchor, not as the main story.</p>\n    </div>\n\n    <div class=\"mt-12 space-y-8\">\n      <article class=\"group border-b border-[var(--ws-blog-border)] pb-8\">\n        <a href=\"#\" class=\"flex flex-col-reverse gap-4 md:flex-row md:items-start md:gap-8\">\n          <div class=\"min-w-0 flex-1\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Design Systems</span>\n            <h3 class=\"mt-2 text-2xl font-semibold leading-tight text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Wie man aus fragmentierten UI-Bausteinen eine konsistente Registry fuer Teams und Agents baut</h3>\n            <p class=\"mt-3 line-clamp-2 text-base text-[var(--ws-blog-text-soft)]\">Ein pragmischer Blick auf Benennung, Inhaltsqualitaet, Vorschau-Logik und die Frage, wann ein Snippet zu einem Pattern werden sollte.</p>\n            <div class=\"mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--ws-blog-text-muted)]\">\n              <span>21. Maerz 2026</span>\n              <span>9 Min Lesezeit</span>\n              <span>Registry</span>\n            </div>\n          </div>\n          <div class=\"w-full shrink-0 md:w-32 lg:w-40\">\n            <div class=\"aspect-square overflow-hidden rounded-2xl bg-[var(--ws-blog-card-bg)]\">\n              <div class=\"h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100 transition duration-300 group-hover:scale-105\"></div>\n            </div>\n          </div>\n        </a>\n      </article>\n\n      <article class=\"group border-b border-[var(--ws-blog-border)] pb-8\">\n        <a href=\"#\" class=\"flex flex-col-reverse gap-4 md:flex-row md:items-start md:gap-8\">\n          <div class=\"min-w-0 flex-1\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">CSS Effects</span>\n            <h3 class=\"mt-2 text-2xl font-semibold leading-tight text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Warum gute Effekt-Demos die Mechanik zeigen muessen und nicht nur visuell beeindrucken sollen</h3>\n            <p class=\"mt-3 line-clamp-2 text-base text-[var(--ws-blog-text-soft)]\">Parallax, reveal, hover und glow wirken erst dann hochwertig, wenn der Einsatzzweck in der Vorschau unmittelbar lesbar wird.</p>\n            <div class=\"mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--ws-blog-text-muted)]\">\n              <span>17. Maerz 2026</span>\n              <span>6 Min Lesezeit</span>\n              <span>Preview Design</span>\n            </div>\n          </div>\n          <div class=\"w-full shrink-0 md:w-32 lg:w-40\">\n            <div class=\"aspect-square overflow-hidden rounded-2xl bg-[var(--ws-blog-card-bg)]\">\n              <div class=\"h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105\"></div>\n            </div>\n          </div>\n        </a>\n      </article>\n\n      <article class=\"group\">\n        <a href=\"#\" class=\"flex flex-col-reverse gap-4 md:flex-row md:items-start md:gap-8\">\n          <div class=\"min-w-0 flex-1\">\n            <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Workflow</span>\n            <h3 class=\"mt-2 text-2xl font-semibold leading-tight text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Welche Inhalte auf Startseiten gehoeren, wenn eine Registry nicht wie eine generische Tailwind-Sammlung wirken soll</h3>\n            <p class=\"mt-3 line-clamp-2 text-base text-[var(--ws-blog-text-soft)]\">Messaging, Kategorielogik und Featured-Content muessen dieselbe semantische Schicht abbilden wie die eigentliche Anwendung.</p>\n            <div class=\"mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--ws-blog-text-muted)]\">\n              <span>12. Maerz 2026</span>\n              <span>7 Min Lesezeit</span>\n              <span>Content Strategy</span>\n            </div>\n          </div>\n          <div class=\"w-full shrink-0 md:w-32 lg:w-40\">\n            <div class=\"aspect-square overflow-hidden rounded-2xl bg-[var(--ws-blog-card-bg)]\">\n              <div class=\"h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105\"></div>\n            </div>\n          </div>\n        </a>\n      </article>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
+    {
+      "id": "blog/minimal",
+      "title": "Blog Minimal",
+      "summary": "Clean text-only blog listing with date, category, title, and excerpt in a single-column list.",
+      "family": "blog",
+      "kind": "section",
+      "tier": "enhanced",
+      "extends": "blog/base",
+      "tags": [
+        "blog",
+        "minimal",
+        "list",
+        "text-only",
+        "editorial"
+      ],
+      "search": {
+        "intent": [
+          "minimal blog post list",
+          "text-only article listing"
+        ],
+        "keywords": [
+          "blog",
+          "minimal",
+          "list",
+          "simple",
+          "text",
+          "articles",
+          "editorial"
+        ],
+        "useCases": [
+          "engineering blog",
+          "personal site",
+          "changelog",
+          "company updates"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "none",
+        "shadow": "none",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": false,
+        "interactive": false,
+        "dependencies": [],
+        "animationPreset": "none"
+      },
+      "slots": [
+        {
+          "name": "heading",
+          "required": false,
+          "description": "Blog title and description."
+        },
+        {
+          "name": "posts",
+          "required": true,
+          "description": "List of posts with date, category, title, excerpt."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./minimal.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": []
+      },
+      "ai": {
+        "prompts": [
+          "Add a minimal text-only blog listing.",
+          "Create a clean single-column article list."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-10"
+      },
+      "html": "<section class=\"ws-blog bg-[var(--ws-blog-bg)] py-20\">\n  <div class=\"mx-auto max-w-3xl px-6\">\n    <div class=\"mb-12\">\n      <h2 class=\"text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl\">Blog</h2>\n      <p class=\"mt-2 text-lg text-[var(--ws-blog-text-soft)]\">Thoughts on design systems, CSS, and modern web development.</p>\n    </div>\n\n    <div class=\"divide-y divide-[var(--ws-blog-border)] border-y border-[var(--ws-blog-border)]\">\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-03-08\">Mar 8, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">Patterns</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">The complete guide to building a pattern registry</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">From CSS snippets to full page sections — how we built a searchable, AI-native component library.</p>\n        </a>\n      </article>\n\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-02-28\">Feb 28, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">CSS</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Scroll-driven animations without JavaScript</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">Modern CSS scroll timelines replace Intersection Observer for reveal, parallax, and progress bar effects.</p>\n        </a>\n      </article>\n\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-02-20\">Feb 20, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">Workflow</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Using the CLI to scaffold landing pages</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">Combine the Webspire CLI with AI agents to compose full landing pages from registry patterns.</p>\n        </a>\n      </article>\n\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-02-14\">Feb 14, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">Deep dive</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Glass effects with OKLCH and fallbacks</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">A complete guide to building accessible glassmorphism with modern color spaces and progressive enhancement.</p>\n        </a>\n      </article>\n\n      <article class=\"group py-6\">\n        <a href=\"#\" class=\"block\">\n          <div class=\"flex items-center gap-3 text-sm text-[var(--ws-blog-text-muted)]\">\n            <time datetime=\"2026-02-06\">Feb 6, 2026</time>\n            <span aria-hidden=\"true\">&middot;</span>\n            <span class=\"text-[var(--ws-blog-accent)]\">Architecture</span>\n          </div>\n          <h3 class=\"mt-2 text-lg font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]\">Why we chose Astro v6 for a pattern registry</h3>\n          <p class=\"mt-1 text-sm text-[var(--ws-blog-text-soft)]\">Static-first, content-collections, and zero client JS — how Astro's architecture perfectly fits a documentation site.</p>\n        </a>\n      </article>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
+    {
+      "id": "blog/sidebar",
+      "title": "Blog Sidebar",
+      "summary": "Two-column blog layout with article list on the left and sidebar with categories and recent posts on the right.",
+      "family": "blog",
+      "kind": "section",
+      "tier": "enhanced",
+      "extends": "blog/base",
+      "tags": [
+        "blog",
+        "sidebar",
+        "two-column",
+        "categories",
+        "recent-posts"
+      ],
+      "search": {
+        "intent": [
+          "blog layout with sidebar",
+          "two-column blog page"
+        ],
+        "keywords": [
+          "blog",
+          "sidebar",
+          "two-column",
+          "categories",
+          "recent",
+          "posts",
+          "articles",
+          "layout"
+        ],
+        "useCases": [
+          "content blog",
+          "news site",
+          "knowledge base",
+          "company blog"
         ]
       },
       "frameworks": {
@@ -8786,6 +10175,106 @@
       "css": null,
       "js": null
     },
+    {
+      "id": "blog/timeline",
+      "title": "Blog Timeline",
+      "summary": "Chronological blog archive laid out as a vertical timeline with alternating article cards and month markers.",
+      "family": "blog",
+      "kind": "section",
+      "tier": "enhanced",
+      "extends": "blog/base",
+      "tags": [
+        "blog",
+        "timeline",
+        "archive",
+        "chronology",
+        "editorial"
+      ],
+      "search": {
+        "intent": [
+          "blog archive timeline",
+          "chronological article layout with timeline"
+        ],
+        "keywords": [
+          "blog",
+          "timeline",
+          "archive",
+          "chronology",
+          "editorial",
+          "articles",
+          "history"
+        ],
+        "useCases": [
+          "archive page",
+          "company history",
+          "editorial timeline",
+          "release chronology"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "xl",
+        "shadow": "none",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": false,
+        "interactive": false,
+        "dependencies": [],
+        "animationPreset": "none"
+      },
+      "slots": [
+        {
+          "name": "heading",
+          "required": false,
+          "description": "Archive heading and intro copy."
+        },
+        {
+          "name": "entries",
+          "required": true,
+          "description": "Timeline entries with month markers, post cards, and chronological metadata."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./timeline.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": [
+          "Best for chronological storytelling or archive browsing, not for dense high-volume feeds.",
+          "On mobile, collapse to a single-column left-aligned timeline."
+        ]
+      },
+      "ai": {
+        "prompts": [
+          "Create a chronological blog archive as a vertical timeline.",
+          "Build an editorial timeline with alternating article cards and month markers."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-21"
+      },
+      "html": "<section class=\"ws-blog bg-[var(--ws-blog-bg)] py-20\">\n  <div class=\"mx-auto max-w-6xl px-6\">\n    <div class=\"max-w-2xl\">\n      <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]\">Archive Timeline</p>\n      <h2 class=\"mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl\">Articles along a chronology</h2>\n      <p class=\"mt-3 text-base text-[var(--ws-blog-text-soft)]\">A narrative archive layout for release histories, company stories, retrospectives, or editorial timelines.</p>\n    </div>\n\n    <div class=\"relative mt-14 max-w-5xl md:mx-auto\">\n      <div class=\"absolute bottom-0 left-4 top-0 w-px bg-[var(--ws-blog-border)] md:left-1/2 md:-translate-x-1/2\"></div>\n\n      <div class=\"relative mb-10 pl-12 md:pl-0\">\n        <div class=\"absolute left-4 top-1.5 h-3 w-3 -translate-x-1/2 rounded-full border-4 border-[var(--ws-blog-bg)] bg-[var(--ws-blog-accent)] md:left-1/2\"></div>\n        <div class=\"text-sm font-semibold uppercase tracking-[0.16em] text-[var(--ws-blog-accent)] md:text-center\">Maerz 2026</div>\n      </div>\n\n      <article class=\"relative mb-8 pl-12 md:flex md:justify-end md:pl-0 md:pr-[54%]\">\n        <div class=\"absolute left-4 top-6 h-3 w-3 -translate-x-1/2 rounded-full border-4 border-[var(--ws-blog-bg)] bg-[var(--ws-blog-text)] md:left-1/2\"></div>\n        <a href=\"#\" class=\"group block rounded-[1.4rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4 transition hover:border-[var(--ws-blog-accent)]\">\n          <div class=\"mb-4 aspect-square overflow-hidden rounded-[1rem] bg-[var(--ws-blog-card-bg)]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100 transition duration-300 group-hover:scale-105\"></div>\n          </div>\n          <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Registry</span>\n          <h3 class=\"mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)]\">Wie Registry-Inhalte ueber Snippets, Patterns und Templates hinweg konsistent bleiben</h3>\n          <p class=\"mt-2 text-sm leading-6 text-[var(--ws-blog-text-soft)]\">Eine Einordnung, wie Vorschauen, Metadaten und Inhaltsstruktur zusammenspielen muessen, damit die Anwendung verstanden wird.</p>\n          <div class=\"mt-4 text-xs text-[var(--ws-blog-text-muted)]\">21. Maerz 2026 · 9 Min</div>\n        </a>\n      </article>\n\n      <article class=\"relative mb-8 pl-12 md:flex md:justify-start md:pl-[54%]\">\n        <div class=\"absolute left-4 top-6 h-3 w-3 -translate-x-1/2 rounded-full border-4 border-[var(--ws-blog-bg)] bg-[var(--ws-blog-text)] md:left-1/2\"></div>\n        <a href=\"#\" class=\"group block rounded-[1.4rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4 transition hover:border-[var(--ws-blog-accent)]\">\n          <div class=\"mb-4 aspect-square overflow-hidden rounded-[1rem] bg-[var(--ws-blog-card-bg)]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105\"></div>\n          </div>\n          <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">CSS Effects</span>\n          <h3 class=\"mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)]\">Warum gute Effekt-Demos die Mechanik sichtbar machen muessen</h3>\n          <p class=\"mt-2 text-sm leading-6 text-[var(--ws-blog-text-soft)]\">Von Scroll bis Hover: Demos sollten den Einsatzzweck lesbar machen, nicht nur dekorativ beeindrucken.</p>\n          <div class=\"mt-4 text-xs text-[var(--ws-blog-text-muted)]\">17. Maerz 2026 · 6 Min</div>\n        </a>\n      </article>\n\n      <div class=\"relative mb-10 pl-12 md:pl-0\">\n        <div class=\"absolute left-4 top-1.5 h-3 w-3 -translate-x-1/2 rounded-full border-4 border-[var(--ws-blog-bg)] bg-[var(--ws-blog-accent)] md:left-1/2\"></div>\n        <div class=\"text-sm font-semibold uppercase tracking-[0.16em] text-[var(--ws-blog-accent)] md:text-center\">Februar 2026</div>\n      </div>\n\n      <article class=\"relative mb-8 pl-12 md:flex md:justify-end md:pl-0 md:pr-[54%]\">\n        <div class=\"absolute left-4 top-6 h-3 w-3 -translate-x-1/2 rounded-full border-4 border-[var(--ws-blog-bg)] bg-[var(--ws-blog-text)] md:left-1/2\"></div>\n        <a href=\"#\" class=\"group block rounded-[1.4rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4 transition hover:border-[var(--ws-blog-accent)]\">\n          <div class=\"mb-4 aspect-square overflow-hidden rounded-[1rem] bg-[var(--ws-blog-card-bg)]\">\n            <div class=\"h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105\"></div>\n          </div>\n          <span class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]\">Workflow</span>\n          <h3 class=\"mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)]\">Welche TODOs sich direkt in Registry-Inhalte uebersetzen lassen</h3>\n          <p class=\"mt-2 text-sm leading-6 text-[var(--ws-blog-text-soft)]\">Nicht jede Idee wird ein Pattern. Manche Wuensche muessen erst als Snippet, Preview oder Messaging-Schicht geloest werden.</p>\n          <div class=\"mt-4 text-xs text-[var(--ws-blog-text-muted)]\">28. Februar 2026 · 7 Min</div>\n        </a>\n      </article>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
     {
       "id": "breadcrumb/base",
       "title": "Breadcrumb Base",
@@ -13244,6 +14733,208 @@
       "css": null,
       "js": null
     },
+    {
+      "id": "comparison/cards",
+      "title": "Comparison Cards",
+      "summary": "Two separate comparison cards with unequal visual weight, useful for before-after framing or directional decisions without pricing semantics.",
+      "family": "comparison",
+      "kind": "section",
+      "tier": "enhanced",
+      "extends": "comparison/checklist",
+      "tags": [
+        "comparison",
+        "cards",
+        "side-by-side",
+        "directional",
+        "editorial"
+      ],
+      "search": {
+        "intent": [
+          "comparison as two separate cards",
+          "before after comparison cards"
+        ],
+        "keywords": [
+          "comparison",
+          "cards",
+          "before after",
+          "side by side",
+          "weighted"
+        ],
+        "useCases": [
+          "before and after",
+          "current vs target",
+          "requirements framing",
+          "editorial comparison"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "2xl",
+        "shadow": "lg",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": false,
+        "interactive": false,
+        "dependencies": [],
+        "animationPreset": "none"
+      },
+      "slots": [
+        {
+          "name": "heading",
+          "required": true,
+          "description": "Section heading and setup copy."
+        },
+        {
+          "name": "cards",
+          "required": true,
+          "description": "Two comparison cards with distinct weight and messaging."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./cards.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": [
+          "Uses separate cards instead of one shared shell.",
+          "The emphasized card uses stronger border, shadow and CTA."
+        ]
+      },
+      "ai": {
+        "prompts": [
+          "Create a two card comparison for before vs after.",
+          "Add a weighted side by side comparison without pricing UI."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-21"
+      },
+      "html": "<section class=\"ws-comparison bg-[var(--ws-comparison-bg)] py-20\">\n  <div class=\"mx-auto max-w-5xl px-6\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight text-[var(--ws-comparison-text)] sm:text-4xl\">Current state vs target state</h2>\n      <p class=\"mt-4 text-lg text-[var(--ws-comparison-text-soft)]\">A card-based comparison for directional decisions where one side should feel clearly stronger.</p>\n    </div>\n\n    <div class=\"mt-12 grid gap-6 lg:grid-cols-2\">\n      <article class=\"rounded-3xl border border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)] p-8 shadow-sm\">\n        <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-comparison-text-soft)]\">Current</p>\n        <h3 class=\"mt-3 text-2xl font-semibold text-[var(--ws-comparison-text)]\">Too many parallel priorities</h3>\n        <p class=\"mt-4 text-sm leading-6 text-[var(--ws-comparison-text-soft)]\">Everything competes for attention, which makes the whole proposition feel less decisive.</p>\n        <ul class=\"mt-8 space-y-3 text-sm text-[var(--ws-comparison-text-soft)]\">\n          <li>Mixed messaging across product, design and rollout</li>\n          <li>Harder to explain in a short sales conversation</li>\n          <li>More moving parts before launch even happens</li>\n        </ul>\n      </article>\n\n      <article class=\"rounded-3xl border-2 border-[var(--ws-comparison-highlight)] bg-[var(--ws-comparison-highlight)]/6 p-8 shadow-lg\">\n        <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-comparison-highlight)]\">Target</p>\n        <h3 class=\"mt-3 text-2xl font-semibold text-[var(--ws-comparison-text)]\">One strong path to ship</h3>\n        <p class=\"mt-4 text-sm leading-6 text-[var(--ws-comparison-text-soft)]\">The preferred card gets more weight, so the recommendation is obvious even before reading every bullet.</p>\n        <ul class=\"mt-8 space-y-3 text-sm text-[var(--ws-comparison-text)]\">\n          <li>Clear hierarchy between must-have and optional scope</li>\n          <li>Faster rollout with fewer decision branches</li>\n          <li>Better internal alignment around what success means first</li>\n        </ul>\n        <a href=\"#\" class=\"mt-8 inline-flex rounded-xl bg-[var(--ws-comparison-highlight)] px-5 py-3 text-sm font-semibold text-white transition hover:opacity-90\">Choose this direction</a>\n      </article>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
+    {
+      "id": "comparison/checklist",
+      "title": "Comparison Checklist",
+      "summary": "Two-column comparison with a vertical divider on desktop, stacked sections on mobile, and differently weighted checklists for primary vs secondary options.",
+      "family": "comparison",
+      "kind": "section",
+      "tier": "base",
+      "extends": "comparison/side-by-side",
+      "tags": [
+        "comparison",
+        "checklist",
+        "side-by-side",
+        "before-after",
+        "requirements"
+      ],
+      "search": {
+        "intent": [
+          "side by side checklist comparison",
+          "what we need vs nice to have layout"
+        ],
+        "keywords": [
+          "comparison",
+          "checklist",
+          "two column",
+          "requirements",
+          "before after",
+          "pros cons"
+        ],
+        "useCases": [
+          "what we need vs nice to have",
+          "before vs after",
+          "left right comparison",
+          "weighted options"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "2xl",
+        "shadow": "md",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": false,
+        "interactive": false,
+        "dependencies": [],
+        "animationPreset": "none"
+      },
+      "slots": [
+        {
+          "name": "heading",
+          "required": true,
+          "description": "Intro text for the comparison section."
+        },
+        {
+          "name": "left",
+          "required": true,
+          "description": "Muted checklist column for the lower-priority or current state."
+        },
+        {
+          "name": "right",
+          "required": true,
+          "description": "Emphasized checklist column for the preferred target state."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./checklist.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": [
+          "Uses a border between columns on desktop and a border between stacked blocks on mobile.",
+          "Right column is intentionally more visually weighted."
+        ]
+      },
+      "ai": {
+        "prompts": [
+          "Add a side by side checklist comparison for what we need vs nice to have.",
+          "Create a two column comparison with one muted side and one emphasized side."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-21"
+      },
+      "html": "<section class=\"ws-comparison bg-[var(--ws-comparison-bg)] py-20\">\n  <div class=\"mx-auto max-w-5xl px-6\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <p class=\"text-sm font-semibold uppercase tracking-[0.2em] text-[var(--ws-comparison-highlight)]\">Comparison</p>\n      <h2 class=\"mt-4 text-3xl font-bold tracking-tight text-[var(--ws-comparison-text)] sm:text-4xl\">What we actually need</h2>\n      <p class=\"mt-4 text-lg text-[var(--ws-comparison-text-soft)]\">A simple side-by-side frame for current assumptions versus the stronger target state.</p>\n    </div>\n\n    <div class=\"mt-12 grid overflow-hidden rounded-3xl border border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)] shadow-sm md:grid-cols-2\">\n      <div class=\"p-8 md:border-r md:border-[var(--ws-comparison-border)]\">\n        <div class=\"max-w-md\">\n          <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-comparison-text-soft)]\">Nice to have</p>\n          <h3 class=\"mt-3 text-2xl font-semibold text-[var(--ws-comparison-text)]\">Looks good on paper</h3>\n          <p class=\"mt-3 text-sm leading-6 text-[var(--ws-comparison-text-soft)]\">Useful additions when budget, complexity and rollout speed are secondary concerns.</p>\n        </div>\n        <ul class=\"mt-8 space-y-4\">\n          <li class=\"flex items-start gap-3 text-[var(--ws-comparison-text-soft)]\"><span class=\"mt-0.5 text-base\">+</span><span>Extra polish layers and advanced integrations</span></li>\n          <li class=\"flex items-start gap-3 text-[var(--ws-comparison-text-soft)]\"><span class=\"mt-0.5 text-base\">+</span><span>More flexible content controls for edge cases</span></li>\n          <li class=\"flex items-start gap-3 text-[var(--ws-comparison-text-soft)]\"><span class=\"mt-0.5 text-base\">+</span><span>Optional storytelling sections for later expansion</span></li>\n          <li class=\"flex items-start gap-3 text-[var(--ws-comparison-text-soft)]\"><span class=\"mt-0.5 text-base\">+</span><span>Additional automation once the core workflow is stable</span></li>\n        </ul>\n      </div>\n\n      <div class=\"bg-[var(--ws-comparison-highlight)]/5 p-8\">\n        <div class=\"max-w-md\">\n          <p class=\"text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-comparison-highlight)]\">What we need</p>\n          <h3 class=\"mt-3 text-2xl font-semibold text-[var(--ws-comparison-text)]\">Clear, shippable essentials</h3>\n          <p class=\"mt-3 text-sm leading-6 text-[var(--ws-comparison-text-soft)]\">The preferred side gets stronger contrast and clearer priority because it represents the actual decision path.</p>\n        </div>\n        <ul class=\"mt-8 space-y-4\">\n          <li class=\"flex items-start gap-3 text-[var(--ws-comparison-text)]\"><span class=\"mt-0.5 text-emerald-600\">✓</span><span>Fast to understand in one pass</span></li>\n          <li class=\"flex items-start gap-3 text-[var(--ws-comparison-text)]\"><span class=\"mt-0.5 text-emerald-600\">✓</span><span>Easy to explain to internal and external stakeholders</span></li>\n          <li class=\"flex items-start gap-3 text-[var(--ws-comparison-text)]\"><span class=\"mt-0.5 text-emerald-600\">✓</span><span>Prioritized around rollout speed and clarity</span></li>\n          <li class=\"flex items-start gap-3 text-[var(--ws-comparison-text)]\"><span class=\"mt-0.5 text-emerald-600\">✓</span><span>Leaves room for iteration after launch</span></li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
     {
       "id": "comparison/code",
       "title": "Code Comparison",
@@ -17441,6 +19132,99 @@
       "css": null,
       "js": null
     },
+    {
+      "id": "divider/statement",
+      "title": "Statement Divider",
+      "summary": "Centered statement text between top and bottom borders, designed as a rhetorical transition between larger sections.",
+      "family": "divider",
+      "kind": "component",
+      "tier": "base",
+      "extends": "divider/base",
+      "tags": [
+        "divider",
+        "statement",
+        "transition",
+        "editorial",
+        "quote"
+      ],
+      "search": {
+        "intent": [
+          "section transition statement",
+          "centered divider text between sections"
+        ],
+        "keywords": [
+          "divider",
+          "statement",
+          "rhetorical question",
+          "transition",
+          "editorial",
+          "separator"
+        ],
+        "useCases": [
+          "section transition",
+          "rhetorical question",
+          "chapter break",
+          "summary statement"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "none",
+        "shadow": "none",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": false,
+        "interactive": false,
+        "dependencies": [],
+        "animationPreset": "none"
+      },
+      "slots": [
+        {
+          "name": "statement",
+          "required": true,
+          "description": "Centered line of text, optionally with one emphasized word or phrase."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./statement.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": [
+          "Works best between larger section blocks with enough vertical rhythm."
+        ]
+      },
+      "ai": {
+        "prompts": [
+          "Insert a centered statement divider between sections.",
+          "Add a rhetorical transition with subtle borders above and below."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-21"
+      },
+      "html": "<section class=\"ws-divider py-16\">\n  <div class=\"mx-auto max-w-4xl px-6\">\n    <div class=\"border-y border-[var(--ws-divider-color)] py-10 text-center\">\n      <p class=\"mx-auto max-w-2xl text-2xl font-light tracking-tight text-[var(--ws-divider-text)] sm:text-3xl\">\n        What matters is not more surface area, but a <span class=\"font-semibold text-[var(--ws-divider-accent)]\">clearer signal</span>.\n      </p>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
     {
       "id": "divider/with-icon",
       "title": "Divider with Icon",
@@ -36834,6 +38618,112 @@
       "css": null,
       "js": null
     },
+    {
+      "id": "steps/sequential",
+      "title": "Steps Sequential",
+      "summary": "Horizontal step section with sequential reveal timing and a gradient progress line, built for process or onboarding flows where items should enter one after another.",
+      "family": "steps",
+      "kind": "section",
+      "tier": "enhanced",
+      "extends": "steps/horizontal",
+      "tags": [
+        "steps",
+        "sequential",
+        "process",
+        "onboarding",
+        "progress",
+        "timeline"
+      ],
+      "search": {
+        "intent": [
+          "sequential process steps section",
+          "onboarding steps with progress line"
+        ],
+        "keywords": [
+          "steps",
+          "sequential",
+          "process",
+          "onboarding",
+          "progress",
+          "timeline",
+          "stagger"
+        ],
+        "useCases": [
+          "how it works",
+          "onboarding sequence",
+          "process explainer",
+          "horizontal timeline"
+        ]
+      },
+      "frameworks": {
+        "html": true,
+        "astro": true,
+        "webComponent": false
+      },
+      "tokens": {
+        "color": "neutral",
+        "radius": "2xl",
+        "shadow": "md",
+        "spacing": "section-default",
+        "typography": "marketing-default"
+      },
+      "capabilities": {
+        "responsive": true,
+        "darkMode": true,
+        "animated": true,
+        "interactive": false,
+        "dependencies": [],
+        "animationPreset": "stagger-children"
+      },
+      "slots": [
+        {
+          "name": "heading",
+          "required": true,
+          "description": "Section title and supporting copy."
+        },
+        {
+          "name": "progress",
+          "required": true,
+          "description": "Gradient progress line showing current rollout stage."
+        },
+        {
+          "name": "steps",
+          "required": true,
+          "description": "Sequentially revealed step cards with timing offsets."
+        }
+      ],
+      "props": [],
+      "files": {
+        "html": "./sequential.html",
+        "css": null,
+        "js": null
+      },
+      "install": {
+        "copyPasteReady": true,
+        "ssrSafe": true,
+        "tailwindOnly": true,
+        "notes": [
+          "The demo ships with the section already visible so the sequence plays immediately.",
+          "To trigger on viewport entry, add the visibility class with your own observer when integrating."
+        ]
+      },
+      "ai": {
+        "prompts": [
+          "Add a sequential steps section with a gradient progress line.",
+          "Create a process section where cards reveal one after another."
+        ],
+        "compositionRole": "supporting"
+      },
+      "governance": {
+        "status": "published",
+        "quality": "stable",
+        "owner": "design-system",
+        "updatedAt": "2026-03-21"
+      },
+      "html": "<section class=\"ws-steps bg-[var(--ws-steps-bg)] py-20\">\n  <style>\n    .ws-steps-sequential {\n      --step-delay: 220ms;\n      --step-duration: 0.55s;\n      --step-offset: 18px;\n      --progress-from: oklch(0.68 0.22 28);\n      --progress-via: oklch(0.79 0.2 85);\n      --progress-to: oklch(0.73 0.18 150);\n      --progress-width: 74%;\n    }\n\n    .ws-steps-sequential .ws-step-card {\n      opacity: 0;\n      transform: translateY(var(--step-offset)) scale(0.985);\n    }\n\n    .ws-steps-sequential.is-visible .ws-step-card {\n      animation: ws-step-in var(--step-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;\n    }\n\n    .ws-steps-sequential.is-visible .ws-step-card:nth-child(2) { animation-delay: var(--step-delay); }\n    .ws-steps-sequential.is-visible .ws-step-card:nth-child(3) { animation-delay: calc(var(--step-delay) * 2); }\n    .ws-steps-sequential.is-visible .ws-step-card:nth-child(4) { animation-delay: calc(var(--step-delay) * 3); }\n\n    .ws-steps-sequential .ws-progress-line {\n      position: relative;\n      height: 0.4rem;\n      width: 100%;\n      overflow: hidden;\n      border-radius: 9999px;\n      background: color-mix(in oklch, var(--ws-steps-line) 70%, transparent);\n    }\n\n    .ws-steps-sequential .ws-progress-line::after {\n      content: \"\";\n      position: absolute;\n      inset: 0 auto 0 0;\n      width: var(--progress-width);\n      border-radius: inherit;\n      background: linear-gradient(90deg, var(--progress-from), var(--progress-via), var(--progress-to));\n      box-shadow: 0 0 18px color-mix(in oklch, var(--progress-via) 30%, transparent);\n    }\n\n    @keyframes ws-step-in {\n      to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .ws-steps-sequential .ws-step-card,\n      .ws-steps-sequential.is-visible .ws-step-card {\n        opacity: 1;\n        transform: none;\n        animation: none;\n      }\n    }\n  </style>\n\n  <div class=\"ws-steps-sequential is-visible mx-auto max-w-6xl px-6\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <p class=\"text-sm font-semibold uppercase tracking-[0.2em] text-[var(--ws-steps-accent)]\">Process</p>\n      <h2 class=\"mt-4 text-3xl font-bold tracking-tight text-[var(--ws-steps-text)] sm:text-4xl\">Roll out in clear phases</h2>\n      <p class=\"mt-4 text-lg text-[var(--ws-steps-text-soft)]\">Instead of revealing every card at once, this section guides attention from left to right with fixed pauses.</p>\n    </div>\n\n    <div class=\"mx-auto mt-10 max-w-4xl\">\n      <div class=\"flex items-center justify-between text-[0.72rem] font-semibold uppercase tracking-[0.16em] text-[var(--ws-steps-text-soft)]\">\n        <span>Briefing</span>\n        <span>Launch</span>\n      </div>\n      <div class=\"ws-progress-line mt-3\"></div>\n    </div>\n\n    <div class=\"mt-12 grid gap-5 lg:grid-cols-4\">\n      <article class=\"ws-step-card rounded-2xl border border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] p-6 shadow-sm\">\n        <span class=\"text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-text-soft)]\">01</span>\n        <h3 class=\"mt-4 text-lg font-semibold text-[var(--ws-steps-text)]\">Frame the scope</h3>\n        <p class=\"mt-3 text-sm leading-6 text-[var(--ws-steps-text-soft)]\">Align on the essentials first, so the sequence starts with a clear decision boundary.</p>\n      </article>\n\n      <article class=\"ws-step-card rounded-2xl border border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] p-6 shadow-sm\">\n        <span class=\"text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-text-soft)]\">02</span>\n        <h3 class=\"mt-4 text-lg font-semibold text-[var(--ws-steps-text)]\">Build the flow</h3>\n        <p class=\"mt-3 text-sm leading-6 text-[var(--ws-steps-text-soft)]\">Turn the structure into a usable sequence instead of a flat list of equally loud steps.</p>\n      </article>\n\n      <article class=\"ws-step-card rounded-2xl border border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] p-6 shadow-sm\">\n        <span class=\"text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-text-soft)]\">03</span>\n        <h3 class=\"mt-4 text-lg font-semibold text-[var(--ws-steps-text)]\">Refine the cues</h3>\n        <p class=\"mt-3 text-sm leading-6 text-[var(--ws-steps-text-soft)]\">Use the progress line and the staged reveal to make the reading order feel obvious.</p>\n      </article>\n\n      <article class=\"ws-step-card rounded-2xl border border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] p-6 shadow-sm\">\n        <span class=\"text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-text-soft)]\">04</span>\n        <h3 class=\"mt-4 text-lg font-semibold text-[var(--ws-steps-text)]\">Ship the section</h3>\n        <p class=\"mt-3 text-sm leading-6 text-[var(--ws-steps-text-soft)]\">Keep the interaction small, readable and easy to wire to a single viewport trigger.</p>\n      </article>\n    </div>\n  </div>\n</section>\n",
+      "css": null,
+      "js": null
+    },
     {
       "id": "steps/timeline",
       "title": "Timeline",
@@ -40822,7 +42712,7 @@
         "owner": "design-system",
         "updatedAt": "2026-03-21"
       },
-      "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>The Verge Weekly — Tech, Design &amp; Culture</title>\n  <meta name=\"description\" content=\"Magazine-style blog with featured articles, category navigation, and newsletter signup.\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <style>\n    body { font-family: 'Inter', sans-serif; }\n  </style>\n</head>\n<body class=\"bg-white text-gray-900 antialiased\">\n\n  <!-- Navbar -->\n  <nav class=\"sticky top-0 z-50 bg-white/90 backdrop-blur-lg border-b border-gray-100\" aria-label=\"Main navigation\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16\">\n      <a href=\"#\" class=\"text-xl font-extrabold text-gray-900\">The Verge Weekly</a>\n      <div class=\"hidden md:flex items-center gap-6 text-sm font-medium text-gray-600\">\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Technology</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Design</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Culture</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Startups</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Opinion</a>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <button class=\"p-2 text-gray-400 hover:text-gray-600 rounded-lg\" aria-label=\"Search\">\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path stroke-linecap=\"round\" d=\"M21 21l-4.35-4.35\"/></svg>\n        </button>\n        <a href=\"#\" class=\"hidden sm:block text-sm font-semibold px-4 py-2 rounded-lg bg-gray-900 text-white hover:bg-gray-800\">Subscribe</a>\n      </div>\n    </div>\n  </nav>\n\n  <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10\">\n\n    <!-- Featured Article Hero -->\n    <section class=\"mb-12\">\n      <a href=\"#\" class=\"group block relative rounded-2xl overflow-hidden bg-gray-100 aspect-[2/1] md:aspect-[3/1]\">\n        <div class=\"absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/30 to-transparent\"></div>\n        <img src=\"https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&h=500&fit=crop\" alt=\"Featured article cover\" class=\"w-full h-full object-cover\" />\n        <div class=\"absolute bottom-0 left-0 right-0 p-6 md:p-10\">\n          <span class=\"inline-block px-2.5 py-0.5 text-xs font-semibold bg-indigo-600 text-white rounded-full mb-3\">Technology</span>\n          <h2 class=\"text-2xl md:text-4xl font-bold text-white leading-tight group-hover:underline decoration-2 underline-offset-4\">The Future of Computing: How Quantum Will Change Everything</h2>\n          <p class=\"mt-2 text-sm md:text-base text-gray-300 max-w-2xl\">From drug discovery to cryptography, quantum computing promises to solve problems that classical computers never could. Here's what you need to know.</p>\n          <div class=\"mt-4 flex items-center gap-3 text-sm text-gray-400\">\n            <span>By Sarah Mitchell</span>\n            <span>&middot;</span>\n            <span>March 21, 2026</span>\n            <span>&middot;</span>\n            <span>12 min read</span>\n          </div>\n        </div>\n      </a>\n    </section>\n\n    <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-10\">\n\n      <!-- Article Grid -->\n      <div class=\"lg:col-span-2\">\n        <h3 class=\"text-lg font-bold text-gray-900 mb-6\">Latest Stories</h3>\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n                <img src=\"https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=400&h=300&fit=crop\" alt=\"Article cover\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n              </div>\n              <span class=\"text-xs font-semibold text-indigo-600\">Design</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Why Every Designer Should Learn to Code in 2026</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">The line between design and development continues to blur. Here's why crossing it will make you irreplaceable.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 20 &middot; 6 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n                <img src=\"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=400&h=300&fit=crop\" alt=\"Article cover\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n              </div>\n              <span class=\"text-xs font-semibold text-emerald-600\">Startups</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">The Rise of AI-Native Startups: What VCs Are Betting On</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">Venture capital is pouring billions into AI-first companies. We mapped the biggest bets of Q1 2026.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 19 &middot; 8 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n                <img src=\"https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=400&h=300&fit=crop\" alt=\"Article cover\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n              </div>\n              <span class=\"text-xs font-semibold text-amber-600\">Culture</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Digital Minimalism: Reclaiming Focus in an Age of Distraction</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">A growing movement of professionals are deliberately reducing their digital footprint. Here's what they've learned.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 18 &middot; 5 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n                <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop\" alt=\"Article cover\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n              </div>\n              <span class=\"text-xs font-semibold text-indigo-600\">Technology</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Web Components in 2026: The Standard That Finally Won</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">After years of framework dominance, native Web Components are seeing real adoption. Here's what changed.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 17 &middot; 7 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n                <img src=\"https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400&h=300&fit=crop\" alt=\"Article cover\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n              </div>\n              <span class=\"text-xs font-semibold text-rose-600\">Opinion</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Why Remote Work Isn't Going Away (Despite What CEOs Say)</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">The data is clear: return-to-office mandates are backfiring. Here's the evidence corporate leaders are ignoring.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 16 &middot; 9 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n                <img src=\"https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=400&h=300&fit=crop\" alt=\"Article cover\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n              </div>\n              <span class=\"text-xs font-semibold text-emerald-600\">Startups</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Open Source in the AI Era: New Business Models Emerge</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">The traditional open-core model is evolving. We explore how AI companies are building sustainable businesses around open code.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 15 &middot; 10 min read</p>\n            </a>\n          </article>\n\n        </div>\n      </div>\n\n      <!-- Sidebar -->\n      <aside class=\"space-y-8\">\n        <!-- Categories -->\n        <div class=\"bg-gray-50 rounded-2xl p-6\">\n          <h3 class=\"text-sm font-bold text-gray-900 uppercase tracking-wider mb-4\">Categories</h3>\n          <div class=\"space-y-2\">\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Technology</span><span class=\"text-xs text-gray-400\">42</span>\n            </a>\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Design</span><span class=\"text-xs text-gray-400\">28</span>\n            </a>\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Culture</span><span class=\"text-xs text-gray-400\">19</span>\n            </a>\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Startups</span><span class=\"text-xs text-gray-400\">35</span>\n            </a>\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Opinion</span><span class=\"text-xs text-gray-400\">14</span>\n            </a>\n          </div>\n        </div>\n\n        <!-- Newsletter -->\n        <div class=\"bg-indigo-50 rounded-2xl p-6\">\n          <h3 class=\"text-sm font-bold text-gray-900 uppercase tracking-wider mb-2\">Newsletter</h3>\n          <p class=\"text-sm text-gray-600 mb-4\">Get the best stories delivered to your inbox every week.</p>\n          <form class=\"space-y-3\">\n            <input type=\"email\" placeholder=\"your@email.com\" class=\"w-full px-4 py-2.5 text-sm border border-indigo-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500\" />\n            <button type=\"submit\" class=\"w-full px-4 py-2.5 text-sm font-semibold bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors\">Subscribe</button>\n          </form>\n          <p class=\"mt-3 text-xs text-gray-500\">No spam. Unsubscribe anytime.</p>\n        </div>\n\n        <!-- Trending -->\n        <div>\n          <h3 class=\"text-sm font-bold text-gray-900 uppercase tracking-wider mb-4\">Trending</h3>\n          <div class=\"space-y-4\">\n            <a href=\"#\" class=\"flex items-start gap-3 group\">\n              <span class=\"text-2xl font-bold text-gray-200 group-hover:text-indigo-300 transition-colors\">01</span>\n              <div>\n                <p class=\"text-sm font-medium text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Apple's Vision Pro 2 Changes Everything About Spatial Computing</p>\n                <p class=\"text-xs text-gray-400 mt-1\">Mar 20 &middot; 5 min</p>\n              </div>\n            </a>\n            <a href=\"#\" class=\"flex items-start gap-3 group\">\n              <span class=\"text-2xl font-bold text-gray-200 group-hover:text-indigo-300 transition-colors\">02</span>\n              <div>\n                <p class=\"text-sm font-medium text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">The CSS Revolution: What Tailwind v4 Means for Developers</p>\n                <p class=\"text-xs text-gray-400 mt-1\">Mar 19 &middot; 7 min</p>\n              </div>\n            </a>\n            <a href=\"#\" class=\"flex items-start gap-3 group\">\n              <span class=\"text-2xl font-bold text-gray-200 group-hover:text-indigo-300 transition-colors\">03</span>\n              <div>\n                <p class=\"text-sm font-medium text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">GitHub Copilot Workspace: Coding Without Writing Code</p>\n                <p class=\"text-xs text-gray-400 mt-1\">Mar 18 &middot; 4 min</p>\n              </div>\n            </a>\n          </div>\n        </div>\n      </aside>\n\n    </div>\n  </main>\n\n  <!-- Footer -->\n  <footer class=\"border-t border-gray-200 mt-16\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n      <div class=\"flex flex-col md:flex-row md:items-center md:justify-between gap-6\">\n        <p class=\"text-sm font-bold text-gray-900\">The Verge Weekly</p>\n        <div class=\"flex flex-wrap gap-6 text-sm text-gray-500\">\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">About</a>\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Advertise</a>\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Careers</a>\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Privacy</a>\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">RSS</a>\n        </div>\n      </div>\n      <p class=\"mt-6 text-xs text-gray-400\">&copy; 2026 The Verge Weekly. All rights reserved.</p>\n    </div>\n  </footer>\n\n</body>\n</html>\n"
+      "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>The Verge Weekly — Tech, Design &amp; Culture</title>\n  <meta name=\"description\" content=\"Magazine-style blog with featured articles, category navigation, and newsletter signup.\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <style>\n    body { font-family: 'Inter', sans-serif; }\n  </style>\n</head>\n<body class=\"bg-white text-gray-900 antialiased\">\n\n  <!-- Navbar -->\n  <nav class=\"sticky top-0 z-50 bg-white/90 backdrop-blur-lg border-b border-gray-100\" aria-label=\"Main navigation\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16\">\n      <a href=\"#\" class=\"text-xl font-extrabold text-gray-900\">The Verge Weekly</a>\n      <div class=\"hidden md:flex items-center gap-6 text-sm font-medium text-gray-600\">\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Technology</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Design</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Culture</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Startups</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Opinion</a>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <button class=\"p-2 text-gray-400 hover:text-gray-600 rounded-lg\" aria-label=\"Search\">\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path stroke-linecap=\"round\" d=\"M21 21l-4.35-4.35\"/></svg>\n        </button>\n        <a href=\"#\" class=\"hidden sm:block text-sm font-semibold px-4 py-2 rounded-lg bg-gray-900 text-white hover:bg-gray-800\">Subscribe</a>\n      </div>\n    </div>\n  </nav>\n\n  <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10\">\n\n    <!-- Featured Article Hero -->\n    <section class=\"mb-12\">\n      <a href=\"#\" class=\"group block relative rounded-2xl overflow-hidden bg-gray-100 aspect-[2/1] md:aspect-[3/1]\">\n        <div class=\"absolute inset-0 bg-gradient-to-br from-indigo-600 via-violet-500 to-purple-700\"></div>\n        <div class=\"absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/30 to-transparent\"></div>\n        <div class=\"absolute bottom-0 left-0 right-0 p-6 md:p-10\">\n          <span class=\"inline-block px-2.5 py-0.5 text-xs font-semibold bg-indigo-600 text-white rounded-full mb-3\">Technology</span>\n          <h2 class=\"text-2xl md:text-4xl font-bold text-white leading-tight group-hover:underline decoration-2 underline-offset-4\">The Future of Computing: How Quantum Will Change Everything</h2>\n          <p class=\"mt-2 text-sm md:text-base text-gray-300 max-w-2xl\">From drug discovery to cryptography, quantum computing promises to solve problems that classical computers never could. Here's what you need to know.</p>\n          <div class=\"mt-4 flex items-center gap-3 text-sm text-gray-400\">\n            <span>By Sarah Mitchell</span>\n            <span>&middot;</span>\n            <span>March 21, 2026</span>\n            <span>&middot;</span>\n            <span>12 min read</span>\n          </div>\n        </div>\n      </a>\n    </section>\n\n    <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-10\">\n\n      <!-- Article Grid -->\n      <div class=\"lg:col-span-2\">\n        <h3 class=\"text-lg font-bold text-gray-900 mb-6\">Latest Stories</h3>\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-indigo-400 to-blue-600 flex items-center justify-center\">\n                <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42\" /></svg>\n              </div>\n              <span class=\"text-xs font-semibold text-indigo-600\">Design</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Why Every Designer Should Learn to Code in 2026</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">The line between design and development continues to blur. Here's why crossing it will make you irreplaceable.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 20 &middot; 6 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center\">\n                <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z\" /></svg>\n              </div>\n              <span class=\"text-xs font-semibold text-emerald-600\">Startups</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">The Rise of AI-Native Startups: What VCs Are Betting On</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">Venture capital is pouring billions into AI-first companies. We mapped the biggest bets of Q1 2026.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 19 &middot; 8 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-amber-400 to-orange-600 flex items-center justify-center\">\n                <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25\" /></svg>\n              </div>\n              <span class=\"text-xs font-semibold text-amber-600\">Culture</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Digital Minimalism: Reclaiming Focus in an Age of Distraction</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">A growing movement of professionals are deliberately reducing their digital footprint. Here's what they've learned.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 18 &middot; 5 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-violet-400 to-purple-600 flex items-center justify-center\">\n                <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5\" /></svg>\n              </div>\n              <span class=\"text-xs font-semibold text-indigo-600\">Technology</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Web Components in 2026: The Standard That Finally Won</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">After years of framework dominance, native Web Components are seeing real adoption. Here's what changed.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 17 &middot; 7 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-rose-400 to-red-600 flex items-center justify-center\">\n                <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z\" /></svg>\n              </div>\n              <span class=\"text-xs font-semibold text-rose-600\">Opinion</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Why Remote Work Isn't Going Away (Despite What CEOs Say)</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">The data is clear: return-to-office mandates are backfiring. Here's the evidence corporate leaders are ignoring.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 16 &middot; 9 min read</p>\n            </a>\n          </article>\n\n          <article class=\"group\">\n            <a href=\"#\" class=\"block\">\n              <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center\">\n                <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125\" /></svg>\n              </div>\n              <span class=\"text-xs font-semibold text-emerald-600\">Startups</span>\n              <h4 class=\"mt-1 text-base font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Open Source in the AI Era: New Business Models Emerge</h4>\n              <p class=\"mt-1 text-sm text-gray-500 line-clamp-2\">The traditional open-core model is evolving. We explore how AI companies are building sustainable businesses around open code.</p>\n              <p class=\"mt-2 text-xs text-gray-400\">Mar 15 &middot; 10 min read</p>\n            </a>\n          </article>\n\n        </div>\n      </div>\n\n      <!-- Sidebar -->\n      <aside class=\"space-y-8\">\n        <!-- Categories -->\n        <div class=\"bg-gray-50 rounded-2xl p-6\">\n          <h3 class=\"text-sm font-bold text-gray-900 uppercase tracking-wider mb-4\">Categories</h3>\n          <div class=\"space-y-2\">\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Technology</span><span class=\"text-xs text-gray-400\">42</span>\n            </a>\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Design</span><span class=\"text-xs text-gray-400\">28</span>\n            </a>\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Culture</span><span class=\"text-xs text-gray-400\">19</span>\n            </a>\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Startups</span><span class=\"text-xs text-gray-400\">35</span>\n            </a>\n            <a href=\"#\" class=\"flex items-center justify-between py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors\">\n              <span>Opinion</span><span class=\"text-xs text-gray-400\">14</span>\n            </a>\n          </div>\n        </div>\n\n        <!-- Newsletter -->\n        <div class=\"bg-indigo-50 rounded-2xl p-6\">\n          <h3 class=\"text-sm font-bold text-gray-900 uppercase tracking-wider mb-2\">Newsletter</h3>\n          <p class=\"text-sm text-gray-600 mb-4\">Get the best stories delivered to your inbox every week.</p>\n          <form class=\"space-y-3\">\n            <input type=\"email\" placeholder=\"your@email.com\" class=\"w-full px-4 py-2.5 text-sm border border-indigo-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500\" />\n            <button type=\"submit\" class=\"w-full px-4 py-2.5 text-sm font-semibold bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors\">Subscribe</button>\n          </form>\n          <p class=\"mt-3 text-xs text-gray-500\">No spam. Unsubscribe anytime.</p>\n        </div>\n\n        <!-- Trending -->\n        <div>\n          <h3 class=\"text-sm font-bold text-gray-900 uppercase tracking-wider mb-4\">Trending</h3>\n          <div class=\"space-y-4\">\n            <a href=\"#\" class=\"flex items-start gap-3 group\">\n              <span class=\"text-2xl font-bold text-gray-200 group-hover:text-indigo-300 transition-colors\">01</span>\n              <div>\n                <p class=\"text-sm font-medium text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">Apple's Vision Pro 2 Changes Everything About Spatial Computing</p>\n                <p class=\"text-xs text-gray-400 mt-1\">Mar 20 &middot; 5 min</p>\n              </div>\n            </a>\n            <a href=\"#\" class=\"flex items-start gap-3 group\">\n              <span class=\"text-2xl font-bold text-gray-200 group-hover:text-indigo-300 transition-colors\">02</span>\n              <div>\n                <p class=\"text-sm font-medium text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">The CSS Revolution: What Tailwind v4 Means for Developers</p>\n                <p class=\"text-xs text-gray-400 mt-1\">Mar 19 &middot; 7 min</p>\n              </div>\n            </a>\n            <a href=\"#\" class=\"flex items-start gap-3 group\">\n              <span class=\"text-2xl font-bold text-gray-200 group-hover:text-indigo-300 transition-colors\">03</span>\n              <div>\n                <p class=\"text-sm font-medium text-gray-900 group-hover:text-indigo-600 transition-colors leading-snug\">GitHub Copilot Workspace: Coding Without Writing Code</p>\n                <p class=\"text-xs text-gray-400 mt-1\">Mar 18 &middot; 4 min</p>\n              </div>\n            </a>\n          </div>\n        </div>\n      </aside>\n\n    </div>\n  </main>\n\n  <!-- Footer -->\n  <footer class=\"border-t border-gray-200 mt-16\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n      <div class=\"flex flex-col md:flex-row md:items-center md:justify-between gap-6\">\n        <p class=\"text-sm font-bold text-gray-900\">The Verge Weekly</p>\n        <div class=\"flex flex-wrap gap-6 text-sm text-gray-500\">\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">About</a>\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Advertise</a>\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Careers</a>\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Privacy</a>\n          <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">RSS</a>\n        </div>\n      </div>\n      <p class=\"mt-6 text-xs text-gray-400\">&copy; 2026 The Verge Weekly. All rights reserved.</p>\n    </div>\n  </footer>\n\n</body>\n</html>\n"
     },
     {
       "id": "blog/minimal",
@@ -40929,7 +42819,7 @@
         "owner": "design-system",
         "updatedAt": "2026-03-21"
       },
-      "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>The Architecture of Modern Web Applications — Insight Journal</title>\n  <meta name=\"description\" content=\"A deep dive into the architecture patterns shaping modern web development in 2026.\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <style>\n    body { font-family: 'Inter', sans-serif; }\n    .prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700; color: #111827; }\n    .prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 600; color: #111827; }\n    .prose p { margin-bottom: 1.25rem; line-height: 1.8; color: #4b5563; }\n    .prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; color: #4b5563; }\n    .prose ul li { margin-bottom: 0.5rem; line-height: 1.7; }\n    .prose blockquote { border-left: 3px solid #6366f1; padding-left: 1.25rem; margin: 2rem 0; font-style: italic; color: #6b7280; }\n    .prose code { background: #f3f4f6; padding: 0.15rem 0.4rem; border-radius: 0.25rem; font-size: 0.875rem; color: #1f2937; }\n    .prose pre { background: #1f2937; color: #e5e7eb; padding: 1.25rem; border-radius: 0.75rem; overflow-x: auto; margin: 1.5rem 0; font-size: 0.875rem; line-height: 1.6; }\n    .prose pre code { background: transparent; padding: 0; color: inherit; }\n  </style>\n</head>\n<body class=\"bg-white text-gray-900 antialiased\">\n\n  <!-- Header -->\n  <header class=\"sticky top-0 z-50 bg-white/90 backdrop-blur-lg border-b border-gray-100\">\n    <div class=\"max-w-4xl mx-auto px-4 sm:px-6 flex items-center justify-between h-14\">\n      <a href=\"#\" class=\"text-base font-bold text-gray-900\">Insight Journal</a>\n      <nav class=\"flex items-center gap-6 text-sm font-medium text-gray-500\" aria-label=\"Main navigation\">\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Blog</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">About</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Subscribe</a>\n      </nav>\n    </div>\n  </header>\n\n  <main class=\"max-w-3xl mx-auto px-4 sm:px-6\">\n\n    <!-- Hero Image -->\n    <div class=\"mt-10 rounded-2xl overflow-hidden bg-gray-100 aspect-[2/1]\">\n      <img src=\"https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=900&h=450&fit=crop\" alt=\"Code on a laptop screen\" class=\"w-full h-full object-cover\" />\n    </div>\n\n    <!-- Article Header -->\n    <div class=\"mt-8 mb-10\">\n      <span class=\"inline-block px-2.5 py-0.5 text-xs font-semibold text-indigo-600 bg-indigo-50 rounded-full\">Architecture</span>\n      <h1 class=\"mt-4 text-3xl sm:text-4xl font-extrabold text-gray-900 leading-tight\">The Architecture of Modern Web Applications</h1>\n      <p class=\"mt-4 text-lg text-gray-500\">A deep dive into the patterns, trade-offs, and frameworks shaping how we build for the web in 2026.</p>\n      <div class=\"mt-6 flex items-center gap-4\">\n        <div class=\"w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-sm font-bold text-indigo-700\">DH</div>\n        <div>\n          <p class=\"text-sm font-medium text-gray-900\">Daniel Harper</p>\n          <p class=\"text-xs text-gray-500\">March 21, 2026 &middot; 14 min read</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Article Body -->\n    <article class=\"prose max-w-none\">\n\n      <p>The web platform has evolved dramatically over the past few years. What was once a simple document delivery system has become the foundation for complex, interactive applications that rival native software. But with this power comes architectural complexity.</p>\n\n      <h2>The Shift to Server-First</h2>\n\n      <p>The pendulum has swung. After a decade of client-side rendering dominance, the industry is rediscovering the power of the server. Frameworks like Astro, Next.js, and SvelteKit have made server-side rendering the default, not an afterthought.</p>\n\n      <p>This isn't your grandfather's server rendering, though. Modern SSR is paired with selective hydration, islands architecture, and edge computing to deliver the best of both worlds: fast initial loads and rich interactivity where it matters.</p>\n\n      <blockquote>\n        \"The best architecture is one where you only pay for the interactivity you actually need.\" — Ryan Carniato, SolidJS creator\n      </blockquote>\n\n      <h2>Islands Architecture</h2>\n\n      <p>The islands architecture pattern, popularized by Astro, treats interactive components as isolated \"islands\" in a sea of static HTML. Each island hydrates independently, meaning the majority of your page ships zero JavaScript.</p>\n\n      <ul>\n        <li><strong>Static by default</strong> — HTML is rendered at build time with zero JS overhead</li>\n        <li><strong>Interactive on demand</strong> — Only interactive components ship client-side JavaScript</li>\n        <li><strong>Framework agnostic</strong> — Mix React, Svelte, and Vue on the same page</li>\n        <li><strong>Progressive enhancement</strong> — Pages work before JavaScript loads</li>\n      </ul>\n\n      <h3>A Practical Example</h3>\n\n      <p>Consider a typical marketing page. The hero, features section, and footer are entirely static. Only the pricing calculator and contact form need interactivity. With islands, you ship JavaScript only for those two components.</p>\n\n      <pre><code>&lt;!-- Static Astro page with interactive islands --&gt;\n&lt;Layout&gt;\n  &lt;Hero /&gt;           &lt;!-- Zero JS --&gt;\n  &lt;Features /&gt;       &lt;!-- Zero JS --&gt;\n  &lt;Calculator client:visible /&gt;  &lt;!-- Hydrates when visible --&gt;\n  &lt;ContactForm client:idle /&gt;    &lt;!-- Hydrates when idle --&gt;\n  &lt;Footer /&gt;         &lt;!-- Zero JS --&gt;\n&lt;/Layout&gt;</code></pre>\n\n      <h2>The Edge Changes Everything</h2>\n\n      <p>Edge computing has shifted the conversation from \"where do we render?\" to \"how close can we render?\" With platforms like Cloudflare Workers and Deno Deploy, your server-side code runs in data centers worldwide, often within 50ms of the user.</p>\n\n      <p>This means server-rendered pages can be as fast as statically served files, while remaining fully dynamic. Personalization, A/B testing, and geo-specific content no longer require client-side JavaScript or complex CDN configurations.</p>\n\n      <h2>Choosing the Right Architecture</h2>\n\n      <p>There's no one-size-fits-all answer. The right architecture depends on your use case, team, and performance requirements. But here's a framework for thinking about it:</p>\n\n      <ul>\n        <li><strong>Content sites</strong> (blogs, docs, marketing) — Static generation with islands</li>\n        <li><strong>E-commerce</strong> — Hybrid static + server rendering at the edge</li>\n        <li><strong>Dashboards</strong> — SPA with server-side data fetching</li>\n        <li><strong>Real-time apps</strong> — WebSocket-powered with minimal SSR</li>\n      </ul>\n\n      <p>The key insight is that most applications are a mix of these categories. The best frameworks let you make per-page or per-component decisions about rendering strategy.</p>\n\n    </article>\n\n    <!-- Author Bio -->\n    <div class=\"mt-14 mb-10 p-6 bg-gray-50 rounded-2xl flex flex-col sm:flex-row items-start gap-5\">\n      <div class=\"w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center text-xl font-bold text-indigo-700 shrink-0\">DH</div>\n      <div>\n        <h3 class=\"text-base font-semibold text-gray-900\">Daniel Harper</h3>\n        <p class=\"text-sm text-gray-500 mt-1\">Staff Engineer at Vercel. Building tools for the modern web. Previously at Stripe and Cloudflare. Writing about architecture, performance, and developer experience.</p>\n        <div class=\"mt-3 flex items-center gap-4\">\n          <a href=\"#\" class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">Twitter</a>\n          <a href=\"#\" class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">GitHub</a>\n          <a href=\"#\" class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">Website</a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Posts -->\n    <section class=\"mb-16\">\n      <h3 class=\"text-lg font-bold text-gray-900 mb-6\">Related Articles</h3>\n      <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-6\">\n        <a href=\"#\" class=\"group\">\n          <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n            <img src=\"https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=300&h=225&fit=crop\" alt=\"Related article\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n          </div>\n          <h4 class=\"text-sm font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">Understanding Hydration: A Visual Guide</h4>\n          <p class=\"mt-1 text-xs text-gray-400\">Mar 15 &middot; 8 min</p>\n        </a>\n        <a href=\"#\" class=\"group\">\n          <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n            <img src=\"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=300&h=225&fit=crop\" alt=\"Related article\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n          </div>\n          <h4 class=\"text-sm font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">Edge Computing for Frontend Developers</h4>\n          <p class=\"mt-1 text-xs text-gray-400\">Mar 12 &middot; 6 min</p>\n        </a>\n        <a href=\"#\" class=\"group\">\n          <div class=\"rounded-xl overflow-hidden bg-gray-100 aspect-[4/3] mb-3\">\n            <img src=\"https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=300&h=225&fit=crop\" alt=\"Related article\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\" />\n          </div>\n          <h4 class=\"text-sm font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">Astro vs Next.js: Choosing in 2026</h4>\n          <p class=\"mt-1 text-xs text-gray-400\">Mar 8 &middot; 10 min</p>\n        </a>\n      </div>\n    </section>\n\n  </main>\n\n  <!-- Footer -->\n  <footer class=\"border-t border-gray-100\">\n    <div class=\"max-w-4xl mx-auto px-4 sm:px-6 py-8\">\n      <div class=\"flex items-center justify-between\">\n        <p class=\"text-sm font-bold text-gray-900\">Insight Journal</p>\n        <div class=\"flex items-center gap-4 text-xs text-gray-400\">\n          <a href=\"#\" class=\"hover:text-gray-700 transition-colors\">Twitter</a>\n          <a href=\"#\" class=\"hover:text-gray-700 transition-colors\">RSS</a>\n          <a href=\"#\" class=\"hover:text-gray-700 transition-colors\">Privacy</a>\n        </div>\n      </div>\n      <p class=\"mt-4 text-xs text-gray-400\">&copy; 2026 Insight Journal. All rights reserved.</p>\n    </div>\n  </footer>\n\n</body>\n</html>\n"
+      "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>The Architecture of Modern Web Applications — Insight Journal</title>\n  <meta name=\"description\" content=\"A deep dive into the architecture patterns shaping modern web development in 2026.\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <style>\n    body { font-family: 'Inter', sans-serif; }\n    .prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700; color: #111827; }\n    .prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 600; color: #111827; }\n    .prose p { margin-bottom: 1.25rem; line-height: 1.8; color: #4b5563; }\n    .prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; color: #4b5563; }\n    .prose ul li { margin-bottom: 0.5rem; line-height: 1.7; }\n    .prose blockquote { border-left: 3px solid #6366f1; padding-left: 1.25rem; margin: 2rem 0; font-style: italic; color: #6b7280; }\n    .prose code { background: #f3f4f6; padding: 0.15rem 0.4rem; border-radius: 0.25rem; font-size: 0.875rem; color: #1f2937; }\n    .prose pre { background: #1f2937; color: #e5e7eb; padding: 1.25rem; border-radius: 0.75rem; overflow-x: auto; margin: 1.5rem 0; font-size: 0.875rem; line-height: 1.6; }\n    .prose pre code { background: transparent; padding: 0; color: inherit; }\n  </style>\n</head>\n<body class=\"bg-white text-gray-900 antialiased\">\n\n  <!-- Header -->\n  <header class=\"sticky top-0 z-50 bg-white/90 backdrop-blur-lg border-b border-gray-100\">\n    <div class=\"max-w-4xl mx-auto px-4 sm:px-6 flex items-center justify-between h-14\">\n      <a href=\"#\" class=\"text-base font-bold text-gray-900\">Insight Journal</a>\n      <nav class=\"flex items-center gap-6 text-sm font-medium text-gray-500\" aria-label=\"Main navigation\">\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Blog</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">About</a>\n        <a href=\"#\" class=\"hover:text-gray-900 transition-colors\">Subscribe</a>\n      </nav>\n    </div>\n  </header>\n\n  <main class=\"max-w-3xl mx-auto px-4 sm:px-6\">\n\n    <!-- Hero Image -->\n    <div class=\"mt-10 rounded-2xl overflow-hidden aspect-[2/1] bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center\">\n      <svg class=\"w-16 h-16 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5\" /></svg>\n    </div>\n\n    <!-- Article Header -->\n    <div class=\"mt-8 mb-10\">\n      <span class=\"inline-block px-2.5 py-0.5 text-xs font-semibold text-indigo-600 bg-indigo-50 rounded-full\">Architecture</span>\n      <h1 class=\"mt-4 text-3xl sm:text-4xl font-extrabold text-gray-900 leading-tight\">The Architecture of Modern Web Applications</h1>\n      <p class=\"mt-4 text-lg text-gray-500\">A deep dive into the patterns, trade-offs, and frameworks shaping how we build for the web in 2026.</p>\n      <div class=\"mt-6 flex items-center gap-4\">\n        <div class=\"w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-sm font-bold text-indigo-700\">DH</div>\n        <div>\n          <p class=\"text-sm font-medium text-gray-900\">Daniel Harper</p>\n          <p class=\"text-xs text-gray-500\">March 21, 2026 &middot; 14 min read</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Article Body -->\n    <article class=\"prose max-w-none\">\n\n      <p>The web platform has evolved dramatically over the past few years. What was once a simple document delivery system has become the foundation for complex, interactive applications that rival native software. But with this power comes architectural complexity.</p>\n\n      <h2>The Shift to Server-First</h2>\n\n      <p>The pendulum has swung. After a decade of client-side rendering dominance, the industry is rediscovering the power of the server. Frameworks like Astro, Next.js, and SvelteKit have made server-side rendering the default, not an afterthought.</p>\n\n      <p>This isn't your grandfather's server rendering, though. Modern SSR is paired with selective hydration, islands architecture, and edge computing to deliver the best of both worlds: fast initial loads and rich interactivity where it matters.</p>\n\n      <blockquote>\n        \"The best architecture is one where you only pay for the interactivity you actually need.\" — Ryan Carniato, SolidJS creator\n      </blockquote>\n\n      <h2>Islands Architecture</h2>\n\n      <p>The islands architecture pattern, popularized by Astro, treats interactive components as isolated \"islands\" in a sea of static HTML. Each island hydrates independently, meaning the majority of your page ships zero JavaScript.</p>\n\n      <ul>\n        <li><strong>Static by default</strong> — HTML is rendered at build time with zero JS overhead</li>\n        <li><strong>Interactive on demand</strong> — Only interactive components ship client-side JavaScript</li>\n        <li><strong>Framework agnostic</strong> — Mix React, Svelte, and Vue on the same page</li>\n        <li><strong>Progressive enhancement</strong> — Pages work before JavaScript loads</li>\n      </ul>\n\n      <h3>A Practical Example</h3>\n\n      <p>Consider a typical marketing page. The hero, features section, and footer are entirely static. Only the pricing calculator and contact form need interactivity. With islands, you ship JavaScript only for those two components.</p>\n\n      <pre><code>&lt;!-- Static Astro page with interactive islands --&gt;\n&lt;Layout&gt;\n  &lt;Hero /&gt;           &lt;!-- Zero JS --&gt;\n  &lt;Features /&gt;       &lt;!-- Zero JS --&gt;\n  &lt;Calculator client:visible /&gt;  &lt;!-- Hydrates when visible --&gt;\n  &lt;ContactForm client:idle /&gt;    &lt;!-- Hydrates when idle --&gt;\n  &lt;Footer /&gt;         &lt;!-- Zero JS --&gt;\n&lt;/Layout&gt;</code></pre>\n\n      <h2>The Edge Changes Everything</h2>\n\n      <p>Edge computing has shifted the conversation from \"where do we render?\" to \"how close can we render?\" With platforms like Cloudflare Workers and Deno Deploy, your server-side code runs in data centers worldwide, often within 50ms of the user.</p>\n\n      <p>This means server-rendered pages can be as fast as statically served files, while remaining fully dynamic. Personalization, A/B testing, and geo-specific content no longer require client-side JavaScript or complex CDN configurations.</p>\n\n      <h2>Choosing the Right Architecture</h2>\n\n      <p>There's no one-size-fits-all answer. The right architecture depends on your use case, team, and performance requirements. But here's a framework for thinking about it:</p>\n\n      <ul>\n        <li><strong>Content sites</strong> (blogs, docs, marketing) — Static generation with islands</li>\n        <li><strong>E-commerce</strong> — Hybrid static + server rendering at the edge</li>\n        <li><strong>Dashboards</strong> — SPA with server-side data fetching</li>\n        <li><strong>Real-time apps</strong> — WebSocket-powered with minimal SSR</li>\n      </ul>\n\n      <p>The key insight is that most applications are a mix of these categories. The best frameworks let you make per-page or per-component decisions about rendering strategy.</p>\n\n    </article>\n\n    <!-- Author Bio -->\n    <div class=\"mt-14 mb-10 p-6 bg-gray-50 rounded-2xl flex flex-col sm:flex-row items-start gap-5\">\n      <div class=\"w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center text-xl font-bold text-indigo-700 shrink-0\">DH</div>\n      <div>\n        <h3 class=\"text-base font-semibold text-gray-900\">Daniel Harper</h3>\n        <p class=\"text-sm text-gray-500 mt-1\">Staff Engineer at Vercel. Building tools for the modern web. Previously at Stripe and Cloudflare. Writing about architecture, performance, and developer experience.</p>\n        <div class=\"mt-3 flex items-center gap-4\">\n          <a href=\"#\" class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">Twitter</a>\n          <a href=\"#\" class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">GitHub</a>\n          <a href=\"#\" class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">Website</a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Posts -->\n    <section class=\"mb-16\">\n      <h3 class=\"text-lg font-bold text-gray-900 mb-6\">Related Articles</h3>\n      <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-6\">\n        <a href=\"#\" class=\"group\">\n          <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-indigo-400 to-blue-600 flex items-center justify-center\">\n            <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5\" /></svg>\n          </div>\n          <h4 class=\"text-sm font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">Understanding Hydration: A Visual Guide</h4>\n          <p class=\"mt-1 text-xs text-gray-400\">Mar 15 &middot; 8 min</p>\n        </a>\n        <a href=\"#\" class=\"group\">\n          <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center\">\n            <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z\" /></svg>\n          </div>\n          <h4 class=\"text-sm font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">Edge Computing for Frontend Developers</h4>\n          <p class=\"mt-1 text-xs text-gray-400\">Mar 12 &middot; 6 min</p>\n        </a>\n        <a href=\"#\" class=\"group\">\n          <div class=\"rounded-xl overflow-hidden aspect-[4/3] mb-3 bg-gradient-to-br from-violet-400 to-purple-600 flex items-center justify-center\">\n            <svg class=\"w-10 h-10 text-white/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z\" /></svg>\n          </div>\n          <h4 class=\"text-sm font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">Astro vs Next.js: Choosing in 2026</h4>\n          <p class=\"mt-1 text-xs text-gray-400\">Mar 8 &middot; 10 min</p>\n        </a>\n      </div>\n    </section>\n\n  </main>\n\n  <!-- Footer -->\n  <footer class=\"border-t border-gray-100\">\n    <div class=\"max-w-4xl mx-auto px-4 sm:px-6 py-8\">\n      <div class=\"flex items-center justify-between\">\n        <p class=\"text-sm font-bold text-gray-900\">Insight Journal</p>\n        <div class=\"flex items-center gap-4 text-xs text-gray-400\">\n          <a href=\"#\" class=\"hover:text-gray-700 transition-colors\">Twitter</a>\n          <a href=\"#\" class=\"hover:text-gray-700 transition-colors\">RSS</a>\n          <a href=\"#\" class=\"hover:text-gray-700 transition-colors\">Privacy</a>\n        </div>\n      </div>\n      <p class=\"mt-4 text-xs text-gray-400\">&copy; 2026 Insight Journal. All rights reserved.</p>\n    </div>\n  </footer>\n\n</body>\n</html>\n"
     },
     {
       "id": "coming-soon/countdown",