---
title: Transformer Attention Visualizer
description: Visualize scores, causal masking, softmax and value mixing inside a Transformer attention head. Change the query token, temperature, logits and V values.
keywords: Transformer attention, attention visualizer, self-attention, scaled dot product attention, softmax, causal mask, multi-head attention
hide:
  - toc
  - navigation
  - footer
---

<link rel="stylesheet" href="/stylesheets/tools.css" />
<link rel="stylesheet" href="/stylesheets/tools-attention.css" />
<script src="/assets/javascripts/tools/transformer-attention-core.js" defer></script>
<script src="/assets/javascripts/tools/transformer-attention.js" defer></script>

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebApplication","name":"Transformer Attention Visualizer — 5sigmas","url":"https://5sigmas.com/en/tools/transformer-attention/","applicationCategory":"EducationalApplication","operatingSystem":"Any","isAccessibleForFree":true,"description":"Interactive visualizer for attention scores, causal masking, softmax and value mixing in a Transformer.","featureList":["Attention matrix by query and key token","Toggleable causal mask","Editable logits for the selected query row","Educational temperature control for softmax","Three comparable synthetic head patterns","Editable scalar V values, shareable state and JSON export"],"isPartOf":{"@type":"WebSite","name":"5sigmas","url":"https://5sigmas.com/en/"}}
</script>

<div class="s5-landing s5-tool-page" data-s5-transformer-attention data-locale="en">
<section class="s5-page-intro"><div class="s5-eyebrow">Tools · Architecture · 05</div><h1>Manipulate one attention head step by step.</h1><p>Select a query token and see how pre-softmax scores become attention weights. Toggle causal masking, change how concentrated the distribution is, and edit a V value to see the resulting output move.</p></section>
<div class="s5-attention-pipeline" aria-label="Attention pipeline"><div><small>01 · Scores</small><strong>S = QKᵀ / √dₖ</strong></div><div><small>02 · Mask</small><strong>Ŝ = S + M</strong></div><div><small>03 · Normalize</small><strong>α = softmax(Ŝ / T)</strong></div><div><small>04 · Mix</small><strong>output = Σ αⱼVⱼ</strong></div></div>
<div class="s5-tool-workbench s5-attention-workbench">
<form class="s5-tool-controls" data-s5-tool-form aria-label="Attention visualizer controls" onsubmit="return false">
<section class="s5-tool-controls__section"><h2>Sequence</h2><div class="s5-tool-field-grid s5-tool-field-grid--single"><div class="s5-tool-field"><label for="s5-att-en-text">Illustrative tokens</label><input id="s5-att-en-text" data-field="text" type="text" value="the cat saw the cat" maxlength="120" /><small>Whitespace-separated labels, not a real model tokenizer. Maximum: 8 tokens.</small></div><div class="s5-tool-field"><label for="s5-att-en-query">Query token</label><select id="s5-att-en-query" data-field="queryIndex"></select><small>Select the row whose attention distribution you want to inspect and edit.</small></div></div></section>
<section class="s5-tool-controls__section"><h2>Head pattern</h2><div class="s5-tool-field-grid s5-tool-field-grid--single"><div class="s5-tool-field"><label for="s5-att-en-head">Synthetic head</label><select id="s5-att-en-head" data-field="head"><option value="local">Local context</option><option value="previous">Previous token</option><option value="repeat" selected>Lexical repetition</option></select><small>These are didactic score patterns, not heads extracted from a trained Transformer.</small></div></div><div class="s5-tool-toggle"><input id="s5-att-en-causal" data-field="causal" type="checkbox" checked /><label for="s5-att-en-causal">Apply causal masking: a query cannot attend to future tokens.</label></div><div class="s5-tool-field" style="margin-top:.8rem"><label for="s5-att-en-temp">Educational temperature</label><div class="s5-attention-temperature"><input id="s5-att-en-temp" data-field="temperature" type="range" min="0.25" max="4" step="0.05" value="1" /><output data-output="temperature">1.00</output></div><small>The original formulation uses the 1/√dₖ scale. T is added here only as an inspection control: softmax(Ŝ/T). Higher T flattens; lower T sharpens. T=1 recovers the standard normalization of the already-masked scores.</small></div><div class="s5-tool-actions" aria-label="Scenario actions"><button class="s5-tool-action" type="button" data-action="share">Copy link</button><button class="s5-tool-action" type="button" data-action="export">Export JSON</button><button class="s5-tool-action" type="button" data-action="reset">Reset</button></div><p class="s5-tool-feedback" data-s5-tool-feedback hidden aria-live="polite"></p></section>
</form>
<section class="s5-tool-results" aria-label="Attention results" aria-live="polite"><div class="s5-tool-kpis s5-attention-kpis"><div class="s5-tool-kpi"><small>Query</small><strong data-output="queryToken">—</strong><span>selected row</span></div><div class="s5-tool-kpi"><small>Highest weight</small><strong data-output="topToken">—</strong><span>dominant key after softmax</span></div><div class="s5-tool-kpi"><small>Entropy</small><strong data-output="entropy">—</strong><span>distribution concentration</span></div><div class="s5-tool-kpi"><small>Effective tokens</small><strong data-output="effectiveTokens">—</strong><span>exp(entropy)</span></div><div class="s5-tool-kpi"><small>Scalar V output</small><strong data-output="outputScalar">—</strong><span>Σ αⱼVⱼ in the 1D example</span></div><div class="s5-tool-kpi"><small>Allowed keys</small><strong data-output="allowedKeys">—</strong><span>after masking</span></div></div><div class="s5-attention-section"><div class="s5-attention-section__head"><strong>Attention matrix</strong><span>rows = queries · columns = keys</span></div><div class="s5-attention-matrix-wrap" data-attention-matrix></div></div><div class="s5-attention-section"><div class="s5-attention-section__head"><strong>Same query, three patterns</strong><span>click to switch heads</span></div><div class="s5-attention-head-comparison" data-head-comparison></div></div><div class="s5-attention-section"><div class="s5-attention-section__head"><strong>From score to contribution</strong><span>edit S and V for the selected query</span></div><div class="s5-attention-row" data-attention-row></div></div></section>
</div>
<section class="s5-tool-method" aria-labelledby="s5-att-method"><div><div class="s5-eyebrow">Method</div><h2 id="s5-att-method">An attention weight alone does not establish why the model produced an output.</h2></div><div class="s5-tool-method__body"><p><strong>Scaled dot-product attention.</strong> In a real Transformer, each position produces query, key and value vectors through learned projections. Scores come from QKᵀ and are divided by √dₖ before masking and softmax.</p><div class="s5-tool-method__formula">Attention(Q,K,V) = softmax(QKᵀ / √dₖ + M)V</div><p><strong>What this tool simulates.</strong> To keep every relationship interpretable, the three heads generate a synthetic score matrix S directly at the stage corresponding to QKᵀ/√dₖ. These are not weights from a specific model. Edit the selected row to see exactly what masking and normalization do.</p><p><strong>Causal masking.</strong> In an autoregressive decoder, scores for future positions become −∞ before softmax. Their final probability is therefore exactly zero.</p><p><strong>Values.</strong> Real V vectors are high-dimensional. Here each token gets one editable scalar so the final operation stays visible without inventing semantic coordinates: output is the weighted sum Σ αⱼVⱼ.</p><p><strong>Multi-head attention.</strong> A real layer runs multiple heads with distinct learned projections, then concatenates and projects their outputs. The three synthetic patterns show how heads can produce different distributions; they do not reproduce a trained layer.</p><p><strong>Interpretation.</strong> Visualizing α shows which positions a head mixes, but that alone does not justify a causal attribution for the final prediction. Jain and Wallace demonstrated that very different attention distributions can yield equivalent predictions; Wiegreffe and Pinter later argued that explanatory usefulness depends on how “explanation” is defined and tested. This tool therefore treats attention as an inspectable internal operation, not as an automatic causal explanation.</p><p class="s5-tool-method__notes">Temperature T is an additional educational control; it does not replace the Transformer's original 1/√dₖ scaling. The tool also omits dropout, rotary/relative position biases, GQA/MQA, FlashAttention and other implementation details.</p><p class="s5-tool-method__notes">Sources: <a href="https://arxiv.org/abs/1706.03762">Vaswani et al. · Attention Is All You Need</a> for scaled dot-product and multi-head attention; <a href="https://docs.pytorch.org/docs/main/generated/torch.nn.functional.scaled_dot_product_attention.html">PyTorch · scaled_dot_product_attention</a> for current causal-mask semantics; <a href="https://arxiv.org/abs/1902.10186">Jain & Wallace · Attention is not Explanation</a> and <a href="https://arxiv.org/abs/1908.04626">Wiegreffe & Pinter · Attention is not not Explanation</a> for the interpretability debate. Verified 2026-08-21.</p></div></section>
<section class="s5-section" aria-labelledby="s5-att-related"><div class="s5-section-head"><h2 id="s5-att-related">Continue from the operation to the system</h2></div><div class="s5-simple-list"><a class="s5-list-row" href="/en/temas/transformer/"><span class="s5-list-row__n">01</span><span class="s5-list-row__title">How the Transformer works</span><span class="s5-list-row__desc">Place attention, residual paths and feed-forward blocks inside the complete architecture.</span><span class="s5-list-row__meta">Concept</span></a><a class="s5-list-row" href="/en/tools/kv-cache-context/"><span class="s5-list-row__n">02</span><span class="s5-list-row__title">KV cache and context</span><span class="s5-list-row__desc">Connect keys and values with memory cost during autoregressive inference.</span><span class="s5-list-row__meta">Tool</span></a></div></section>
</div>
