← Back to Articles Directory
AI Models • August 12, 2026 •Updated September 27, 2026 • 4 min read

Grok 4.6: Specs, API Pricing, and Sample Coding Tests

The xAI model card and release claims, plus two archived AcceleratedLogic code-generation examples with evaluation limits.

Co-Founder & Lead Programmer of AcceleratedLogic AI

Grok 4.6 is xAI's model for coding, agentic tasks, and knowledge work. This guide separates the vendor-published specifications from two illustrative code samples saved from an earlier AcceleratedLogic prompt trial. The samples are useful for discussing output quality, but they are not a controlled or independently reproduced model benchmark.

Grok 4.6 specifications and API pricing

The xAI model documentation lists the API model ID as grok-4.6, a 500,000-token context window, text and image inputs, and text output. It documents function calling, structured outputs, and reasoning effort settings of low, medium, high, and extra high. The default reasoning effort is high.
The published API rates are $2 per million input tokens, $0.50 per million cached input tokens, and $6 per million output tokens. The documentation says requests above 200,000 prompt tokens use different rates, so the headline rate is not the cost for every request. Pricing, model access, and rate limits can change; check xAI's current model and pricing pages before estimating a workload.

What the vendor benchmark table says

In its August 12 release announcement, xAI reports results for its Intelligence Index, GDPVal-AA, CursorBench, DeepSWE, FrontierCode, and other evaluations. The announcement says some competing-model figures are drawn from developers' system cards or public leaderboards. These are vendor-published comparisons across benchmarks and potentially different evaluation setups, so a table position should not be read as a universal ranking or as a prediction for one team's codebase.
For a practical choice, compare the same held-out tasks, tools, and acceptance checks on the models under consideration. Include latency and token usage, and record the exact model ID, reasoning setting, and harness alongside each result.

Two archived coding samples

The earlier article asked for a self-contained SVG scene of a glass sphere with an origami crane, then a Three.js globe with a procedural texture, light particles, mouse controls, and a speed slider. The original runs did not preserve a formal rubric or a repeatable harness. The following code snippets are retained as examples from those runs, not as reproducible benchmark scores.

SVG scene

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Glass Sphere · Origami Crane</title>
  <style>
    :root {
      --bg0: #07080c;
      --bg1: #10131c;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      height: 100%;
      background: radial-gradient(ellipse at 50% 38%, #1a2030 0%, #0b0d14 55%, #050608 100%);
      color: #d7dce8;
      font-family: "Segoe UI", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
      overflow: hidden;
    }
    .stage {
      height: 100%;
      display: grid;
      place-items: center;
      padding: 12px;
    }
    svg {
      width: min(92vmin, 920px);
      height: auto;
      filter: contrast(1.04) saturate(1.08);
    }
    .caption {
      position: fixed;
      left: 0; right: 0; bottom: 18px;
      text-align: center;
      letter-spacing: 0.28em;
      font-size: 11px;
      text-transform: uppercase;
      color: rgba(220, 228, 240, 0.38);
      pointer-events: none;
    }
    .shimmer { animation: shimmer 9s ease-in-out infinite; }
    .breathe { animation: breathe 7.5s ease-in-out infinite; }
    .caustic { animation: caustic 6.5s ease-in-out infinite; }
    @keyframes shimmer {
      0%, 100% { opacity: 0.78; }
      50% { opacity: 1; }
    }
    @keyframes breathe {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes caustic {
      0%, 100% { opacity: 0.45; }
      50% { opacity: 0.72; }
    }
  </style>
</head>
<body>
  <div class="stage">
    <svg viewBox="0 0 900 980" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Photorealistic glass sphere containing a 3D origami crane">
      <defs>
        <filter id="softShadow" x="-40%" y="-20%" width="180%" height="180%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="18" result="b" />
          <feOffset dy="22" result="o" />
          <feFlood flood-color="#020308" flood-opacity="0.72" />
          <feComposite in2="o" operator="in" result="s" />
          <feMerge>
            <feMergeNode in="s" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        <filter id="contactShadow" x="-50%" y="-40%" width="200%" height="200%">
          <feGaussianBlur in="SourceGraphic" stdDeviation="16" />
        </filter>

        <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="6" result="g" />
          <feMerge>
            <feMergeNode in="g" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        <filter id="tinyGlow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="2.2" />
        </filter>

        <filter id="paperGrain">
          <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" seed="7" result="n" />
          <feColorMatrix in="n" type="saturate" values="0" result="g" />
          <feComponentTransfer in="g" result="a">
            <feFuncA type="table" tableValues="0 0.18" />
          </feComponentTransfer>
          <feBlend in="SourceGraphic" in2="a" mode="multiply" />
        </filter>

        <filter id="innerRefract" x="-8%" y="-8%" width="116%" height="116%">
          <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="3" result="t" />
          <feDisplacementMap in="SourceGraphic" in2="t" scale="7" xChannelSelector="R" yChannelSelector="G" />
        </filter>

        <filter id="glassBlur">
          <feGaussianBlur stdDeviation="0.6" />
        </filter>

        <filter id="highlightSoft" x="-40%" y="-40%" width="180%" height="180%">
          <feGaussianBlur stdDeviation="4.5" />
        </filter>

        <filter id="wideGlow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="14" />
        </filter>

        <filter id="craneDrop" x="-25%" y="-15%" width="150%" height="150%">
          <feDropShadow dx="4" dy="10" stdDeviation="5" flood-color="#1a1410" flood-opacity="0.38" />
        </filter>

        <clipPath id="orb">
          <circle cx="450" cy="400" r="268" />
        </clipPath>
        <clipPath id="orbInner">
          <circle cx="450" cy="400" r="248" />
        </clipPath>
        <clipPath id="orbLens">
          <circle cx="450" cy="400" r="256" />
        </clipPath>
        <clipPath id="floorClip">
          <ellipse cx="450" cy="790" rx="340" ry="48" />
        </clipPath>

        <radialGradient id="vignette" cx="50%" cy="40%" r="70%">
          <stop offset="0%" stop-color="#1c2436" />
          <stop offset="55%" stop-color="#0d111a" />
          <stop offset="100%" stop-color="#05060a" />
        </radialGradient>

        <linearGradient id="plinth" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#2a3144" />
          <stop offset="40%" stop-color="#171c28" />
          <stop offset="100%" stop-color="#0a0c12" />
        </linearGradient>

        <radialGradient id="surfaceSheen" cx="50%" cy="30%" r="70%">
          <stop offset="0%" stop-color="#8aa0c4" stop-opacity="0.18" />
          <stop offset="45%" stop-color="#4a5a78" stop-opacity="0.05" />
          <stop offset="100%" stop-color="#000" stop-opacity="0" />
        </radialGradient>

        <radialGradient id="glassVolume" cx="38%" cy="32%" r="68%">
          <stop offset="0%" stop-color="#f4fbff" stop-opacity="0.22" />
          <stop offset="28%" stop-color="#c5e4ef" stop-opacity="0.10" />
          <stop offset="62%" stop-color="#6aa8b8" stop-opacity="0.13" />
          <stop offset="86%" stop-color="#1d4d5c" stop-opacity="0.28" />
          <stop offset="100%" stop-color="#082028" stop-opacity="0.42" />
        </radialGradient>

        <radialGradient id="glassBack" cx="50%" cy="48%" r="55%">
          <stop offset="0%" stop-color="#9ec9d4" stop-opacity="0.08" />
          <stop offset="70%" stop-color="#16343c" stop-opacity="0.18" />
          <stop offset="100%" stop-color="#061016" stop-opacity="0.35" />
        </radialGradient>

        <radialGradient id="fresnel" cx="50%" cy="50%" r="50%">
          <stop offset="78%" stop-color="#ffffff" stop-opacity="0" />
          <stop offset="90%" stop-color="#d7f4ff" stop-opacity="0.18" />
          <stop offset="96%" stop-color="#9ad4e8" stop-opacity="0.55" />
          <stop offset="100%" stop-color="#eefcff" stop-opacity="0.85" />
        </radialGradient>

        <radialGradient id="innerShadow" cx="50%" cy="18%" r="80%">
          <stop offset="40%" stop-color="#000" stop-opacity="0" />
          <stop offset="100%" stop-color="#021018" stop-opacity="0.38" />
        </radialGradient>

        <radialGradient id="bottomCrescent" cx="50%" cy="78%" r="42%">
          <stop offset="0%" stop-color="#0a2030" stop-opacity="0.38" />
          <stop offset="70%" stop-color="#0a2030" stop-opacity="0.08" />
          <stop offset="100%" stop-color="#0a2030" stop-opacity="0" />
        </radialGradient>

        <linearGradient id="rimStroke" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.95" />
          <stop offset="25%" stop-color="#b8dce8" stop-opacity="0.45" />
          <stop offset="55%" stop-color="#4a7a88" stop-opacity="0.35" />
          <stop offset="80%" stop-color="#d0eef8" stop-opacity="0.7" />
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0.9" />
        </linearGradient>

        <radialGradient id="specPrimary" cx="40%" cy="35%" r="50%">
          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.95" />
          <stop offset="35%" stop-color="#e8f7ff" stop-opacity="0.45" />
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
        </radialGradient>

        <linearGradient id="windowRefl" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.42" />
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0.02" />
        </linearGradient>

        <radialGradient id="causticGrad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#d8f4ff" stop-opacity="0.55" />
          <stop offset="40%" stop-color="#7ec8d8" stop-opacity="0.22" />
          <stop offset="100%" stop-color="#3a8090" stop-opacity="0" />
        </radialGradient>

        <radialGradient id="orbCoreLight" cx="42%" cy="36%" r="40%">
          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.16" />
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
        </radialGradient>

        <linearGradient id="pLit" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#fffaf2" />
          <stop offset="45%" stop-color="#f3e4cc" />
          <stop offset="100%" stop-color="#d7b48a" />
        </linearGradient>
        <linearGradient id="pWarm" x1="1" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f7ead4" />
          <stop offset="100%" stop-color="#c89a6a" />
        </linearGradient>
        <linearGradient id="pMid" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ead3b0" />
          <stop offset="100%" stop-color="#b07d52" />
        </linearGradient>
        <linearGradient id="pShade" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#c9a078" />
          <stop offset="100%" stop-color="#7a4e32" />
        </linearGradient>
        <linearGradient id="pDeep" x1="0.2" y1="0" x2="0.8" y2="1">
          <stop offset="0%" stop-color="#a06a44" />
          <stop offset="100%" stop-color="#5a321c" />
        </linearGradient>
        <linearGradient id="pEdge" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#fff6e8" />
          <stop offset="100%" stop-color="#e8c9a0" />
        </linearGradient>
        <linearGradient id="pNeck" x1="0" y1="1" x2="0.3" y2="0">
          <stop offset="0%" stop-color="#e6c8a0" />
          <stop offset="100%" stop-color="#fff8ec" />
        </linearGradient>
        <linearGradient id="pNeckSide" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#d4aa78" />
          <stop offset="100%" stop-color="#8a5534" />
        </linearGradient>
        <linearGradient id="pBeak" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#f0d2a8" />
          <stop offset="100%" stop-color="#b07a48" />
        </linearGradient>
        <linearGradient id="pWingUnder" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#c49264" />
          <stop offset="100%" stop-color="#6e4228" />
        </linearGradient>
        <linearGradient id="pBelly" x1="0.5" y1="0" x2="0.5" y2="1">
          <stop offset="0%" stop-color="#d8b086" />
          <stop offset="100%" stop-color="#8a5a38" />
        </linearGradient>
        <linearGradient id="pTail" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stop-color="#e8c8a0" />
          <stop offset="100%" stop-color="#fff7ea" />
        </linearGradient>
        <linearGradient id="pTailSide" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#c49868" />
          <stop offset="100%" stop-color="#704228" />
        </linearGradient>
        <linearGradient id="foldLine" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#6a4030" stop-opacity="0.55" />
          <stop offset="100%" stop-color="#3a2014" stop-opacity="0.25" />
        </linearGradient>

        <radialGradient id="paperHighlight" cx="30%" cy="25%" r="70%">
          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.55" />
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
        </radialGradient>

        <linearGradient id="refractTint" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#8fd4e8" stop-opacity="0.18" />
          <stop offset="50%" stop-color="#ffffff" stop-opacity="0" />
          <stop offset="100%" stop-color="#3a88a0" stop-opacity="0.16" />
        </linearGradient>
      </defs>

      <rect width="900" height="980" fill="url(#vignette)" />
      <ellipse cx="450" cy="250" rx="260" ry="90" fill="#9bb4d4" opacity="0.04" filter="url(#wideGlow)" />

      <g>
        <ellipse cx="450" cy="792" rx="360" ry="56" fill="#080a10" opacity="0.85" filter="url(#contactShadow)" />
        <ellipse cx="450" cy="788" rx="310" ry="42" fill="url(#plinth)" />
        <ellipse cx="450" cy="786" rx="300" ry="38" fill="url(#surfaceSheen)" />
        <ellipse cx="450" cy="774" rx="210" ry="16" fill="#cfe8f4" opacity="0.06" />
      </g>

      <g>
        <ellipse cx="450" cy="786" rx="230" ry="28" fill="#02040a" opacity="0.7" filter="url(#contactShadow)" />
        <ellipse class="caustic" cx="450" cy="784" rx="168" ry="18" fill="url(#causticGrad)" />
        <path d="M300 784 C340 768 390 760 450 760 C510 760 560 768 600 784 C560 798 510 806 450 806 C390 806 340 798 300 784Z"
              fill="#b8ecff" opacity="0.08" />
        <path d="M370 780 C400 772 430 770 450 770 C480 770 510 774 530 782 C500 778 470 776 450 776 C420 776 390 778 370 780Z"
              fill="#e8fbff" opacity="0.16" class="caustic" />
      </g>

      <g class="breathe" filter="url(#softShadow)">
        <circle cx="450" cy="400" r="268" fill="url(#glassBack)" />
        <circle cx="450" cy="400" r="268" fill="#0a1c24" opacity="0.18" />

        <g clip-path="url(#orb)">
          <ellipse cx="450" cy="560" rx="220" ry="90" fill="#143040" opacity="0.25" />
          <ellipse cx="330" cy="300" rx="140" ry="90" fill="#d8e8f4" opacity="0.06" />
        </g>

        <g clip-path="url(#orbInner)">
          <ellipse cx="456" cy="548" rx="118" ry="22" fill="#1a100c" opacity="0.28" filter="url(#contactShadow)" />
          <ellipse cx="452" cy="544" rx="90" ry="14" fill="#3a2818" opacity="0.18" />

          <g opacity="0.14" transform="translate(450 620) scale(0.72 -0.28) translate(-450 -430)" filter="url(#glassBlur)">
            <use href="#craneBody" />
          </g>

          <g opacity="0.18" transform="translate(-3 1)" filter="url(#innerRefract)" style="mix-blend-mode: screen">
            <use href="#craneBody" fill="#ff6a4a" />
          </g>
          <g opacity="0.16" transform="translate(3 -1)" filter="url(#innerRefract)" style="mix-blend-mode: screen">
            <use href="#craneBody" fill="#4ad4ff" />
          </g>

          <g id="craneBody" filter="url(#craneDrop)">
            <g filter="url(#paperGrain)">

              <path d="M468 412 L612 338 L586 392 L478 438 Z" fill="url(#pWingUnder)" stroke="#5a3420" stroke-width="0.6" stroke-linejoin="round" />
              <path d="M478 438 L586 392 L572 428 L486 456 Z" fill="url(#pDeep)" stroke="#4a2818" stroke-width="0.45" />

              <path d="M462 392 L618 312 L612 338 L468 412 Z" fill="url(#pWarm)" stroke="#8a6040" stroke-width="0.7" stroke-linejoin="round" />
              <path d="M462 392 L548 344 L500 400 Z" fill="url(#paperHighlight)" opacity="0.35" />
              <path d="M548 344 L618 312 L590 350 Z" fill="#fff6ea" opacity="0.22" />

              <path d="M392 428 L448 454 L486 456 L478 438 L430 418 Z" fill="url(#pBelly)" stroke="#6a4030" stroke-width="0.55" />

              <path d="M368 404 L392 428 L430 418 L412 378 Z" fill="url(#pMid)" stroke="#7a5038" stroke-width="0.55" />

              <path d="M368 404 L412 378 L454 368 L430 418 Z" fill="url(#pLit)" stroke="#a07855" stroke-width="0.6" />
              <path d="M430 418 L454 368 L478 388 L478 438 Z" fill="url(#pWarm)" stroke="#8a6044" stroke-width="0.55" />
              <path d="M412 378 L454 368 L430 396 Z" fill="#fffaf2" opacity="0.28" />

              <path d="M368 404 L248 428 L272 468 L392 428 Z" fill="url(#pShade)" stroke="#5a301c" stroke-width="0.65" stroke-linejoin="round" />
              <path d="M272 468 L392 428 L400 448 L292 492 Z" fill="url(#pDeep)" stroke="#4a2414" stroke-width="0.5" />

              <path d="M368 404 L214 372 L248 428 Z" fill="url(#pLit)" stroke="#9a7050" stroke-width="0.75" stroke-linejoin="round" />
              <path d="M368 404 L214 372 L236 348 L350 382 Z" fill="url(#pEdge)" stroke="#b08860" stroke-width="0.55" />
              <path d="M236 348 L214 372 L198 358 L228 332 Z" fill="url(#pWarm)" stroke="#c4a078" stroke-width="0.5" />
              <path d="M350 382 L236 348 L260 368 L358 396 Z" fill="url(#paperHighlight)" opacity="0.4" />
              <path d="M214 372 L248 428 L230 400 Z" fill="#fff2dc" opacity="0.12" />

              <path d="M350 382 L368 404 L378 390 L362 372 Z" fill="url(#pMid)" stroke="#8a5a3a" stroke-width="0.45" />

              <path d="M478 388 L548 292 L532 318 L486 400 Z" fill="url(#pTailSide)" stroke="#6a4028" stroke-width="0.5" />
              <path d="M454 368 L478 388 L532 318 L560 248 L528 278 Z" fill="url(#pTail)" stroke="#b08860" stroke-width="0.65" stroke-linejoin="round" />
              <path d="M528 278 L560 248 L548 268 Z" fill="#fffaf0" opacity="0.45" />
              <path d="M454 368 L500 320 L478 388 Z" fill="url(#paperHighlight)" opacity="0.22" />

              <path d="M368 404 L392 392 L378 360 L352 378 Z" fill="url(#pMid)" stroke="#8a5a38" stroke-width="0.45" />

              <path d="M352 378 L378 360 L348 292 L318 312 Z" fill="url(#pNeck)" stroke="#b08458" stroke-width="0.65" stroke-linejoin="round" />
              <path d="M318 312 L348 292 L338 286 L304 308 Z" fill="url(#pNeckSide)" stroke="#7a4a30" stroke-width="0.45" />
              <path d="M352 378 L334 340 L318 312 L340 328 Z" fill="#fff6ea" opacity="0.18" />

              <path d="M338 286 L348 292 L328 308 L302 300 Z" fill="url(#pLit)" stroke="#a07048" stroke-width="0.55" />
              <path d="M302 300 L328 308 L318 318 L286 312 Z" fill="url(#pBeak)" stroke="#8a5838" stroke-width="0.5" />
              <path d="M286 312 L268 318 L280 326 L318 318 Z" fill="url(#pShade)" stroke="#6a4028" stroke-width="0.45" stroke-linejoin="round" />
              <path d="M338 286 L318 278 L302 300 Z" fill="url(#pNeckSide)" stroke="#7a4a2c" stroke-width="0.4" />
              <path d="M338 286 L318 278 L328 292 Z" fill="#fffaf4" opacity="0.5" />

              <ellipse cx="316" cy="296" rx="2.1" ry="1.6" fill="#2a1810" opacity="0.75" />
              <ellipse cx="315.4" cy="295.5" rx="0.7" ry="0.55" fill="#fff" opacity="0.55" />
            </g>

            <g fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.72">
              <path d="M368 404 L214 372" stroke="url(#foldLine)" stroke-width="1.15" />
              <path d="M368 404 L248 428" stroke="#5a301c" stroke-width="0.7" opacity="0.55" />
              <path d="M236 348 L368 404" stroke="#c4a078" stroke-width="0.55" opacity="0.45" />
              <path d="M350 382 L248 428" stroke="#8a5538" stroke-width="0.45" opacity="0.4" />
              <path d="M412 378 L454 368 L478 388" stroke="#b08458" stroke-width="0.9" />
              <path d="M368 404 L454 368" stroke="#9a6a44" stroke-width="0.7" opacity="0.65" />
              <path d="M430 418 L454 368" stroke="#8a5a38" stroke-width="0.55" opacity="0.5" />
              <path d="M462 392 L618 312" stroke="#a07048" stroke-width="0.85" />
              <path d="M468 412 L612 338" stroke="#6a4028" stroke-width="0.55" opacity="0.55" />
              <path d="M454 368 L560 248" stroke="#c49868" stroke-width="0.85" />
              <path d="M478 388 L532 318" stroke="#7a4a30" stroke-width="0.5" opacity="0.5" />
              <path d="M352 378 L348 292" stroke="#b08458" stroke-width="0.8" />
              <path d="M318 312 L348 292" stroke="#7a4a30" stroke-width="0.55" />
              <path d="M338 286 L268 318" stroke="#8a5834" stroke-width="0.7" />
              <path d="M302 300 L328 308" stroke="#6a4028" stroke-width="0.45" opacity="0.55" />
              <path d="M214 372 L198 358 L228 332 L236 348" stroke="#e8c8a0" stroke-width="0.7" />
              <path d="M560 248 L548 268" stroke="#fff6ea" stroke-width="0.8" />
            </g>

            <g opacity="0.55">
              <path d="M214 372 L248 428" fill="none" stroke="#fff3de" stroke-width="1.6" stroke-linecap="round" opacity="0.25" />
              <path d="M618 312 L612 338" fill="none" stroke="#fff6ea" stroke-width="1.3" opacity="0.3" />
              <path d="M560 248 L532 318" fill="none" stroke="#fffaf2" stroke-width="1.1" opacity="0.22" />
            </g>
          </g>

          <circle cx="450" cy="400" r="248" fill="url(#refractTint)" />

          <circle cx="450" cy="400" r="248" fill="none" stroke="#9ad4e4" stroke-width="22" opacity="0.05" />
          <circle cx="450" cy="400" r="236" fill="none" stroke="#e8f8ff" stroke-width="8" opacity="0.04" />
        </g>

        <circle cx="450" cy="400" r="268" fill="url(#glassVolume)" />
        <circle cx="450" cy="400" r="268" fill="url(#orbCoreLight)" />
        <circle cx="450" cy="400" r="268" fill="url(#innerShadow)" />
        <circle cx="450" cy="400" r="200" fill="url(#bottomCrescent)" />
        <circle cx="450" cy="400" r="268" fill="url(#fresnel)" />

        <circle cx="450" cy="400" r="268" fill="none" stroke="url(#rimStroke)" stroke-width="3.2" />
        <circle cx="450" cy="400" r="261" fill="none" stroke="#8ec8d8" stroke-width="1.1" opacity="0.28" />
        <circle cx="450" cy="400" r="252" fill="none" stroke="#e8f8ff" stroke-width="0.6" opacity="0.18" />

        <g class="shimmer" clip-path="url(#orb)" opacity="0.9">
          <g transform="rotate(-18 360 300)" fill="url(#windowRefl)">
            <path d="M292 214 C318 188 360 178 402 196 C388 232 360 258 322 272 C300 248 290 230 292 214Z" opacity="0.55" />
            <rect x="318" y="228" width="22" height="46" rx="3" transform="rotate(-16 329 251)" opacity="0.35" />
            <rect x="348" y="220" width="20" height="50" rx="3" transform="rotate(-16 358 245)" opacity="0.28" />
            <rect x="376" y="218" width="16" height="42" rx="3" transform="rotate(-16 384 239)" opacity="0.18" />
            <path d="M310 248 L390 228" stroke="#fff" stroke-width="1.2" opacity="0.2" />
            <path d="M308 262 L386 244" stroke="#fff" stroke-width="0.8" opacity="0.12" />
          </g>
          <path d="M560 430 C610 400 650 410 668 458 C640 500 590 512 548 488 C546 458 550 440 560 430Z"
                fill="#cfefff" opacity="0.08" />
          <path d="M210 390 C280 370 360 362 450 366 C560 370 650 392 700 430"
                fill="none" stroke="#d8eef8" stroke-width="10" opacity="0.045" />
        </g>

        <g id="highlights">
          <ellipse cx="352" cy="292" rx="78" ry="46" transform="rotate(-28 352 292)" fill="url(#specPrimary)" filter="url(#highlightSoft)" opacity="0.85" />
          <ellipse cx="348" cy="286" rx="34" ry="18" transform="rotate(-30 348 286)" fill="#ffffff" filter="url(#tinyGlow)" opacity="0.72" />
          <ellipse cx="336" cy="276" rx="14" ry="6.5" transform="rotate(-32 336 276)" fill="#ffffff" opacity="0.95" />
          <ellipse cx="330" cy="278" rx="16" ry="7" transform="rotate(-32 330 278)" fill="#ff8a80" opacity="0.18" style="mix-blend-mode: screen" />
          <ellipse cx="342" cy="274" rx="16" ry="7" transform="rotate(-32 342 274)" fill="#80e8ff" opacity="0.2" style="mix-blend-mode: screen" />

          <ellipse cx="560" cy="478" rx="52" ry="22" transform="rotate(24 560 478)" fill="#dff6ff" opacity="0.14" filter="url(#highlightSoft)" />
          <path d="M580 545 C620 500 650 490 668 512 C650 548 618 568 582 558 C572 548 574 548 580 545Z"
                fill="#e8f8ff" opacity="0.12" />

          <circle cx="232" cy="352" r="2.2" fill="#fff" opacity="0.7" filter="url(#tinyGlow)" />
          <circle cx="248" cy="510" r="1.5" fill="#fff" opacity="0.45" />
          <circle cx="640" cy="318" r="1.8" fill="#fff" opacity="0.5" />
          <circle cx="678" cy="430" r="1.4" fill="#e8f8ff" opacity="0.4" />
        </g>
      </g>

      <circle cx="450" cy="400" r="278" fill="none" stroke="#9ad0e0" stroke-width="18" opacity="0.05" filter="url(#wideGlow)" />
    </svg>
  </div>
  <div class="caption">glass · origami · orizuru</div>

  <script>
    (function () {
      var svg = document.querySelector("svg");
      var hi = document.getElementById("highlights");
      if (!svg || !hi) return;
      var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (reduce) return;

      svg.addEventListener("pointermove", function (e) {
        var r = svg.getBoundingClientRect();
        var nx = (e.clientX - r.left) / r.width - 0.5;
        var ny = (e.clientY - r.top) / r.height - 0.5;
        hi.setAttribute("transform", "translate(" + (nx * 18) + " " + (ny * 14) + ")");
      });
      svg.addEventListener("pointerleave", function () {
        hi.setAttribute("transform", "translate(0 0)");
      });
    })();
  </script>
</body>
</html>
This sample can be inspected directly for the requested elements and implementation choices. Whether the crane or glass reads convincingly is a visual judgment; it should not be generalized to other prompts or tasks.

Procedural globe

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Procedural Globe</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #010105;
      font-family: "Segoe UI", system-ui, sans-serif;
    }
    canvas { display: block; width: 100%; height: 100%; cursor: grab; }
    canvas.dragging { cursor: grabbing; }
    #ui {
      position: fixed;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 260px;
      padding: 14px 18px 16px;
      border-radius: 14px;
      background: rgba(8, 14, 28, 0.62);
      border: 1px solid rgba(140, 190, 255, 0.18);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(12px);
      color: #d7e6ff;
      user-select: none;
    }
    #ui label {
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.82;
    }
    #speed {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, #1a3a66, #7ec8ff);
      outline: none;
    }
    #speed::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #eaf4ff;
      border: 2px solid #7ec8ff;
      box-shadow: 0 0 12px rgba(126, 200, 255, 0.7);
      cursor: pointer;
    }
    #speed::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #eaf4ff;
      border: 2px solid #7ec8ff;
      box-shadow: 0 0 12px rgba(126, 200, 255, 0.7);
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="ui">
    <label for="speed">Rotation Speed</label>
    <input id="speed" type="range" min="0" max="2" step="0.01" value="0.35">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    (function () {
      function fade(t) { return t * t * (3 - 2 * t); }
      function lerp(a, b, t) { return a + (b - a) * t; }
      function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
      function hash3(xi, yi, zi) {
        var n = Math.sin(xi * 127.1 + yi * 311.7 + zi * 74.7) * 43758.5453123;
        return n - Math.floor(n);
      }
      function noise3(x, y, z) {
        var xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z);
        var xf = x - xi, yf = y - yi, zf = z - zi;
        var u = fade(xf), v = fade(yf), w = fade(zf);
        var a = hash3(xi, yi, zi), b = hash3(xi + 1, yi, zi);
        var c = hash3(xi, yi + 1, zi), d = hash3(xi + 1, yi + 1, zi);
        var e = hash3(xi, yi, zi + 1), f = hash3(xi + 1, yi, zi + 1);
        var g = hash3(xi, yi + 1, zi + 1), h = hash3(xi + 1, yi + 1, zi + 1);
        return lerp(
          lerp(lerp(a, b, u), lerp(c, d, u), v),
          lerp(lerp(e, f, u), lerp(g, h, u), v),
          w
        );
      }
      function fbm(x, y, z, octaves) {
        var val = 0, amp = 0.5, freq = 1, i;
        for (i = 0; i < octaves; i++) {
          val += amp * noise3(x * freq, y * freq, z * freq);
          freq *= 2.05;
          amp *= 0.5;
        }
        return val;
      }
      function mixColor(a, b, t) {
        t = clamp(t, 0, 1);
        return [
          a[0] + (b[0] - a[0]) * t,
          a[1] + (b[1] - a[1]) * t,
          a[2] + (b[2] - a[2]) * t
        ];
      }

      function generatePlanetMaps(width, height) {
        var colorCanvas = document.createElement("canvas");
        var bumpCanvas = document.createElement("canvas");
        var specCanvas = document.createElement("canvas");
        colorCanvas.width = bumpCanvas.width = specCanvas.width = width;
        colorCanvas.height = bumpCanvas.height = specCanvas.height = height;
        var colorCtx = colorCanvas.getContext("2d");
        var bumpCtx = bumpCanvas.getContext("2d");
        var specCtx = specCanvas.getContext("2d");
        var colorImg = colorCtx.createImageData(width, height);
        var bumpImg = bumpCtx.createImageData(width, height);
        var specImg = specCtx.createImageData(width, height);
        var cd = colorImg.data, bd = bumpImg.data, sd = specImg.data;

        var deep = [6, 16, 48];
        var mid = [10, 48, 102];
        var shallow = [28, 118, 148];
        var coast = [198, 178, 118];
        var grass = [46, 112, 52];
        var forest = [24, 72, 38];
        var desert = [186, 152, 82];
        var rock = [118, 112, 102];
        var snow = [232, 240, 246];

        var i, j, idx, u, v, lon, lat, cx, cy, cz, n, n2, climate, elev, ice, col, bump, spec, absY, desertBelt;

        for (j = 0; j < height; j++) {
          v = j / (height - 1);
          lat = (0.5 - v) * Math.PI;
          cy = Math.sin(lat);
          var cosLat = Math.cos(lat);
          for (i = 0; i < width; i++) {
            u = i / width;
            lon = u * Math.PI * 2;
            cx = cosLat * Math.cos(lon);
            cz = cosLat * Math.sin(lon);

            n = fbm(cx * 2.15 + 8.1, cy * 2.15 + 3.4, cz * 2.15 + 1.7, 5);
            n2 = fbm(cx * 6.2 + 19.0, cy * 6.2 + 4.2, cz * 6.2 + 11.5, 3);
            climate = fbm(cx * 1.4 + 40.0, cy * 1.4 - 12.0, cz * 1.4 + 7.0, 3);
            elev = n * 0.78 + n2 * 0.22 - 0.46;
            absY = Math.abs(cy);
            ice = clamp((absY - 0.72) * 5.5 + (elev + 0.05) * 0.8, 0, 1);
            desertBelt = clamp(1 - Math.abs(absY - 0.28) * 4.2, 0, 1) * clamp(climate * 1.4, 0, 1);

            if (elev <= 0) {
              var depth = clamp(-elev * 2.4, 0, 1);
              col = mixColor(shallow, mid, clamp(depth * 1.4, 0, 1));
              col = mixColor(col, deep, clamp(depth * 1.1 - 0.25, 0, 1));
              if (ice > 0.35 && elev > -0.035) col = mixColor(col, snow, ice * 0.85);
              bump = 18 + (1 - depth) * 22;
              spec = 210 - depth * 40;
            } else {
              var h = clamp(elev * 2.8, 0, 1);
              col = mixColor(coast, grass, clamp(h * 4.5, 0, 1));
              col = mixColor(col, forest, clamp((h - 0.12) * 2.2 + (1 - desertBelt) * 0.25, 0, 1));
              col = mixColor(col, desert, desertBelt * clamp(1.1 - h * 1.4, 0, 1));
              col = mixColor(col, rock, clamp((h - 0.42) * 2.6, 0, 1));
              col = mixColor(col, snow, clamp((h - 0.62) * 3.2, 0, 1) + ice);
              bump = 70 + h * 175;
              spec = 18 + desertBelt * 16;
            }

            idx = (j * width + i) * 4;
            cd[idx] = col[0]; cd[idx + 1] = col[1]; cd[idx + 2] = col[2]; cd[idx + 3] = 255;
            bd[idx] = bd[idx + 1] = bd[idx + 2] = bump; bd[idx + 3] = 255;
            sd[idx] = sd[idx + 1] = sd[idx + 2] = spec; sd[idx + 3] = 255;
          }
        }

        colorCtx.putImageData(colorImg, 0, 0);
        bumpCtx.putImageData(bumpImg, 0, 0);
        specCtx.putImageData(specImg, 0, 0);

        var colorMap = new THREE.CanvasTexture(colorCanvas);
        var bumpMap = new THREE.CanvasTexture(bumpCanvas);
        var specMap = new THREE.CanvasTexture(specCanvas);
        colorMap.wrapS = bumpMap.wrapS = specMap.wrapS = THREE.ClampToEdgeWrapping;
        colorMap.wrapT = bumpMap.wrapT = specMap.wrapT = THREE.ClampToEdgeWrapping;
        colorMap.anisotropy = 8;
        return { colorMap: colorMap, bumpMap: bumpMap, specMap: specMap };
      }

      function makeGlowTexture() {
        var c = document.createElement("canvas");
        c.width = 64;
        c.height = 64;
        var g = c.getContext("2d");
        var grd = g.createRadialGradient(32, 32, 0, 32, 32, 32);
        grd.addColorStop(0, "rgba(255,255,255,1)");
        grd.addColorStop(0.28, "rgba(190,230,255,0.85)");
        grd.addColorStop(0.55, "rgba(80,160,255,0.28)");
        grd.addColorStop(1, "rgba(0,0,0,0)");
        g.fillStyle = grd;
        g.fillRect(0, 0, 64, 64);
        var tex = new THREE.CanvasTexture(c);
        tex.minFilter = THREE.LinearFilter;
        tex.magFilter = THREE.LinearFilter;
        return tex;
      }

      var maps = generatePlanetMaps(1024, 512);

      var scene = new THREE.Scene();
      scene.background = new THREE.Color(0x010105);

      var camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 200);
      var camDist = 3.55;
      var targetDist = 3.55;
      camera.position.set(0, 0.12, camDist);

      var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var ambient = new THREE.AmbientLight(0x2a3558, 0.42);
      scene.add(ambient);
      var sun = new THREE.DirectionalLight(0xfff4e0, 1.15);
      sun.position.set(5.2, 2.4, 4.1);
      scene.add(sun);
      var fill = new THREE.DirectionalLight(0x3344aa, 0.22);
      fill.position.set(-4.5, -1.4, -3.2);
      scene.add(fill);
      var rim = new THREE.PointLight(0x66aaff, 0.55, 20);
      rim.position.set(-2.8, 1.6, 2.4);
      scene.add(rim);

      var world = new THREE.Group();
      scene.add(world);

      var earthGroup = new THREE.Group();
      earthGroup.rotation.z = THREE.MathUtils.degToRad(23.4);
      world.add(earthGroup);

      var earthMat = new THREE.MeshPhongMaterial({
        map: maps.colorMap,
        bumpMap: maps.bumpMap,
        bumpScale: 0.045,
        specularMap: maps.specMap,
        specular: new THREE.Color(0x335577),
        shininess: 28
      });
      var earth = new THREE.Mesh(new THREE.SphereGeometry(1, 80, 64), earthMat);
      earthGroup.add(earth);

      var atmoVert = [
        "varying vec3 vNormal;",
        "void main() {",
        "  vNormal = normalize(normalMatrix * normal);",
        "  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
        "}"
      ].join("\n");

      var atmoFragOuter = [
        "varying vec3 vNormal;",
        "void main() {",
        "  float intensity = pow(0.62 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 3.6);",
        "  gl_FragColor = vec4(0.28, 0.58, 1.0, 1.0) * intensity;",
        "}"
      ].join("\n");

      var atmoFragInner = [
        "varying vec3 vNormal;",
        "void main() {",
        "  float intensity = pow(0.72 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.15);",
        "  gl_FragColor = vec4(0.35, 0.7, 1.0, 1.0) * intensity * 0.55;",
        "}"
      ].join("\n");

      var outerGlow = new THREE.Mesh(
        new THREE.SphereGeometry(1.18, 64, 48),
        new THREE.ShaderMaterial({
          vertexShader: atmoVert,
          fragmentShader: atmoFragOuter,
          blending: THREE.AdditiveBlending,
          side: THREE.BackSide,
          transparent: true,
          depthWrite: false
        })
      );
      earthGroup.add(outerGlow);

      var innerGlow = new THREE.Mesh(
        new THREE.SphereGeometry(1.035, 64, 48),
        new THREE.ShaderMaterial({
          vertexShader: atmoVert,
          fragmentShader: atmoFragInner,
          blending: THREE.AdditiveBlending,
          side: THREE.FrontSide,
          transparent: true,
          depthWrite: false
        })
      );
      earthGroup.add(innerGlow);

      var ringGroup = new THREE.Group();
      ringGroup.rotation.x = 0.52;
      ringGroup.rotation.z = 0.18;
      world.add(ringGroup);

      var ringCount = 1400;
      var ringPos = new Float32Array(ringCount * 3);
      var ringCol = new Float32Array(ringCount * 3);
      var p, ang, rad, yOff, pal, c0, c1, t;
      c0 = [0.55, 0.82, 1.0];
      c1 = [1.0, 0.86, 0.55];
      for (p = 0; p < ringCount; p++) {
        ang = Math.random() * Math.PI * 2;
        rad = 1.62 + Math.random() * 0.34 + Math.sin(ang * 3.0) * 0.015;
        yOff = (Math.random() - 0.5) * 0.07;
        ringPos[p * 3] = Math.cos(ang) * rad;
        ringPos[p * 3 + 1] = yOff;
        ringPos[p * 3 + 2] = Math.sin(ang) * rad;
        t = 0.5 + 0.5 * Math.sin(ang * 2.0 + rad * 8.0);
        pal = Math.random();
        ringCol[p * 3] = lerp(c0[0], c1[0], t) * (0.65 + pal * 0.35);
        ringCol[p * 3 + 1] = lerp(c0[1], c1[1], t) * (0.65 + pal * 0.35);
        ringCol[p * 3 + 2] = lerp(c0[2], c1[2], t) * (0.65 + pal * 0.35);
      }
      var ringGeo = new THREE.BufferGeometry();
      ringGeo.setAttribute("position", new THREE.BufferAttribute(ringPos, 3));
      ringGeo.setAttribute("color", new THREE.BufferAttribute(ringCol, 3));
      var ringMat = new THREE.PointsMaterial({
        size: 0.038,
        map: makeGlowTexture(),
        transparent: true,
        depthWrite: false,
        blending: THREE.AdditiveBlending,
        vertexColors: true,
        sizeAttenuation: true
      });
      var ring = new THREE.Points(ringGeo, ringMat);
      ringGroup.add(ring);

      var starCount = 1800;
      var starPos = new Float32Array(starCount * 3);
      var starCol = new Float32Array(starCount * 3);
      var s, phi, costh, sinth, r, bright;
      for (s = 0; s < starCount; s++) {
        phi = Math.random() * Math.PI * 2;
        costh = Math.random() * 2 - 1;
        sinth = Math.sqrt(1 - costh * costh);
        r = 42 + Math.random() * 30;
        starPos[s * 3] = r * sinth * Math.cos(phi);
        starPos[s * 3 + 1] = r * costh;
        starPos[s * 3 + 2] = r * sinth * Math.sin(phi);
        bright = 0.45 + Math.random() * 0.55;
        starCol[s * 3] = bright;
        starCol[s * 3 + 1] = bright * (0.92 + Math.random() * 0.08);
        starCol[s * 3 + 2] = bright * (0.95 + Math.random() * 0.08);
      }
      var starGeo = new THREE.BufferGeometry();
      starGeo.setAttribute("position", new THREE.BufferAttribute(starPos, 3));
      starGeo.setAttribute("color", new THREE.BufferAttribute(starCol, 3));
      var stars = new THREE.Points(starGeo, new THREE.PointsMaterial({
        size: 0.18,
        transparent: true,
        depthWrite: false,
        vertexColors: true,
        sizeAttenuation: true
      }));
      scene.add(stars);

      var slider = document.getElementById("speed");
      var autoSpeed = parseFloat(slider.value);
      slider.addEventListener("input", function () {
        autoSpeed = parseFloat(slider.value);
      });

      var dragging = false;
      var lastX = 0, lastY = 0;
      var rotX = 0.28, rotY = 0.6;
      var velX = 0, velY = 0;
      var targetRotX = rotX, targetRotY = rotY;

      function onPointerDown(e) {
        if (e.target === slider || (e.target.closest && e.target.closest("#ui"))) return;
        dragging = true;
        lastX = e.clientX;
        lastY = e.clientY;
        renderer.domElement.classList.add("dragging");
        if (renderer.domElement.setPointerCapture) {
          renderer.domElement.setPointerCapture(e.pointerId);
        }
      }
      function onPointerMove(e) {
        if (!dragging) return;
        var dx = e.clientX - lastX;
        var dy = e.clientY - lastY;
        lastX = e.clientX;
        lastY = e.clientY;
        targetRotY += dx * 0.005;
        targetRotX += dy * 0.005;
        targetRotX = clamp(targetRotX, -1.15, 1.15);
        velY = dx * 0.005;
        velX = dy * 0.005;
      }
      function onPointerUp(e) {
        dragging = false;
        renderer.domElement.classList.remove("dragging");
        if (renderer.domElement.releasePointerCapture && e.pointerId != null) {
          try { renderer.domElement.releasePointerCapture(e.pointerId); } catch (err) { /* pointer capture may already be released; ignore */ }
        }
      }

      renderer.domElement.addEventListener("pointerdown", onPointerDown);
      window.addEventListener("pointermove", onPointerMove);
      window.addEventListener("pointerup", onPointerUp);
      window.addEventListener("pointercancel", onPointerUp);

      window.addEventListener("wheel", function (e) {
        if (e.target.closest && e.target.closest("#ui")) return;
        e.preventDefault();
        targetDist += e.deltaY * 0.0028;
        targetDist = clamp(targetDist, 1.85, 8.5);
      }, { passive: false });

      window.addEventListener("resize", function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });

      var clock = new THREE.Clock();

      function animate() {
        requestAnimationFrame(animate);
        var dt = Math.min(clock.getDelta(), 0.05);

        if (!dragging) {
          targetRotY += velY;
          targetRotX = clamp(targetRotX + velX, -1.15, 1.15);
          velY *= 0.93;
          velX *= 0.93;
        }

        rotX += (targetRotX - rotX) * 0.12;
        rotY += (targetRotY - rotY) * 0.12;
        world.rotation.x = rotX;
        world.rotation.y = rotY;

        earth.rotation.y += autoSpeed * dt * 0.55;
        ringGroup.rotation.y += (0.22 + autoSpeed * 0.18) * dt;

        camDist += (targetDist - camDist) * 0.1;
        camera.position.z = camDist;
        camera.lookAt(0, 0, 0);

        stars.rotation.y += dt * 0.004;
        renderer.render(scene, camera);
      }
      animate();
    })();
  </script>
</body>
</html>
The archived result includes a canvas texture, atmosphere mesh, particle ring, camera controls, and a rotation slider. A follow-up prompt in the original report addressed a failed external texture attempt. Because the run details and pass/fail checks are not captured as a versioned experiment, this example demonstrates an iteration pattern rather than establishing reliability.

How to decide whether it fits

Grok 4.6 may be worth evaluating when a project needs image input, tool calling, or longer-context work and the API terms fit its data and budget requirements. A 500,000-token context limit does not mean every request at that size has the same price or speed. Test your own workload with explicit success criteria, compare it with simpler and less costly options, and repeat variable tasks before making a production choice.