// tweaks-app.jsx — Tweaks panel for the eth3r cyber redesign function TweaksApp() { const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS); // Apply tweaks to as data-attributes / inline vars React.useEffect(() => { document.body.dataset.vibe = t.vibe; document.body.dataset.glitch = t.glitch ? 'on' : 'off'; document.body.dataset.scanlines = t.scanlines ? 'on' : 'off'; // toggle layers visually const rain = document.getElementById('rain'); if (rain) rain.style.display = t.rain ? 'block' : 'none'; const floor = document.querySelector('.bg-floor'); if (floor) floor.style.display = t.floorGrid ? 'block' : 'none'; const scan = document.querySelector('.scanlines'); if (scan) scan.style.display = t.scanlines ? 'block' : 'none'; // custom accent override (Cyber vibe only — Matrix/Tron own their palette) if (t.vibe === 'cyber') { document.documentElement.style.setProperty('--cyan', t.accent); document.documentElement.style.setProperty('--magenta', t.magenta); } else { document.documentElement.style.removeProperty('--cyan'); document.documentElement.style.removeProperty('--magenta'); } }, [t]); // Cursor effect — tron-style light streak + targeting reticle React.useEffect(() => { if (!t.cursorTrail) return; // Touch devices don't have a cursor — skip the effect entirely if (!window.matchMedia('(hover: hover)').matches) return; // Canvas for the streak const canvas = document.createElement('canvas'); canvas.style.cssText = 'position:fixed;inset:0;z-index:9998;pointer-events:none;mix-blend-mode:screen;'; document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; resize(); window.addEventListener('resize', resize); // Reticle — four corner brackets that follow the cursor with easing const reticle = document.createElement('div'); reticle.style.cssText = ` position:fixed;left:0;top:0;width:36px;height:36px; transform:translate(-9999px,-9999px); z-index:9999;pointer-events:none; transition:transform .08s linear; `; reticle.innerHTML = ` `; document.body.appendChild(reticle); // Coordinates readout const readout = document.createElement('div'); readout.style.cssText = ` position:fixed;left:0;top:0; transform:translate(-9999px,-9999px); z-index:9999;pointer-events:none; font-family:'JetBrains Mono',monospace;font-size:9px; letter-spacing:0.1em; color:currentColor;text-shadow:0 0 4px currentColor; white-space:nowrap; `; document.body.appendChild(readout); // Hide native cursor while trail is on — the reticle is our cursor const prevCursor = document.body.style.cursor; document.body.style.cursor = 'none'; const hideAllCursors = document.createElement('style'); hideAllCursors.textContent = '*{cursor:none !important;} input.term-input, textarea, [contenteditable="true"]{cursor:text !important;}'; document.head.appendChild(hideAllCursors); // Trail point buffer const points = []; const MAX_POINTS = 24; let mouseX = -100, mouseY = -100; let lastEmit = 0; const onMove = (e) => { mouseX = e.clientX; mouseY = e.clientY; const now = performance.now(); if (now - lastEmit > 8) { points.push({ x: mouseX, y: mouseY, t: now }); if (points.length > MAX_POINTS) points.shift(); lastEmit = now; } }; window.addEventListener('mousemove', onMove); let raf; const draw = () => { // Get current accent color from CSS vars const c = getComputedStyle(document.documentElement).getPropertyValue('--cyan').trim() || '#00f0ff'; const m = getComputedStyle(document.documentElement).getPropertyValue('--magenta').trim() || '#ff2bd6'; ctx.clearRect(0, 0, canvas.width, canvas.height); // Fade out old points const now = performance.now(); while (points.length && now - points[0].t > 500) points.shift(); if (points.length > 1) { // Draw the streak as a polyline with tapering width + glow ctx.lineCap = 'round'; ctx.lineJoin = 'round'; // outer glow ctx.strokeStyle = c; ctx.shadowColor = c; ctx.shadowBlur = 14; ctx.lineWidth = 2.5; ctx.globalAlpha = 0.55; ctx.beginPath(); for (let i = 0; i < points.length; i++) { const p = points[i]; if (i === 0) ctx.moveTo(p.x, p.y); else ctx.lineTo(p.x, p.y); } ctx.stroke(); // bright core ctx.shadowBlur = 0; ctx.lineWidth = 1.2; ctx.globalAlpha = 1; ctx.strokeStyle = '#ffffff'; ctx.beginPath(); for (let i = 0; i < points.length; i++) { const p = points[i]; if (i === 0) ctx.moveTo(p.x, p.y); else ctx.lineTo(p.x, p.y); } ctx.stroke(); // Magenta data spark at tail if (points.length > 4) { const tail = points[0]; ctx.fillStyle = m; ctx.shadowColor = m; ctx.shadowBlur = 10; ctx.globalAlpha = 0.6; ctx.fillRect(tail.x - 1, tail.y - 1, 2, 2); } ctx.globalAlpha = 1; ctx.shadowBlur = 0; } // Update reticle + readout positions reticle.style.color = c; reticle.style.transform = `translate(${mouseX - 18}px, ${mouseY - 18}px)`; readout.style.color = c; const xs = String(mouseX).padStart(4, '0'); const ys = String(mouseY).padStart(4, '0'); readout.textContent = `[ ${xs} · ${ys} ]`; readout.style.transform = `translate(${mouseX + 22}px, ${mouseY + 14}px)`; raf = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(raf); window.removeEventListener('mousemove', onMove); window.removeEventListener('resize', resize); canvas.remove(); reticle.remove(); readout.remove(); hideAllCursors.remove(); document.body.style.cursor = prevCursor; }; }, [t.cursorTrail]); return ( setTweak('vibe', v)} /> setTweak('rain', v)} /> setTweak('floorGrid', v)} /> setTweak('scanlines', v)} /> setTweak('glitch', v)} /> setTweak('cursorTrail', v)} /> setTweak('accent', v)} /> setTweak('magenta', v)} /> ); } // Override the light-themed panel chrome with cyber styling const __cyberStyle = document.createElement('style'); __cyberStyle.textContent = ` .twk-panel{ background: rgba(5,9,18,0.92) !important; color: #d6f4ff !important; border: 1px solid var(--line-strong, rgba(0,240,255,0.45)) !important; box-shadow: 0 0 24px rgba(0,240,255,0.25), 0 12px 40px rgba(0,0,0,0.6) !important; font-family: 'JetBrains Mono', monospace !important; } .twk-hd b{ color: var(--cyan, #00f0ff) !important; text-shadow: 0 0 8px var(--cyan, #00f0ff); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px !important; } .twk-x{ color: rgba(214,244,255,0.55) !important; } .twk-x:hover{ background: rgba(0,240,255,0.1) !important; color: var(--cyan,#00f0ff) !important; } .twk-lbl{ color: rgba(214,244,255,0.7) !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; } .twk-val{ color: var(--cyan,#00f0ff) !important; } .twk-sect{ color: var(--magenta,#ff2bd6) !important; border-color: rgba(0,240,255,0.15) !important; } .twk-body{ scrollbar-color: rgba(0,240,255,0.3) transparent !important; } /* segmented radio */ .twk-seg{ background: rgba(0,240,255,0.06) !important; } .twk-seg button{ color: rgba(214,244,255,0.65) !important; font-weight: 500 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.06em !important; } .twk-seg button[aria-checked="true"]{ color: #03050a !important; } .twk-seg-thumb{ background: var(--cyan,#00f0ff) !important; box-shadow: 0 0 10px var(--cyan,#00f0ff) !important; border-radius: 4px !important; } /* toggle */ .twk-toggle{ background: rgba(0,240,255,0.15) !important; } .twk-toggle[data-on="1"]{ background: var(--cyan,#00f0ff) !important; box-shadow: 0 0 10px var(--cyan,#00f0ff) !important; } .twk-toggle i{ background: #03050a !important; } .twk-toggle[data-on="1"] i{ background: #03050a !important; } /* slider */ input[type="range"]{ accent-color: var(--cyan,#00f0ff) !important; } `; document.head.appendChild(__cyberStyle); const __root = document.createElement('div'); document.body.appendChild(__root); ReactDOM.createRoot(__root).render();