Ranking

A leaderboard: the place, the name, the value with its interval, the change, a bar in proportion.

  • kit.rank()
  • 714 B of CSS · 22 rules
  • kit.css
  • kit-data.css
  • No script needed
  1. claude-opus-5-51,088± 142
  2. gemini-3-pro1,051± 181
  3. gpt-51,032± 16
  4. deepseek-v4998± 211

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.rank({
      base: 900,
      fmt: 'int',
      items: [
          { name: 'claude-opus-5-5', value: 1088, interval: 14, delta: 2 },
          { name: 'gemini-3-pro', value: 1051, interval: 18, delta: -1 },
          { name: 'gpt-5', value: 1032, interval: 16 },
          { name: 'deepseek-v4', value: 998, interval: 21, delta: 1 },
      ]
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.rank({
        base: 900,
        fmt: 'int',
        items: [
            { name: 'claude-opus-5-5', value: 1088, interval: 14, delta: 2 },
            { name: 'gemini-3-pro', value: 1051, interval: 18, delta: -1 },
            { name: 'gpt-5', value: 1032, interval: 16 },
            { name: 'deepseek-v4', value: 998, interval: 21, delta: 1 },
        ]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.8 KB
<ol class="ovk-rank" aria-label="Ranking" start="1"><li class="ovk-rank-row is-top"><span class="ovk-rank-n" aria-hidden="true">1</span><span class="ovk-rank-main"><span class="ovk-rank-name"><strong>claude-opus-5-5</strong></span></span><span class="ovk-rank-val"><b>1,088</b><small>± 14</small></span><span class="ovk-rank-delta is-up" aria-label="up 2"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.7 16.1l8.3-8.3l8.3 8.3"/></svg>2</span><span class="ovk-rank-bar" style="--v:1.000" aria-hidden="true"></span></li><li class="ovk-rank-row is-top"><span class="ovk-rank-n" aria-hidden="true">2</span><span class="ovk-rank-main"><span class="ovk-rank-name"><strong>gemini-3-pro</strong></span></span><span class="ovk-rank-val"><b>1,051</b><small>± 18</small></span><span class="ovk-rank-delta is-down" aria-label="down 1"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.6 7.9l8.4 8.4l8.4-8.4"/></svg>1</span><span class="ovk-rank-bar" style="--v:0.803" aria-hidden="true"></span></li><li class="ovk-rank-row is-top"><span class="ovk-rank-n" aria-hidden="true">3</span><span class="ovk-rank-main"><span class="ovk-rank-name"><strong>gpt-5</strong></span></span><span class="ovk-rank-val"><b>1,032</b><small>± 16</small></span><span class="ovk-rank-bar" style="--v:0.702" aria-hidden="true"></span></li><li class="ovk-rank-row"><span class="ovk-rank-n" aria-hidden="true">4</span><span class="ovk-rank-main"><span class="ovk-rank-name"><strong>deepseek-v4</strong></span></span><span class="ovk-rank-val"><b>998</b><small>± 21</small></span><span class="ovk-rank-delta is-up" aria-label="up 1"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.7 16.1l8.3-8.3l8.3 8.3"/></svg>1</span><span class="ovk-rank-bar" style="--v:0.521" aria-hidden="true"></span></li></ol>

What it weighs

Its own rules are 2.6 KB, 714 B as sent: 4% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.