Cube Realms Prototype / Anime.js

Controls: WASD move • Space jump • Shift dash • S split • M merge • G gravity flip • Click orb pickup

Color: default • Minis: 0

/* Cube Realms Prototype styles */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: radial-gradient(ellipse at center, #0b0f1a 0%, #05060a 70%); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #e6f0ff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #scene { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; perspective: 1200px; overflow: hidden; } #world { position: relative; width: 640px; height: 480px; transform-style: preserve-3d; transform-origin: center; transition: filter .3s; display: flex; align-items: center; justify-content: center; } /* Player cube */ .cube { width: 120px; height: 120px; position: absolute; transform-style: preserve-3d; transform-origin: center; will-change: transform; filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); } /* faces */ .face { position: absolute; width: 100%; height: 100%; border: 2px solid rgba(180,220,255,.2); background: linear-gradient(180deg, rgba(80,160,255,.07), rgba(20,40,80,.06)); box-shadow: inset 0 0 30px rgba(80,160,255,.06), 0 0 40px rgba(80,160,255,.08); backface-visibility: hidden; border-radius: 6px; } /* position faces */ .front { transform: translateZ(60px); } .back { transform: rotateY(180deg) translateZ(60px); } .left { transform: rotateY(-90deg) translateZ(60px); } .right { transform: rotateY(90deg) translateZ(60px); } .top { transform: rotateX(90deg) translateZ(60px); } .bottom { transform: rotateX(-90deg) translateZ(60px); } /* neon edge */ .cube::after { content: ""; position: absolute; inset: -4px; border-radius: 10px; pointer-events: none; background: linear-gradient(90deg, rgba(120,220,255,.15), rgba(255,120,180,.06)); filter: blur(12px); z-index: -1; } /* orbs */ .orb { position: absolute; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 30px rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.12); cursor: pointer; will-change: transform, background-color; } .orb.color-red { background: radial-gradient(circle at 30% 30%, #ff9b9b, #ff4b4b); box-shadow: 0 0 20px #ff4b4b88; } .orb.color-blue { background: radial-gradient(circle at 30% 30%, #9be0ff, #4bb8ff); box-shadow: 0 0 20px #4bb8ff88; } /* mini cubes created during split */ .mini-cube { position: absolute; width: 56px; height: 56px; border-radius: 6px; background: linear-gradient(180deg, rgba(80,160,255,.12), rgba(20,40,80,.08)); border: 2px solid rgba(200,230,255,.12); box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 18px rgba(80,160,255,.06); transform-style: preserve-3d; will-change: transform, opacity; } /* HUD */ #hud { position: absolute; left: 12px; top: 12px; font-size: 13px; color: #d8e9ff; background: rgba(5,8,15,.3); padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.04); backdrop-filter: blur(6px); } #status { margin-top: 6px; font-weight: 600; font-size: 13px; color: #bfe6ff; } /* main.js - Cube Realms Prototype interactions using Anime.js 4.0 */ const { createTimeline, utils, createSpring } = window.ANIME; const $world = document.querySelector('#world'); const $player = document.querySelector('#player'); const $status = document.querySelector('#status'); const orbs = Array.from(document.querySelectorAll('.orb')); let state = { x: 0, y: 0, rotX: -18, rotY: 24, color: 'default', minis: [], gravity: 0, // degrees rotation of world on X axis }; // initialize player transform and small tilt utils.set($player, { rotateX: state.rotX, rotateY: state.rotY, translateX: state.x, translateY: state.y, translateZ: 0, }); /* Helpers */ function refreshStatus() { $status.textContent = `Color: ${state.color} • Minis: ${state.minis.length}`; } refreshStatus(); function animatePlayerTo(x, y, opts = {}) { const duration = opts.duration ?? 350; createTimeline() .add($player, { translateX: { to: x, duration }, translateY: { to: y, duration }, rotateY: { to: utils.random(-18, 18), duration }, rotateX: { to: utils.random(-6, -30), duration }, ease: 'inOutQuad', }) .init(); state.x = x; state.y = y; } /* Movement controls */ const STEP = 96; const bounds = { x: 260, y: 160 }; function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } function moveBy(dx, dy) { const tx = clamp(state.x + dx, -bounds.x, bounds.x); const ty = clamp(state.y + dy, -bounds.y, bounds.y); animatePlayerTo(tx, ty); } /* Jump */ function jump() { createTimeline() .add($player, { translateZ: [{ to: 60, duration: 220, ease: 'out(3)' }, { to: 0, duration: 450, ease: 'inOutQuad' }], rotateX: { to: -60, duration: 220, ease: 'out(3)' }, rotateY: { to: state.rotY + 30, duration: 220, ease: 'out(3)' } }) .init(); } /* Dash (spring-like) */ function dash(direction = {x: 1, y: 0}) { const spring = createSpring({ mass: 0.6, damping: 20, stiffness: 350, velocity: 3 }); const tx = clamp(state.x + direction.x * STEP * 1.6, -bounds.x, bounds.x); const ty = clamp(state.y + direction.y * STEP * 1.6, -bounds.y, bounds.y); createTimeline() .add($player, { translateX: { to: tx, duration: 400, ease: spring }, translateY: { to: ty, duration: 400, ease: spring }, translateZ: { to: 30, duration: 200, ease: 'out(4)' }, rotateY: { to: utils.random(-60, 60), duration: 400 }, }) .add($player, { translateZ: { to: 0, duration: 400, ease: 'inOutQuad' }, rotateY: { to: utils.random(-18, 18), duration: 400 } }, '+=0') .init(); state.x = tx; state.y = ty; } /* Split into 4 mini cubes */ function split() { if (state.minis.length) return; // already split const centerRect = $player.getBoundingClientRect(); const worldRect = $world.getBoundingClientRect(); const cx = centerRect.left + centerRect.width / 2 - worldRect.left; const cy = centerRect.top + centerRect.height / 2 - worldRect.top; const dirs = [ { x: -1, y: -1 }, { x: 1, y: -1 }, { x: -1, y: 1 }, { x: 1, y: 1 }, ]; const created = []; dirs.forEach((d, i) => { const mini = document.createElement('div'); mini.className = 'mini-cube'; // initial center overlap utils.set(mini, { translateX: state.x, translateY: state.y, translateZ: 8, opacity: 0, rotateZ: utils.random(-10, 10), }); $world.appendChild(mini); created.push(mini); }); // animate minis outward const tl = createTimeline(); created.forEach((mini, i) => { const dir = dirs[i]; const toX = state.x + dir.x * 120 + utils.random(-10, 10); const toY = state.y + dir.y * 90 + utils.random(-8, 8); tl.add(mini, { translateX: { to: toX, duration: 600 + i * 40, ease: 'out(4)' }, translateY: { to: toY, duration: 600 + i * 40, ease: 'out(4)' }, opacity: { to: 1, duration: 220 }, rotateZ: { to: utils.random(-360, 360), duration: 900 + i * 50, ease: 'inOutQuad' } }, 0); }); // small player bounce/scale tl.add($player, { scale: [{ to: 0.86, duration: 200, ease: 'out(4)' }, { to: 1, duration: 500, ease: 'inOut(4)' }], opacity: [{ to: 0.6, duration: 200 }, { to: 1, duration: 500 }], }, 0); tl.call(() => { state.minis = created; refreshStatus(); }, '+=0'); tl.init(); } /* Merge minis back to player */ function merge() { if (!state.minis.length) return; const tl = createTimeline(); state.minis.forEach((mini, i) => { tl.add(mini, { translateX: { to: state.x, duration: 480 + i * 50, ease: 'inOutQuad' }, translateY: { to: state.y, duration: 480 + i * 50, ease: 'inOutQuad' }, opacity: { to: 0, duration: 320 }, rotateZ: { to: 0, duration: 480 + i * 50, ease: 'inOutQuad' } }, 0); }); tl.call(() => { state.minis.forEach(m => m.remove()); state.minis = []; refreshStatus(); }, '+=0'); // small player impact tl.add($player, { scale: [{ to: 1.12, duration: 120, ease: 'out(3)' }, { to: 1, duration: 380, ease: 'inOutQuad' }], translateZ: [{ to: 18, duration: 120 }, { to: 0, duration: 380 }] }, 0); tl.init(); } /* Pickup orb */ function pickupOrb(orbEl) { const color = orbEl.dataset.color || 'unknown'; state.color = color; // color pulse on player const hue = color === 'red' ? '#ff6b6b' : '#6fd1ff'; createTimeline() .add($player, { backgroundColor: [{ to: hue, duration: 0 }, { to: '#ffffff00', duration: 1400, ease: 'inOutQuad' }], scale: [{ to: 1.08, duration: 180, ease: 'out(4)' }, { to: 1, duration: 420 }], boxShadow: [{ to: '0 0 40px rgba(255,255,255,.06)', duration: 0 }] }) .init(); // small particle pop on orb createTimeline() .add(orbEl, { scale: [{ to: 1.3, duration: 140 }, { to: 0.6, duration: 340 }], rotateZ: { to: utils.random(-160, 160), duration: 400 }, opacity: [{ to: 0.95, duration: 0 }, { to: 0, duration: 700 }] }) .call(() => { // respawn orb later utils.set(orbEl, { opacity: 0 }); setTimeout(() => { createTimeline().add(orbEl, { opacity: { to: 1, duration: 600 }, translateY: { to: utils.random(-6,6), duration: 700, loop: 1, alternate: true, easing: 'inOutSine' } }).init(); utils.set(orbEl, { scale: 1 }); }, 1400); }) .init(); refreshStatus(); } /* Gravity flip */ function gravityFlip() { state.gravity = (state.gravity + 180) % 360; createTimeline() .add($world, { rotateX: { to: state.gravity, duration: 900, ease: 'inOutQuad' }, duration: 900 }) .add($player, { rotateX: [{ to: state.rotX + (state.gravity === 180 ? 40 : -40), duration: 400 }, { to: state.rotX, duration: 500 }], translateZ: [{ to: 10, duration: 240 }, { to: 0, duration: 700 }] }, 0) .init(); } /* Input handling */ const keyState = {}; window.addEventListener('keydown', (e) => { if (keyState[e.code]) return; keyState[e.code] = true; switch (e.code) { case 'KeyW': moveBy(0, -STEP); break; case 'ArrowUp': moveBy(0, -STEP); break; case 'KeyS': moveBy(0, STEP); break; case 'ArrowDown': moveBy(0, STEP); break; case 'KeyA': moveBy(-STEP, 0); break; case 'ArrowLeft': moveBy(-STEP, 0); break; case 'KeyD': moveBy(STEP, 0); break; case 'ArrowRight': moveBy(STEP, 0); break; case 'Space': jump(); break; case 'ShiftLeft': case 'ShiftRight': // dash in facing direction based on last key pressed (WASD) let dx = 0, dy = 0; if (keyState['KeyW'] || keyState['ArrowUp']) dy = -1; if (keyState['KeyS'] || keyState['ArrowDown']) dy = 1; if (keyState['KeyA'] || keyState['ArrowLeft']) dx = -1; if (keyState['KeyD'] || keyState['ArrowRight']) dx = 1; if (dx === 0 && dy === 0) dx = 1; // default dash right dash({ x: dx, y: dy }); break; case 'KeyX': // quick demo: spawn small burst split(); setTimeout(merge, 900); break; case 'KeyG': gravityFlip(); break; case 'KeyM': merge(); break; case 'KeyP': // small demo particle on player createTimeline().add($player, { rotateY: { to: utils.random(-360,360), duration: 900 }, translateZ: { to: 20, duration: 160 } }).init(); break; case 'KeyS': // note: S is used above for move down; keep split on 'KeyQ' alternative break; case 'KeyQ': split(); break; } }); window.addEventListener('keyup', (e) => { keyState[e.code] = false; }); /* Orb click handlers */ orbs.forEach(orb => { orb.addEventListener('click', (evt) => { pickupOrb(orb); }); // small hover bob createTimeline({ loop: true }) .add(orb, { translateY: [{ to: utils.random(-6, -2), duration: 900, easing: 'inOutSine' }, { to: utils.random(2, 6), duration: 900, easing: 'inOutSine' }] }) .init(); }); /* simple auto idle motion for world to feel alive */ createTimeline({ loop: true }) .add($world, { rotateY: [{ to: -6, duration: 3000, easing: 'inOutSine' }, { to: 6, duration: 3000, easing: 'inOutSine' }] }) .init(); /* make player clickable to toggle split/merge */ $player.addEventListener('click', () => { if (state.minis.length) merge(); else split(); }); /* expose a tiny API for debugging in console */ window.CubeProto = { moveBy, jump, dash, split, merge, pickupOrb, gravityFlip, state }; Which direction do you prefer for Cube Realms — puzzle-focused (Portal-like) or action-platformer (Mario Galaxy-like)?