*{box-sizing:border-box} :root{–background:#f3f6fb;–card:#fff;–text:#111827;–subtext:#667085;–line:#e5e7eb;–dark:#111827;–red:#dc2626;–green:#16a34a;–blue:#2563eb;–purple:#7c3aed;–yellow:#fee500;–shadow:0 12px 34px rgba(15,23,42,.08)} html{scroll-behavior:smooth} body{margin:0;background:radial-gradient(circle at top left,#dbeafe 0,transparent 28%),radial-gradient(circle at top right,#ede9fe 0,transparent 32%),var(–background);color:var(–text);font-family:Pretendard,”Noto Sans KR”,-apple-system,BlinkMacSystemFont,”Segoe UI”,sans-serif;line-height:1.6} button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.hidden{display:none!important} .reaction-app{width:100%;max-width:780px;margin:0 auto;padding:8px 8px 50px} .main-header{padding:30px 18px 25px;border-radius:0 0 28px 28px;background:rgba(255,255,255,.92);box-shadow:var(–shadow)} .header-badge,.section-label{display:inline-flex;padding:7px 11px;border-radius:999px;background:var(–dark);color:#fff;font-size:12px;font-weight:900} .main-header h1{margin:14px 0 6px;font-size:36px;line-height:1.15}.header-description{margin:0;color:#475569;font-size:17px;font-weight:700} .fun-notice{margin-top:15px;padding:11px 12px;border:1px solid #dbeafe;border-radius:14px;background:#eff6ff;color:#64748b;font-size:12px} .screen-card{margin-top:14px;padding:20px 14px;border:1px solid var(–line);border-radius:22px;background:var(–card);box-shadow:var(–shadow)} .screen-card h2{margin:12px 0 8px;font-size:24px}.section-description{margin:0;color:var(–subtext);font-size:14px} .input-field{display:grid;gap:8px;margin-top:16px}.input-field span{font-size:14px;font-weight:900}.input-field input,.input-field select{width:100%;height:50px;padding:0 14px;border:1px solid #d6dce5;border-radius:14px;outline:none} .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.feature-item{padding:14px 6px;border-radius:15px;background:#f8fafc;text-align:center}.feature-item strong{display:block;font-size:18px}.feature-item span{font-size:12px;color:var(–subtext)} .how-to-box{margin-top:16px;padding:15px;border-radius:17px;background:#f8fafc}.how-to-box ol{margin:8px 0 0;padding-left:20px;color:#475569;font-size:14px} .main-button,.dark-button{width:100%;min-height:52px;margin-top:17px;border:0;border-radius:16px;font-size:16px;font-weight:950}.main-button{background:linear-gradient(135deg,var(–blue),var(–purple));color:#fff}.dark-button{background:var(–dark);color:#fff} .ready-icon,.early-icon,.round-result-icon,.analysis-icon{font-size:58px;text-align:center}.early-screen,.round-result-screen,.analysis-screen,#readyScreen{text-align:center} .warning-box{margin-top:16px;padding:14px;border:1px solid #fecaca;border-radius:16px;background:#fef2f2}.warning-box p{margin:5px 0 0;color:#7f1d1d;font-size:13px} .test-screen{margin-top:14px}.test-status{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.round-information,.record-information{padding:12px;border:1px solid var(–line);border-radius:15px;background:#fff;text-align:center}.round-information span,.record-information span{display:block;color:var(–subtext);font-size:11px} .reaction-area{width:100%;min-height:430px;padding:20px;border:0;border-radius:25px;color:#fff;text-align:center;user-select:none;touch-action:manipulation}.reaction-area.waiting{background:linear-gradient(145deg,#ef4444,#991b1b)}.reaction-area.ready{background:linear-gradient(145deg,#22c55e,#15803d)}.reaction-icon{display:block;font-size:68px}.reaction-area strong{display:block;margin-top:17px;font-size:38px}.reaction-area p{margin:12px 0 0;color:rgba(255,255,255,.9)} .round-progress{margin-top:12px;padding:13px;border:1px solid var(–line);border-radius:16px;background:#fff}.round-progress-header{display:flex;justify-content:space-between;font-size:12px;color:var(–subtext)}.round-progress-track{height:10px;margin-top:7px;border-radius:999px;background:#e5e7eb;overflow:hidden}.round-progress-bar{width:0;height:100%;background:linear-gradient(90deg,var(–blue),var(–purple));transition:width .3s} .round-result-time{margin-top:3px;font-size:62px;font-weight:1000}.round-result-grade{display:inline-flex;margin-top:11px;padding:8px 12px;border-radius:999px;background:#ede9fe;color:#5b21b6;font-size:13px;font-weight:900} .round-record-list,.final-round-records,.comparison-list,.ability-list,.information-list,.leaderboard{display:grid;gap:10px;margin-top:15px}.round-record-item,.rank-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 12px;border-radius:13px;background:#f8fafc} .analysis-progress{height:11px;margin-top:20px;overflow:hidden;border-radius:999px;background:#e5e7eb}.analysis-progress-bar{width:38%;height:100%;background:linear-gradient(90deg,var(–blue),var(–purple));animation:load 1.1s infinite linear}@keyframes load{from{transform:translateX(-120%)}to{transform:translateX(300%)}} .ad-area{min-height:120px;margin-top:17px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#f8fafc;color:#94a3b8} .result-hero{margin-top:14px;padding:30px 15px;border-radius:27px;background:linear-gradient(145deg,#111827,#312e81,#831843);color:#fff;text-align:center}.average-result{font-size:72px;font-weight:1000}.percentile-result{font-size:22px;font-weight:950;color:#f9a8d4}.grade-result{max-width:360px;margin:16px auto 0;padding:13px;border-radius:16px;background:rgba(255,255,255,.11);font-size:21px;font-weight:950} .result-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.result-stat{padding:14px 10px;border-radius:15px;background:#f8fafc;text-align:center}.result-stat span{display:block;color:var(–subtext);font-size:11px}.result-stat strong{display:block;font-size:20px} .comparison-item,.ability-item,.information-item{padding:13px;border-radius:15px;background:#f8fafc}.comparison-header,.ability-header{display:flex;justify-content:space-between;font-size:13px}.comparison-track,.ability-track{height:9px;margin-top:7px;border-radius:999px;background:#e5e7eb;overflow:hidden}.comparison-bar,.ability-bar{display:block;height:100%;background:linear-gradient(90deg,var(–blue),var(–purple))} .tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.tag-list span{padding:9px 11px;border-radius:999px;background:#ede9fe;color:#5b21b6;font-size:13px;font-weight:850} .rank-row{grid-template-columns:45px 1fr auto}.result-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.action-button{min-height:50px;border:0;border-radius:14px;font-weight:900}.dark-action{background:var(–dark);color:#fff}.kakao-action{background:var(–yellow)}.blue-action{background:#e0f2fe;color:#075985}.purple-action{background:#ede9fe;color:#5b21b6}.small-notice,.result-disclaimer{color:#94a3b8;font-size:11px;text-align:center} @media(max-width:560px){.main-header h1{font-size:31px}.reaction-area{min-height:390px}.average-result{font-size:62px}} @media(max-width:390px){.reaction-area{min-height:350px}.result-action-grid{grid-template-columns:1fr}} document.addEventListener(“DOMContentLoaded”, function () { “use strict”; const TOTAL_ROUNDS = 5; const WAIT_MIN = 1800; const WAIT_MAX = 5200; const ANALYSIS_TIME = 2600; const $ = (id) => document.getElementById(id); const screens = {start:$(“startScreen”),ready:$(“readyScreen”),test:$(“testScreen”),early:$(“earlyClickScreen”),roundResult:$(“roundResultScreen”),analysis:$(“analysisScreen”),gate:$(“resultGateScreen”),result:$(“resultScreen”)}; let nickname = “”; let ageGroup = “”; let currentRound = 1; let records = []; let waitTimer = null; let state = “idle”; let startedAt = 0; let finalData = null; const ageAvg = {10:235,20:250,30:265,40:280,50:300,60:325}; const defaults = [{name:”Lightning Hands”,score:167},{name:”Speed Demon”,score:176},{name:”Pro Gamer”,score:184},{name:”Split Second”,score:193},{name:”Focus Master”,score:201}]; function show(screen){Object.values(screens).forEach((el)=>el.classList.add(“hidden”));screen.classList.remove(“hidden”);window.scrollTo(0,0)} function validate(){$(“startButton”).disabled=!($ (“nickname”).value.trim()&&$(“ageGroup”).value)} function clearTimer(){if(waitTimer)clearTimeout(waitTimer);waitTimer=null} function updateStatus(){$(“roundCount”).textContent=currentRound+” / “+TOTAL_ROUNDS;$ (“currentBest”).textContent=records.length?Math.min(…records)+”ms”:”-“;const p=Math.round(records.length/TOTAL_ROUNDS*100);$(“roundProgressText”).textContent=p+”%”;$(“roundProgressBar”).style.width=p+”%”} function setWaiting(){state=”waiting”;$(“reactionArea”).className=”reaction-area waiting”;$(“reactionIcon”).textContent=”⏳”;$(“reactionTitle”).textContent=”Wait for green”;$(“reactionMessage”).textContent=”Click the moment the screen turns green.”} function setReady(){state=”ready”;$(“reactionArea”).className=”reaction-area ready”;$(“reactionIcon”).textContent=”⚡”;$(“reactionTitle”).textContent=”Click now!”;$(“reactionMessage”).textContent=”Go as fast as you can.”;startedAt=performance.now();if(navigator.vibrate)navigator.vibrate(25)} function beginRound(){clearTimer();show(screens.test);updateStatus();setWaiting();waitTimer=setTimeout(setReady,Math.floor(Math.random()*(WAIT_MAX-WAIT_MIN+1))+WAIT_MIN)} function grade(ms){if(ms<=150)return["Superhuman","That reaction time is unbelievably fast!"];if(ms<=180)return["Pro Gamer","That is an incredibly fast reaction time."];if(ms<=220)return["Lightning Fast","That is clearly faster than average."];if(ms<=260)return["Above Average","Great focus and reaction speed."];if(ms’‘).join(“”)} function handleReaction(){if(state===”waiting”){clearTimer();state=”early”;show(screens.early);return}if(state===”ready”){const ms=Math.max(1,Math.round(performance.now()-startedAt));state=”done”;records.push(ms);const g=grade(ms);$(“roundResultTime”).textContent=ms+”ms”;$(“roundResultGrade”).textContent=g[0];$(“roundResultMessage”).textContent=g[1];renderRecords($(“roundRecordList”));$(“nextRoundButton”).textContent=currentRound>=TOTAL_ROUNDS?”See my results”:”Next round”;show(screens.roundResult)}} function percentile(avg){if(avg<=140)return 2;if(avg<=160)return 3;if(avg<=180)return 6;if(avg<=200)return 10;if(avg<=220)return 18;if(avg<=240)return 30;if(avg<=260)return 42;if(avg<=280)return 55;if(avg<=300)return 65;if(avg<=330)return 75;if(avg<=370)return 86;return 95} function finalGrade(avg){if(avg<=150)return{name:"Superhuman",hero:"That reaction time is unbelievably fast.",summary:"You detect changes on screen and turn them into action incredibly quickly.",games:["VALORANT","Overwatch","Call of Duty","PUBG","Rhythm games"],activities:["FPS and esports","Racket sports","Racing simulators"]};if(avg<=180)return{name:"Pro Gamer",hero:"Your reaction time is far faster than average.",summary:"You spot a stimulus quickly and turn it into action almost instantly.",games:["VALORANT","Overwatch","Call of Duty","PUBG","Rhythm games"],activities:["Esports","Racket sports","Reflex training"]};if(avg<=220)return{name:"Lightning Fast",hero:"You have an impressively quick reaction time.",summary:"You noticed and responded to screen changes faster than average.",games:["FPS games","Action games","Rhythm games","Racing games","Sports games"],activities:["Exercise","Gaming","Focus training"]};if(avg<=260)return{name:"Above Average",hero:"You have a steady, strong reaction time.",summary:"You are at or above the typical average reaction-time range.",games:["Action games","Sports games","Casual games","Racing games","Puzzle action games"],activities:["Exercise","Focus games","Reflex practice"]};if(avga+b,0)/records.length);const best=Math.min(…records),worst=Math.max(…records),spread=worst-best;const fg=finalGrade(avg);finalData={avg,best,worst,spread,pct:percentile(avg),grade:fg};$(“averageResult”).textContent=avg+”ms”;$(“percentileResult”).textContent=”Top “+finalData.pct+”% nationwide”;$(“gradeResult”).textContent=fg.name;$(“heroResultMessage”).textContent=fg.hero;$(“averageStat”).textContent=avg+”ms”;$(“bestStat”).textContent=best+”ms”;$(“worstStat”).textContent=worst+”ms”;$(“consistencyStat”).textContent=spread<=30?"Very consistent":spread<=60?"Consistent":spread’‘).join(“”);const speed=Math.max(20,Math.min(100,Math.round(120-avg/3))),focus=Math.max(25,Math.min(100,Math.round(100-spread/3)));$(“abilityList”).innerHTML=[[“Instant reaction”,speed],[“Sustained focus”,focus],[“Split-second judgment”,Math.round((speed+focus)/2)],[“Gaming fit”,Math.round(speed*.65+focus*.35)],[“Sports fit”,Math.round(speed*.55+focus*.45)]].map(r=>’‘).join(“”);$(“gameTagList”).innerHTML=fg.games.map(v=>”“+v+”“).join(“”);$(“activityList”).innerHTML=fg.activities.map(v=>’‘).join(“”);let saved=[];try{saved=JSON.parse(localStorage.getItem(“reactionTestRankingV3″)||”[]”)}catch(e){}saved.push({name:nickname||”Anonymous”,score:avg});saved.sort((a,b)=>a.score-b.score);localStorage.setItem(“reactionTestRankingV3”,JSON.stringify(saved.slice(0,30)));$(“leaderboard”).innerHTML=[…saved,…defaults].sort((a,b)=>a.score-b.score).slice(0,10).map((v,i)=>’‘).join(“”)} $(“nickname”).addEventListener(“input”,validate);$(“ageGroup”).addEventListener(“change”,validate); $(“startButton”).addEventListener(“click”,function(){nickname=$(“nickname”).value.trim();ageGroup=$(“ageGroup”).value;currentRound=1;records=[];finalData=null;show(screens.ready)}); $(“readyButton”).addEventListener(“click”,beginRound);$(“reactionArea”).addEventListener(“pointerdown”,function(e){e.preventDefault();handleReaction()});$(“earlyRetryButton”).addEventListener(“click”,beginRound); $(“nextRoundButton”).addEventListener(“click”,function(){if(currentRound>=TOTAL_ROUNDS){show(screens.analysis);const msgs=[“Comparing your times…”,”Comparing you with your age group…”,”Calculating your nationwide percentile…”];let i=0;$(“analysisText”).textContent=msgs[0];const t=setInterval(()=>{$(“analysisText”).textContent=msgs[++i%msgs.length]},700);setTimeout(()=>{clearInterval(t);renderFinal();show(screens.gate)},ANALYSIS_TIME)}else{currentRound++;beginRound()}}); $(“revealResultButton”).addEventListener(“click”,()=>show(screens.result));$(“retryButton”).addEventListener(“click”,function(){clearTimer();currentRound=1;records=[];state=”idle”;finalData=null;$(“nickname”).value=””;$(“ageGroup”).value=””;validate();updateStatus();show(screens.start)}); $(“copyLinkButton”).addEventListener(“click”,async function(){try{await navigator.clipboard.writeText(location.href);alert(“Link copied!”)}catch(e){alert(“Please copy the link directly from your browser’s address bar.”)}}); $(“shareButton”).addEventListener(“click”,async function(){if(!finalData)return;const text=”My reaction time was “+finalData.avg+”ms—top “+finalData.pct+% nationwide. How fast are you?”;if(navigator.share){try{await navigator.share({title:”Reaction Time Test”,text,url:location.href});return}catch(e){}}try{await navigator.clipboard.writeText(text+”\n”+location.href);alert(“Share text copied!”)}catch(e){}}); $(“saveImageButton”).addEventListener(“click”,function(){if(!finalData)return;const c=$(“resultCanvas”),ctx=c.getContext(“2d”);const g=ctx.createLinearGradient(0,0,c.width,c.height);g.addColorStop(0,”#111827″);g.addColorStop(.5,”#312e81″);g.addColorStop(1,”#831843″);ctx.fillStyle=g;ctx.fillRect(0,0,c.width,c.height);ctx.textAlign=”center”;ctx.fillStyle=”#fff”;ctx.font=”900 34px sans-serif”;ctx.fillText(“REACTION SPEED TEST V3″,540,110);ctx.font=”100px sans-serif”;ctx.fillText(“⚡”,540,250);ctx.font=”700 36px sans-serif”;ctx.fillText(“Average reaction time”,540,350);ctx.font=”1000 150px sans-serif”;ctx.fillText(finalData.avg+”ms”,540,520);ctx.fillStyle=”#f9a8d4″;ctx.font=”900 52px sans-serif”;ctx.fillText(“Top “+finalData.pct+”% nationwide”,540,620);ctx.fillStyle=”#fff”;ctx.font=”900 58px sans-serif”;ctx.fillText(finalData.grade.name,540,780);ctx.font=”700 34px sans-serif”;ctx.fillText(“Fastest: “+finalData.best+”ms”,540,920);ctx.font=”800 38px sans-serif”;ctx.fillText((nickname||”Anonymous”)+”‘s result”,540,1030);ctx.font=”900 34px sans-serif”;ctx.fillText(“test.eonis.kr”,540,1230);const a=document.createElement(“a”);a.download=”reaction-test-“+finalData.avg+”ms.png”;a.href=c.toDataURL(“image/png”);a.click()}); validate();updateStatus(); });

⚡ REACTION TEST V3

Reaction Time Test

Click as fast as you can
the instant the screen turns green.

This is just for fun. Your score can vary depending on your device and browser.

STEP 01

Get ready

We’ll calculate your reaction-speed grade from your average across five rounds.

NicknameAge groupChoose your age groupTeens20s30s40s50s60+

5 roundsMeasure reflexes

AverageCalculate score

PercentileSee your ranking

How it works

1. Click the start button.
2. Wait while the screen is red.
3. Click immediately when it turns green.
4. Check your average across all five rounds.

Start reaction test

⚡

READY?

Ready to test your reflexes?

Whatever you do, don’t click while the screen is red.

Heads up

Clicking before the screen turns green will restart the round.

I’m ready

Current round1 / 5

Fastest so far–

⏳Wait for green

Click the moment the screen turns green.

Progress0%

😅

Too early!

The screen hadn’t turned green yet.
Let’s restart this round.

Try again

⚡

ROUND RESULT

Your time

000ms

Lightning Fast

Next round

⚡

Analyzing your reaction time

Analyzing your times…

ANALYSIS COMPLETE

Your detailed results are ready

See your average, fastest time, and nationwide percentile.

(adsbygoogle=window.adsbygoogle||[]).push({});

Show my results

REACTION SPEED REPORT

⚡

Average reaction time

000ms

Top 00% nationwide

Pro Gamer

RECORD

Your times

Average000ms

Fastest000ms

Slowest000ms

ConsistencyConsistent

ANALYSIS

Reaction-time assessment

AGE COMPARISON

Compare by age group

ABILITY

Your split-second skills

GAME STYLE

Game styles that fit you

ACTIVITY

Activities you may enjoy

TODAY’S RANKING

Today’s reaction-time leaderboard

These are fun scores saved in your current browser.

Save result imageShare with friendsCopy linkTry again

This is an entertainment-only test. It does not diagnose actual cognitive ability or any medical condition.

NEXT

Try these next

🎲

Could I Have ADHD? Free Self-Assessment

🎯 Aim Test

Do I Have What It Takes to Be the Gambling King? Gambling Personality Test

How Much Money Will You Make in Your Lifetime?

Color Blindness Test | Can You See the Number Hidden in the Circle?

Objective Face Rating Test — See Your Face Ranking