Model Comparison — Neo-Brutalism

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

<!--
Snippet Name: Model Comparison — Neo-Brutalism
Description: Brutalist LLM model comparison panel with hard borders, offset shadows, a "Best for" metric selector, and animated metric bars that highlight the winner per category.
Author: DevSnips Contributors
Usage Example: Drop into an AI product shell to let users compare models side by side. The metric selector and highlight toggle are fully wired in preview.html.
-->
<div class="relative w-full max-w-5xl" data-cmp="nb">

  <!-- Panel -->
  <div class="border-2 border-black bg-white shadow-[8px_8px_0_0_#000]">

    <!-- Header -->
    <div class="flex flex-col gap-3 border-b-2 border-black bg-[#FFE600] px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
      <div class="flex items-center gap-3">
        <div class="flex h-11 w-11 items-center justify-center border-2 border-black bg-white text-black shadow-[3px_3px_0_0_#000]">
          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
            <rect x="3" y="4" width="7" height="16" rx="0" />
            <rect x="14" y="4" width="7" height="16" rx="0" />
            <path d="M10 12h4" />
          </svg>
        </div>
        <div>
          <p class="font-archivo text-base font-extrabold uppercase leading-none tracking-tight">Model Arena</p>
          <p class="mt-1 font-mono text-[11px] font-bold uppercase tracking-wider text-black/70">
            <span class="inline-block h-2 w-2 border border-black bg-[#00E676]"></span>
            3 MODELS · LIVE BENCHMARK
          </p>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <span class="border-2 border-black bg-white px-2.5 py-1.5 font-mono text-[11px] font-bold uppercase shadow-[2px_2px_0_0_#000]">UPDATED 02:14</span>
        <button type="button" class="flex h-9 w-9 items-center justify-center border-2 border-black bg-white shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2" aria-label="Export comparison">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" /></svg>
        </button>
      </div>
    </div>

    <!-- Best-for metric selector -->
    <div class="border-b-2 border-black bg-[#FFFDF5] px-5 py-4">
      <p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/60">HIGHLIGHT BEST FOR ↓</p>
      <div role="radiogroup" aria-label="Highlight best model for metric" class="mt-2 flex flex-wrap gap-2">
        <button type="button" role="radio" aria-checked="true" data-metric="quality" class="cmp-metric border-2 border-black bg-black px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Quality</button>
        <button type="button" role="radio" aria-checked="false" data-metric="speed" class="cmp-metric border-2 border-black bg-white px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Speed</button>
        <button type="button" role="radio" aria-checked="false" data-metric="context" class="cmp-metric border-2 border-black bg-white px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Context</button>
        <button type="button" role="radio" aria-checked="false" data-metric="cost" class="cmp-metric border-2 border-black bg-white px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Cheapest</button>
      </div>
    </div>

    <!-- Model cards -->
    <div class="grid gap-0 bg-white sm:grid-cols-3" data-cmp-grid>
      <!-- GPT-Snip -->
      <article class="cmp-card relative border-b-2 border-black sm:border-b-0 sm:border-r-2 sm:[&:last-child]:border-r-0" data-model="gpt" data-quality="92" data-speed="58" data-context="78" data-cost="80" data-best="quality">
        <div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#FF4FA3] px-4 py-3 text-white">
          <p class="font-archivo text-sm font-extrabold uppercase tracking-tight">GPT-Snip</p>
          <span class="cmp-winner hidden border-2 border-black bg-[#00E676] px-1.5 py-0.5 font-mono text-[10px] font-bold uppercase text-black">★ WINNER</span>
        </div>
        <div class="space-y-3 px-4 py-4">
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Context</span><span class="font-archivo text-sm font-extrabold">128K</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#FF4FA3]" data-fill="78"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Speed</span><span class="font-archivo text-sm font-extrabold">58 t/s</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#FF4FA3]" data-fill="58"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Cost / 1M</span><span class="font-archivo text-sm font-extrabold">$8.00</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#FF4FA3]" data-fill="80"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Quality</span><span class="font-archivo text-sm font-extrabold">92</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#FF4FA3]" data-fill="92"></div></div>
          </div>
          <p class="border-2 border-black bg-[#FFFDF5] px-2 py-1.5 font-archivo text-[12px] font-bold leading-snug">Best for complex reasoning &amp; long docs.</p>
        </div>
      </article>

      <!-- Claude-Snip -->
      <article class="cmp-card relative border-b-2 border-black sm:border-b-0 sm:border-r-2 sm:[&:last-child]:border-r-0" data-model="claude" data-quality="88" data-speed="72" data-context="95" data-cost="60" data-best="context">
        <div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#00C2FF] px-4 py-3 text-black">
          <p class="font-archivo text-sm font-extrabold uppercase tracking-tight">Claude-Snip</p>
          <span class="cmp-winner hidden border-2 border-black bg-[#FFE600] px-1.5 py-0.5 font-mono text-[10px] font-bold uppercase">★ WINNER</span>
        </div>
        <div class="space-y-3 px-4 py-4">
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Context</span><span class="font-archivo text-sm font-extrabold">200K</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#00C2FF]" data-fill="95"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Speed</span><span class="font-archivo text-sm font-extrabold">72 t/s</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#00C2FF]" data-fill="72"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Cost / 1M</span><span class="font-archivo text-sm font-extrabold">$3.00</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#00C2FF]" data-fill="60"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Quality</span><span class="font-archivo text-sm font-extrabold">88</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#00C2FF]" data-fill="88"></div></div>
          </div>
          <p class="border-2 border-black bg-[#FFFDF5] px-2 py-1.5 font-archivo text-[12px] font-bold leading-snug">Best for big context &amp; careful writing.</p>
        </div>
      </article>

      <!-- Llama-Snip -->
      <article class="cmp-card relative" data-model="llama" data-quality="74" data-speed="96" data-context="55" data-cost="95" data-best="cost">
        <div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#00E676] px-4 py-3 text-black">
          <p class="font-archivo text-sm font-extrabold uppercase tracking-tight">Llama-Snip</p>
          <span class="cmp-winner hidden border-2 border-black bg-[#FFE600] px-1.5 py-0.5 font-mono text-[10px] font-bold uppercase">★ WINNER</span>
        </div>
        <div class="space-y-3 px-4 py-4">
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Context</span><span class="font-archivo text-sm font-extrabold">64K</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#00E676]" data-fill="55"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Speed</span><span class="font-archivo text-sm font-extrabold">96 t/s</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#00E676]" data-fill="96"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Cost / 1M</span><span class="font-archivo text-sm font-extrabold">$0.40</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#00E676]" data-fill="95"></div></div>
          </div>
          <div>
            <div class="flex items-baseline justify-between"><span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Quality</span><span class="font-archivo text-sm font-extrabold">74</span></div>
            <div class="mt-1 h-3 border-2 border-black bg-white"><div class="cmp-bar h-full w-0 bg-[#00E676]" data-fill="74"></div></div>
          </div>
          <p class="border-2 border-black bg-[#FFFDF5] px-2 py-1.5 font-archivo text-[12px] font-bold leading-snug">Best for cheap, fast bulk jobs.</p>
        </div>
      </article>
    </div>

    <!-- Footer recommendation -->
    <div class="flex flex-col gap-3 border-t-2 border-black bg-[#FFE600] px-5 py-4 sm:flex-row sm:items-center sm:justify-between" data-cmp-rec>
      <div class="flex items-center gap-2">
        <span class="flex h-7 w-7 items-center justify-center border-2 border-black bg-white font-archivo text-sm font-extrabold">!</span>
        <p class="font-archivo text-[14px] font-extrabold uppercase leading-tight tracking-tight">RECOMMENDATION: <span data-rec-name class="underline">GPT-Snip</span> wins <span data-rec-metric>quality</span>.</p>
      </div>
      <button type="button" class="border-2 border-black bg-black px-4 py-2 font-archivo text-sm font-extrabold uppercase text-white shadow-[4px_4px_0_0_#FF4FA3] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#FF4FA3] focus-visible:ring-offset-2">Pick this model →</button>
    </div>
  </div>

  <style>
    [data-cmp] .cmp-card { transition: outline-offset .12s ease; }
    [data-cmp] .cmp-card.is-winner { outline: 3px solid #000; outline-offset: -3px; }
    [data-cmp] .cmp-bar { transition: width .7s cubic-bezier(.2,.8,.2,1); }
  </style>

  <script>
    (function () {
      var root = document.currentScript.closest('[data-cmp]');
      if (!root) return;
      var cards = Array.prototype.slice.call(root.querySelectorAll('[data-cmp-grid] .cmp-card'));
      var metrics = Array.prototype.slice.call(root.querySelectorAll('.cmp-metric'));
      var recName = root.querySelector('[data-rec-name]');
      var recMetric = root.querySelector('[data-rec-metric]');
      if (!cards.length || !metrics.length) return;

      // cost metric is inverted: cheaper is better -> invert value
      function valueFor(card, metric) {
        var v = parseFloat(card.getAttribute('data-' + metric));
        if (metric === 'cost') v = 100 - v; // lower cost number = higher score
        return v;
      }

      function applyMetric(metric) {
        // best card
        var best = cards[0], bestVal = -1;
        cards.forEach(function (c) {
          var v = valueFor(c, metric);
          if (v > bestVal) { bestVal = v; best = c; }
          c.classList.remove('is-winner');
          c.querySelector('.cmp-winner').classList.add('hidden');
        });
        best.classList.add('is-winner');
        best.querySelector('.cmp-winner').classList.remove('hidden');

        // recommendation
        var name = best.querySelector('p.font-archivo').textContent.trim();
        if (recName) recName.textContent = name;
        if (recMetric) recMetric.textContent = metric === 'cost' ? 'cheapest price' : metric;

        // animate bars
        cards.forEach(function (c) {
          c.querySelectorAll('.cmp-bar').forEach(function (bar) {
            bar.style.width = '0%';
          });
        });
        requestAnimationFrame(function () {
          cards.forEach(function (c) {
            c.querySelectorAll('.cmp-bar').forEach(function (bar) {
              bar.style.width = bar.getAttribute('data-fill') + '%';
            });
          });
        });
      }

      metrics.forEach(function (m) {
        m.addEventListener('click', function () {
          metrics.forEach(function (x) {
            x.setAttribute('aria-checked', 'false');
            x.classList.remove('bg-black', 'text-white');
            x.classList.add('bg-white', 'text-black');
          });
          m.setAttribute('aria-checked', 'true');
          m.classList.add('bg-black', 'text-white');
          m.classList.remove('bg-white', 'text-black');
          applyMetric(m.getAttribute('data-metric'));
        });
      });

      // initial: highlight the active metric button
      var active = metrics.filter(function (m) { return m.getAttribute('aria-checked') === 'true'; })[0] || metrics[0];
      applyMetric(active.getAttribute('data-metric'));
    })();
  </script>
</div>