seo-engine: day 09 PM, Mistral Large 4, two versus pages, OpenDots on the dots alternatives page

blog/src/_data/media.json

@@ -4544,5 +4544,38 @@
     },
     "inline": {},
     "youtube": []
+  },
+  "mistral-large-4": {
+    "title": "Mistral Large 4 (Le Chonk): size, price, scores and weights",
+    "category": "concepts",
+    "hero": {
+      "file": "assets/media/mistral-large-4/hero.png",
+      "alt": "Title card on white. Mistral Large 4 in large ink type with a lilac kettlebell labelled Le Chonk and the line Checked 6 Oct 2026",
+      "prompt": "Still of the hero scene in assets/media/mistral-large-4/motion.js.",
+      "status": "ready"
+    },
+    "inline": {}
+  },
+  "opencode-vs-claude-code": {
+    "title": "OpenCode vs Claude Code: Licence, Price and Models Compared",
+    "category": "comparisons",
+    "hero": {
+      "file": "assets/media/opencode-vs-claude-code/hero.png",
+      "alt": "Title card on white. OpenCode vs Claude Code in large ink type beside a signpost with two arrows reading any model and Claude plan",
+      "prompt": "Still of the hero scene in assets/media/opencode-vs-claude-code/motion.js.",
+      "status": "ready"
+    },
+    "inline": {}
+  },
+  "claude-cowork-vs-claude-code": {
+    "title": "Claude Cowork vs Claude Code: Which One Do You Need?",
+    "category": "comparisons",
+    "hero": {
+      "file": "assets/media/claude-cowork-vs-claude-code/hero.png",
+      "alt": "Title card on white. Claude Cowork vs Claude Code in large ink type, with a key ring holding a yellow document key and a blue terminal key",
+      "prompt": "Still of the hero scene in assets/media/claude-cowork-vs-claude-code/motion.js.",
+      "status": "ready"
+    },
+    "inline": {}
   }
 }

blog/src/assets/media/claude-cowork-vs-claude-code/motion.css

@@ -0,0 +1,13 @@
+/* Bright coded scenes for "Claude Cowork vs Claude Code". Pairs with motion.js. */
+.prose figure.mg { margin: 42px 0; }
+.prose figure.mg img, .mg .mg-svg { display: block; width: 100%; height: auto; border: 1px solid #1A1320; border-radius: 18px; background: #fff; }
+.mg figcaption { font: 500 13px/1.5 "Space Grotesk", system-ui, sans-serif; color: #6B5878; padding-top: 10px; text-align: center; }
+.mg .mg-svg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+.mg .mg-svg text { -webkit-user-select: none; user-select: none; pointer-events: none; }
+.mg .mg-hit { cursor: pointer; outline: none; }
+.mg [role="slider"] { cursor: grab; touch-action: none; }
+.mg .mg-ring { stroke-opacity: 0; transition: stroke-opacity 0.15s; }
+.mg .mg-hit:focus-visible .mg-ring { stroke-opacity: 1; }
+.mg [role="slider"]:focus-visible circle:nth-child(2) { stroke-width: 5; }
+@media (hover: hover) { .mg .mg-hit:hover .mg-ring { stroke-opacity: 0.5; } }
+@media (prefers-reduced-motion: reduce) { .mg .mg-ring { transition: none; } }

blog/src/assets/media/mistral-large-4/motion.css

@@ -0,0 +1,13 @@
+/* Bright coded scenes for "Mistral Large 4". Pairs with motion.js. */
+.prose figure.mg { margin: 42px 0; }
+.prose figure.mg img, .mg .mg-svg { display: block; width: 100%; height: auto; border: 1px solid #1A1320; border-radius: 18px; background: #fff; }
+.mg figcaption { font: 500 13px/1.5 "Space Grotesk", system-ui, sans-serif; color: #6B5878; padding-top: 10px; text-align: center; }
+.mg .mg-svg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+.mg .mg-svg text { -webkit-user-select: none; user-select: none; pointer-events: none; }
+.mg .mg-hit { cursor: pointer; outline: none; }
+.mg [role="slider"] { cursor: grab; touch-action: none; }
+.mg .mg-ring { stroke-opacity: 0; transition: stroke-opacity 0.15s; }
+.mg .mg-hit:focus-visible .mg-ring { stroke-opacity: 1; }
+.mg [role="slider"]:focus-visible circle:nth-child(2) { stroke-width: 5; }
+@media (hover: hover) { .mg .mg-hit:hover .mg-ring { stroke-opacity: 0.5; } }
+@media (prefers-reduced-motion: reduce) { .mg .mg-ring { transition: none; } }

blog/src/assets/media/opencode-vs-claude-code/motion.css

@@ -0,0 +1,13 @@
+/* Bright coded scenes for "OpenCode vs Claude Code". Pairs with motion.js. */
+.prose figure.mg { margin: 42px 0; }
+.prose figure.mg img, .mg .mg-svg { display: block; width: 100%; height: auto; border: 1px solid #1A1320; border-radius: 18px; background: #fff; }
+.mg figcaption { font: 500 13px/1.5 "Space Grotesk", system-ui, sans-serif; color: #6B5878; padding-top: 10px; text-align: center; }
+.mg .mg-svg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+.mg .mg-svg text { -webkit-user-select: none; user-select: none; pointer-events: none; }
+.mg .mg-hit { cursor: pointer; outline: none; }
+.mg [role="slider"] { cursor: grab; touch-action: none; }
+.mg .mg-ring { stroke-opacity: 0; transition: stroke-opacity 0.15s; }
+.mg .mg-hit:focus-visible .mg-ring { stroke-opacity: 1; }
+.mg [role="slider"]:focus-visible circle:nth-child(2) { stroke-width: 5; }
+@media (hover: hover) { .mg .mg-hit:hover .mg-ring { stroke-opacity: 0.5; } }
+@media (prefers-reduced-motion: reduce) { .mg .mg-ring { transition: none; } }