Every teacher knows the little moment of tension when a question hangs in the air and you have to choose who answers it. Pick the same eager hands every time and the quiet students disappear. Try to be fair in your head and you second-guess yourself. What you really want is something that takes the decision out of your hands entirely — something the whole class can watch, laugh at, and trust to be fair.
That is the idea behind Stellix Spin, a colourful spinning wheel that picks a random name for you. You type in the names, tap spin, and the wheel does the rest, landing on one lucky winner with a satisfying slowdown and a little burst of confetti. In this post I want to walk you through how a tool like this actually comes together, in plain language, so you understand the thinking even if you never write a line of code yourself.
Start with the one job it has to do
Before building anything, it helps to name the single job. Stellix Spin has exactly one: pick one name at random from a list, in a way that feels fair and fun. Every decision after that flows from this. The wheel is not decoration — it is the honest, visible proof that nobody rigged the result. When the class can see the wheel slow down on its own, they believe the outcome. That trust is the whole point, and it is worth protecting at every step.
Naming the job this clearly also tells you what to leave out. No accounts, no saving, no settings buried in menus. Just names in, a spin, and a winner out.
The list comes first
Everything begins with the names. So the first real building block is a simple text box where you type one name per line. As you type, the tool quietly counts how many names it has and keeps that number on screen. This small touch matters more than it looks: seeing “24 names” gives you confidence that everyone in the room is actually on the wheel.
From there, the tool splits that block of text into a clean list, trimming away stray spaces and ignoring blank lines. This tidy list becomes the single source of truth. The wheel, the counter, and the winner all read from it, which means there is never a mismatch between what you typed and what spins.
Turning a list into a wheel
Here is where it gets visual. Imagine a circle sliced into equal wedges, one per name, like a pizza. If there are six names, each wedge takes a sixth of the circle. If you add a seventh name, every wedge quietly gets a little narrower to make room. The tool recalculates these slices every time the list changes, so the wheel always reflects reality.
Each wedge gets its own bright colour, pulled from a small rotating palette, so neighbours never share a shade and the whole thing looks lively. The name is written along its wedge, angled so it reads outward from the centre. Getting that text to sit neatly inside each slice is one of the fiddlier parts of the build — it has to rotate with the wedge without ever turning upside down or spilling over an edge — but it is what makes the wheel feel like a real, professional picker rather than a rough sketch.
Finally, a golden pointer sits at the very top, aiming down into the wheel. Whatever wedge ends up under that pointer when the wheel stops is the winner. That is the entire rule of the game, and keeping it that simple is what makes it trustworthy.
Making the spin feel real
A spin that snaps to an answer instantly would feel fake and joyless. The magic is in the slowing down. When you tap spin, the wheel is told to turn many full rotations plus a little random extra, and then to ease gradually to a stop over about four seconds.
That easing is the secret. Instead of turning at a constant speed, the wheel starts fast and loses speed smoothly, exactly the way a real carnival wheel does as friction takes over. Your eye follows it, your brain starts guessing where it might land, and the final moment lands with a small thrill. The randomness is decided the instant you tap, but the drama unfolds over those few seconds, and that is what makes people lean in.
A tiny detail seals the illusion: a soft tick each time a new wedge passes under the pointer. As the wheel slows, the ticks slow with it, and that sound alone makes the whole thing feel physical and alive. It is optional, of course, for the times you need a quiet classroom.
The winner moment
When the wheel finally settles, the tool works out which wedge is under the pointer and lifts that name up into a celebration card, big and bright, with a scatter of confetti. This is deliberately a bigger moment than the spin itself. The whole exercise was building toward this reveal, so it deserves a little fanfare.
From there you get two natural choices. Spin again for the next pick, or remove the winner and spin again — perfect for a raffle or for choosing groups where no one should be picked twice. That “remove the winner” option quietly turns a simple picker into a proper draw tool, and it costs the user nothing to ignore when they do not need it.
Who this kind of tool is for
I built Stellix Spin with my own classroom in mind, but the moment it existed I saw how many other people could use it. Teachers pick students to answer, to present, or to form teams. Small businesses run giveaways and want a fair, visible draw. Families use it to decide who does the dishes or who picks the film. Anyone facing a “let’s just choose randomly” moment gets a fair referee that everyone in the room can watch.
The best part is that it asks nothing of you. There is no sign-up and nothing to install, and because it runs entirely in your browser, your list of names never leaves your device. Open it, type, spin, done.
The lesson under the hood
If there is one takeaway from building something like this, it is that the fun is engineered, not accidental. The fairness comes from a clear rule. The delight comes from the slow, eased stop and the little ticking sound. The trust comes from letting people watch the whole thing happen. None of those are big features — they are small, deliberate choices stacked on top of one honest idea.
That is really how most good tools get made. You find the one job, you protect it, and then you spend your effort on the handful of details that turn a working thing into a delightful one.
Stellix Spin is one of a growing set of small, free tools I build under Coding Stellix — each one designed to do a single job well and get out of your way. If this one saves you a decision today, there is plenty more on the way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Stellix Spin — Random Name Picker Wheel by Coding Stellix</title>
<meta name="description" content="Stellix Spin by Coding Stellix — a colourful spinning wheel to pick a random name. Add names, spin, and let the wheel choose. Great for classrooms, giveaways, and decisions. Works fully in your browser.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#160e24;
--surface:#211634;
--surface-2:#2c1f45;
--line:rgba(255,255,255,.10);
--text:#f6f1fb;
--muted:#a99bc0;
--brand:#ff4d8d;
--brand-2:#ff86b6;
--gold:#ffcf5c;
--r:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
font-family:'Jost',sans-serif;background:var(--bg);color:var(--text);
min-height:100dvh;display:flex;flex-direction:column;
background-image:radial-gradient(60% 45% at 50% -6%, rgba(255,77,141,.14), transparent 62%);
}
header{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:11px}
.logo-mark{
width:36px;height:36px;border-radius:11px;flex:none;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
display:grid;place-items:center;font-family:'Unbounded',sans-serif;font-weight:800;font-size:15px;color:#160e24;
box-shadow:0 4px 20px rgba(255,77,141,.32);
}
.logo-text b{font-family:'Unbounded',sans-serif;font-weight:600;font-size:15px;display:block;line-height:1.05}
.logo-text span{font-size:11px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.spacer{flex:1}
.hchip{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:6px 13px}
@media (max-width:560px){ .hchip{display:none} }
.wrap{
flex:1;width:100%;max-width:960px;margin:0 auto;
padding:24px 18px calc(30px + env(safe-area-inset-bottom));
display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start;
}
@media (max-width:800px){ .wrap{grid-template-columns:1fr;gap:22px} }
/* wheel */
.wheel-area{display:flex;flex-direction:column;align-items:center;gap:20px}
.wheel-box{position:relative;width:100%;max-width:440px;aspect-ratio:1}
canvas{width:100%;height:100%;display:block;border-radius:50%;
box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 8px var(--surface), 0 0 0 10px var(--line);}
.pointer{
position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:5;
width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;
border-top:30px solid var(--gold);filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));
}
.hub{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
display:grid;place-items:center;cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,.4);border:4px solid var(--surface);
font-family:'Unbounded',sans-serif;font-weight:800;font-size:12px;color:#160e24;
letter-spacing:.04em;transition:transform .12s;
}
.hub:hover{transform:translate(-50%,-50%) scale(1.05)}
.hub:active{transform:translate(-50%,-50%) scale(.95)}
.hub.disabled{opacity:.6;pointer-events:none}
.spin-btn{
font-family:'Jost',sans-serif;font-size:16px;font-weight:700;
background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;color:#160e24;
border-radius:14px;padding:14px 40px;cursor:pointer;
box-shadow:0 8px 24px rgba(255,77,141,.35);transition:filter .14s,transform .12s;
}
.spin-btn:hover{filter:brightness(1.06)}
.spin-btn:active{transform:scale(.97)}
.spin-btn.disabled{opacity:.5;pointer-events:none}
/* panel */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.card h3{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.count{color:var(--brand-2);font-family:'Unbounded',sans-serif;font-size:11px}
textarea{
width:100%;min-height:200px;resize:vertical;
background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
color:var(--text);font-family:'Jost',sans-serif;font-size:15px;line-height:1.9;
padding:12px 14px;outline:none;transition:border-color .14s;
}
textarea:focus{border-color:var(--brand)}
textarea::placeholder{color:#6b5d82}
.opt{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:14px;font-weight:500}
.switch{width:44px;height:26px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);position:relative;cursor:pointer;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.switch.on{background:var(--brand);border-color:var(--brand)}
.switch.on::after{transform:translateX(18px)}
.row{display:flex;gap:9px;margin-top:14px}
.btn{
flex:1;font-family:'Jost',sans-serif;font-size:13.5px;font-weight:600;color:var(--text);
background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:11px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .14s;
}
.btn:hover{background:#372857}
.btn svg{width:15px;height:15px}
footer{grid-column:1/-1;text-align:center;font-size:12px;color:var(--muted);padding-top:6px}
footer b{color:var(--brand-2);font-weight:600}
/* winner modal */
.modal{
position:fixed;inset:0;background:rgba(10,6,18,.72);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
display:none;place-items:center;z-index:50;padding:20px;
}
.modal.on{display:grid;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
background:var(--surface);border:1px solid var(--line);border-radius:22px;
padding:34px 30px;text-align:center;max-width:420px;width:100%;
box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .35s cubic-bezier(.2,1.2,.4,1);
}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.modal-card .eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.modal-card .name{
font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(26px,7vw,40px);
margin:12px 0 22px;line-height:1.15;word-break:break-word;
background:linear-gradient(135deg,var(--brand-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.modal-actions .btn{flex:1;min-width:120px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;color:#160e24}
.btn-primary:hover{filter:brightness(1.06)}
.toast{
position:fixed;top:72px;left:50%;transform:translate(-50%,-12px);
background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--brand);
color:var(--text);font-size:14px;font-weight:500;padding:11px 18px;border-radius:12px;
box-shadow:0 10px 34px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ *{animation:none!important} }
</style>
</head>
<body>
<header>
<div class="logo">
<div class="logo-mark">S</div>
<div class="logo-text"><b>Stellix Spin</b><span>by Coding Stellix</span></div>
</div>
<div class="spacer"></div>
<div class="hchip">Random name picker wheel</div>
</header>
<div class="wrap">
<!-- WHEEL -->
<div class="wheel-area">
<div class="wheel-box">
<div class="pointer"></div>
<canvas id="wheel" width="880" height="880"></canvas>
<div class="hub" id="hub">SPIN</div>
</div>
<button class="spin-btn" id="spinBtn">Spin the wheel</button>
</div>
<!-- PANEL -->
<div class="card">
<h3>Names <span class="count" id="count">0</span></h3>
<textarea id="names" placeholder="One name per line…"></textarea>
<div class="opt">
<span>Remove winner after spin</span>
<div class="switch" id="removeToggle" role="switch" aria-checked="false" tabindex="0"></div>
</div>
<div class="opt">
<span>Sound</span>
<div class="switch on" id="soundToggle" role="switch" aria-checked="true" tabindex="0"></div>
</div>
<div class="row">
<button class="btn" id="shuffleBtn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3h5v5"/><path d="M4 20 21 3"/><path d="M21 16v5h-5"/><path d="m15 15 6 6"/><path d="M4 4l5 5"/></svg>
Shuffle
</button>
<button class="btn" id="clearBtn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
Clear
</button>
</div>
</div>
<footer>Built with <b>Coding Stellix</b> — Stellix Spin</footer>
</div>
<!-- winner modal -->
<div class="modal" id="modal">
<div class="modal-card">
<div class="eyebrow">Winner</div>
<div class="name" id="winnerName">—</div>
<div class="modal-actions">
<button class="btn" id="removeWinner">Remove & close</button>
<button class="btn btn-primary" id="spinAgain">Spin again</button>
</div>
</div>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script>
(function(){
"use strict";
var $ = function(id){ return document.getElementById(id); };
var canvas = $('wheel'), ctx = canvas.getContext('2d');
var namesEl = $('names');
var W = canvas.width, cx = W/2, cy = W/2, R = W/2 - 12;
var COLORS = ["#ff4d8d","#ffb020","#34d399","#5b6cff","#22d3ee","#f472b6","#a3e635","#fb7185","#818cf8","#2dd4bf","#fbbf24","#c084fc"];
var names = ["Ayesha","Bilal","Fatima","Hassan","Zainab","Usman","Sara","Ali","Maryam","Ahmed"];
var rotation = 0; // radians
var spinning = false;
var removeWinner = false, sound = true;
var winnerIdx = -1;
/* ---------- draw ---------- */
function draw(){
ctx.clearRect(0,0,W,W);
var n = names.length;
if(n===0){
ctx.fillStyle = "#2c1f45";
ctx.beginPath(); ctx.arc(cx,cy,R,0,Math.PI*2); ctx.fill();
ctx.fillStyle = "#a99bc0"; ctx.font = "600 34px Jost, sans-serif";
ctx.textAlign="center"; ctx.textBaseline="middle";
ctx.fillText("Add names →", cx, cy);
return;
}
var seg = Math.PI*2/n;
for(var i=0;i<n;i++){
var a0 = i*seg + rotation, a1 = (i+1)*seg + rotation;
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,R,a0,a1);
ctx.closePath();
ctx.fillStyle = COLORS[i % COLORS.length];
ctx.fill();
// subtle separator
ctx.strokeStyle = "rgba(0,0,0,.12)"; ctx.lineWidth = 2; ctx.stroke();
// label
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(a0 + seg/2);
ctx.textAlign="right"; ctx.textBaseline="middle";
ctx.fillStyle = "#1a1024";
var size = Math.max(15, Math.min(30, 300/n));
ctx.font = "600 "+size+"px Jost, sans-serif";
var label = names[i];
var max = 16;
if(label.length>max) label = label.slice(0,max-1)+"…";
ctx.fillText(label, R-18, 0);
ctx.restore();
}
// outer ring
ctx.beginPath(); ctx.arc(cx,cy,R,0,Math.PI*2);
ctx.strokeStyle="rgba(255,255,255,.14)"; ctx.lineWidth=4; ctx.stroke();
}
/* ---------- winner under pointer (top) ---------- */
function indexUnderPointer(){
var n = names.length; if(!n) return -1;
var seg = Math.PI*2/n;
// pointer at top = -PI/2 ; wheel-local angle
var local = (-Math.PI/2 - rotation) % (Math.PI*2);
if(local<0) local += Math.PI*2;
return Math.floor(local/seg) % n;
}
/* ---------- sound tick ---------- */
var audioCtx = null;
function tick(){
if(!sound) return;
try{
if(!audioCtx) audioCtx = new (window.AudioContext||window.webkitAudioContext)();
var o = audioCtx.createOscillator(), g = audioCtx.createGain();
o.type="square"; o.frequency.value = 880;
g.gain.value = 0.04;
o.connect(g); g.connect(audioCtx.destination);
o.start(); g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime+0.05);
o.stop(audioCtx.currentTime+0.05);
}catch(e){}
}
/* ---------- spin ---------- */
function spin(){
if(spinning || names.length===0){ if(names.length===0) toast("Add some names first"); return; }
spinning = true;
$('spinBtn').classList.add('disabled');
$('hub').classList.add('disabled');
var duration = 4200 + Math.random()*900;
var start = performance.now();
var startRot = rotation;
var turns = 5 + Math.floor(Math.random()*4);
var target = startRot + turns*Math.PI*2 + Math.random()*Math.PI*2;
var lastIdx = indexUnderPointer();
function frame(now){
var t = Math.min(1, (now-start)/duration);
var eased = 1 - Math.pow(1-t, 3); // ease-out cubic
rotation = startRot + (target-startRot)*eased;
draw();
var idx = indexUnderPointer();
if(idx!==lastIdx){ lastIdx=idx; tick(); }
if(t<1){ requestAnimationFrame(frame); }
else { finishSpin(); }
}
requestAnimationFrame(frame);
}
function finishSpin(){
spinning = false;
$('spinBtn').classList.remove('disabled');
$('hub').classList.remove('disabled');
winnerIdx = indexUnderPointer();
var name = names[winnerIdx];
$('winnerName').textContent = name;
$('modal').classList.add('on');
celebrate();
}
/* ---------- confetti (light) ---------- */
function celebrate(){
// simple burst using DOM dots
for(var i=0;i<28;i++){
var d=document.createElement('div');
d.style.cssText="position:fixed;top:50%;left:50%;width:9px;height:9px;border-radius:2px;z-index:55;pointer-events:none;";
d.style.background = COLORS[i%COLORS.length];
document.body.appendChild(d);
var ang=Math.random()*Math.PI*2, dist=120+Math.random()*220;
var dx=Math.cos(ang)*dist, dy=Math.sin(ang)*dist-100;
d.animate([
{transform:"translate(-50%,-50%) rotate(0)",opacity:1},
{transform:"translate("+dx+"px,"+dy+"px) rotate("+(Math.random()*720)+"deg)",opacity:0}
],{duration:900+Math.random()*500,easing:"cubic-bezier(.2,.6,.3,1)"}).onfinish=function(){this.effect.target.remove();};
}
}
/* ---------- names sync ---------- */
function parseNames(){
names = namesEl.value.split('\n').map(function(s){return s.trim();}).filter(Boolean);
$('count').textContent = names.length;
draw();
}
namesEl.addEventListener('input', parseNames);
function writeNames(){ namesEl.value = names.join('\n'); $('count').textContent = names.length; draw(); }
/* ---------- controls ---------- */
$('spinBtn').addEventListener('click', spin);
$('hub').addEventListener('click', spin);
$('shuffleBtn').addEventListener('click', function(){
for(var i=names.length-1;i>0;i--){ var j=Math.floor(Math.random()*(i+1)); var t=names[i];names[i]=names[j];names[j]=t; }
writeNames(); toast("Shuffled");
});
$('clearBtn').addEventListener('click', function(){
if(!names.length){ toast("Already empty"); return; }
names=[]; writeNames(); toast("Cleared");
});
function bindSwitch(id, setter){
var sw=$(id);
function toggle(){ var on=!sw.classList.contains('on'); sw.classList.toggle('on',on); sw.setAttribute('aria-checked',on); setter(on); }
sw.addEventListener('click', toggle);
sw.addEventListener('keydown', function(e){ if(e.key===' '||e.key==='Enter'){e.preventDefault();toggle();} });
}
bindSwitch('removeToggle', function(on){ removeWinner=on; });
bindSwitch('soundToggle', function(on){ sound=on; });
/* ---------- modal ---------- */
function doRemoveWinner(){
if(winnerIdx>=0 && winnerIdx<names.length){ names.splice(winnerIdx,1); writeNames(); }
winnerIdx=-1;
}
$('removeWinner').addEventListener('click', function(){ doRemoveWinner(); $('modal').classList.remove('on'); });
$('spinAgain').addEventListener('click', function(){
if(removeWinner) doRemoveWinner();
$('modal').classList.remove('on');
setTimeout(spin, 250);
});
$('modal').addEventListener('click', function(e){ if(e.target===this){ if(removeWinner) doRemoveWinner(); this.classList.remove('on'); } });
/* ---------- toast ---------- */
var toastEl=$('toast'), toastTimer=null;
function toast(msg){ toastEl.textContent=msg;toastEl.classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(function(){toastEl.classList.remove('show');},1500); }
/* ---------- boot ---------- */
namesEl.value = names.join('\n');
$('count').textContent = names.length;
draw();
})();
</script>
</body>
</html>
