Code Feet Page
.stats display: flex; gap: 1.5rem; font-family: 'Fira Code', monospace; font-weight: 500;
body background: radial-gradient(circle at 20% 30%, #0a0f1e, #03060c); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Fira Code', 'Courier New', 'Source Code Pro', monospace; padding: 20px;
.footprint-hint font-size: 0.7rem; color: #6d8f8a; @media (max-width: 720px) .stat font-size: 0.7rem; padding: 0.2rem 0.7rem; .badge font-size: 0.7rem; </style> </head> <body> <div> <div class="matrix-container"> <canvas id="codeFeetCanvas" width="900" height="600" style="width:100%; height:auto; max-width:900px; aspect-ratio:900/600"></canvas> <div class="info-panel"> <div class="badge">◢ CODE FEET ◣ — DIGITAL IMPRINT</div> <div class="stats"> <div class="stat"><span>🦶</span> ACTIVE TRACES: <span id="traceCount">0</span></div> <div class="stat"><span>⚡</span> RAIN INTENSITY</div> <button id="resetBtn">⟳ RESET FOOTSTEPS</button> </div> </div> <div class="footprint-hint" style="text-align:center; margin-top:12px;">✦ click + drag — paint code-footprints | each step leaves a matrix rain ✦</div> </div> </div>
// ---- GLOBALS ---- let traces = []; // stores each footprint object: x, y, age, intensity, codeChars, drops let animationId = null; let frame = 0; // Mouse / touch drawing state let drawing = false; let lastX = 0, lastY = 0; // visual settings const MAX_TRACES = 38; // maximum footprints at once const FOOTPRINT_RADIUS = 24; // radius of footprint area const FOOTPRINT_LIFE = 220; // frames lifespan (approx 3.6 sec at 60fps) const NEW_STEP_DIST = 28; // min distance to create a new footprint while dragging // ----- helper: generate "code rain drops" for each footprint function generateCodeDrops(baseX, baseY, intensity = 1.0) // each footprint contains a set of falling characters with individual positions & speed const dropCount = Math.floor(12 + intensity * 18); // 12 to 30 drops per foot const drops = []; for(let i = 0; i < dropCount; i++) // random offset within footprint radius + some spread const angle = Math.random() * Math.PI * 2; const radius = Math.random() * FOOTPRINT_RADIUS * 0.9; const offX = Math.cos(angle) * radius; const offY = Math.sin(angle) * radius * 0.7; // slight vertical squash for organic feel // initial vertical offset (above footprint center) const startYOffset = -Math.random() * 30 - 8; drops.push( char: getRandomCodeChar(), x: baseX + offX, y: baseY + offY + startYOffset, speed: 1.2 + Math.random() * 2.4, alpha: 0.7 + Math.random() * 0.5, size: 12 + Math.floor(Math.random() * 8), life: 0, // not used directly, will be removed on footprint reset driftX: (Math.random() - 0.5) * 0.5, ); return drops; // lexicon: programming symbols / matrix style const codeSymbols = [ '0', '1', '#', '', '', '(', ')', '<', '>', '=', ';', ':', '+', '-', '*', '/', '&', ')(); </script> </body> </html> code feet
canvas display: block; margin: 0 auto; border-radius: 1.8rem; box-shadow: 0 0 0 2px rgba(0, 255, 200, 0.1), 0 15px 35px rgba(0,0,0,0.5); cursor: crosshair; transition: filter 0.2s ease;
button:hover background: #2effb022; color: #ffffff; border-color: #7effdd; box-shadow: 0 0 8px #0ff6; transform: scale(0.97);
.stat background: #0e1a1f; padding: 0.25rem 1rem; border-radius: 2rem; font-size: 0.9rem; color: #bbffdd; box-shadow: inset 0 0 4px #00ffb310, 0 2px 5px #00000030; .stats display: flex
button background: none; border: 1px solid #2effb0; color: #b5ffe0; font-family: monospace; font-weight: bold; padding: 0.3rem 1rem; border-radius: 2rem; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px); font-size: 0.8rem;
/* main canvas container with futuristic glassmorphism */ .matrix-container background: rgba(10, 20, 28, 0.55); backdrop-filter: blur(3px); border-radius: 3rem; padding: 1.2rem; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); border: 1px solid rgba(0, 255, 196, 0.2);
@keyframes pulseText 0% opacity: 0.7; text-shadow: 0 0 0 #0ff0; 100% opacity: 1; text-shadow: 0 0 3px #0ffa; font-family: 'Fira Code'
.info-panel display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.2rem; flex-wrap: wrap; gap: 12px; background: #03060cee; padding: 0.8rem 1.5rem; border-radius: 3rem; backdrop-filter: blur(4px); border: 1px solid #2affb620;
canvas:active filter: drop-shadow(0 0 6px #0ff8);
.stat span color: #6effc0; font-weight: bold; font-size: 1.1rem; margin-right: 6px;
<script> (function() // ---------- CONFIGURATION ---------- const canvas = document.getElementById('codeFeetCanvas'); const ctx = canvas.getContext('2d'); // set canvas dimensions (fixed logical size, crisp) const W = 900, H = 600; canvas.width = W; canvas.height = H;