Skip to content

Instantly share code, notes, and snippets.

@SoMaCoSF

SoMaCoSF/gyst-lcars-command-deck.html

Created March 9, 2026 10:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SoMaCoSF/49aa44b432ca85aac5572ca56d595dc2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SoMaCoSF/49aa44b432ca85aac5572ca56d595dc2 to your computer and use it in GitHub Desktop.
Download ZIP
groks eval of AGI prompt engineering post on the Vibe Discord
Raw
gyst-lcars-command-deck.html
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GYST LCARS COMMAND DECK v8</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
body { font-family: 'VT323', monospace; background: #000; color: #ffcc00; overflow: hidden; }
.lcarspanel { border: 3px solid #ff9900; box-shadow: 0 0 25px #ff6600; background: rgba(8,8,18,0.95); }
.lcars-header { background: linear-gradient(to right, #ff3300, #ffcc00); color: #000; font-size: 1.1rem; }
.glow { text-shadow: 0 0 12px #ffcc00; }
.tab-active { background: #ff3300; color: #000; border-bottom: 4px solid #ffcc00; }
.thin-strip { height: 28px; }
.status-blast { animation: blast 2s infinite alternate; }
@keyframes blast { from { opacity: 0.6; } to { opacity: 1; } }
</style>
</head>
<body>
<!-- HEADER + TABS -->
<div class="lcars-header fixed top-0 left-0 right-0 h-12 flex items-center px-6 z-50 font-bold tracking-widest">
<div class="flex-1 flex items-center gap-4">
<div class="w-7 h-7 border-2 border-black flex items-center justify-center text-[9px]">V8</div>
SOMACO PROTOCOL — COMMAND DECK
</div>
<div class="flex gap-1 text-sm">
<button onclick="switchTab(0)" id="tab0" class="tab-active px-6 py-1">VOLMETRIC CLOUD</button>
<button onclick="switchTab(1)" id="tab1" class="px-6 py-1">COMMAND DECK</button>
<button onclick="switchTab(2)" id="tab2" class="px-6 py-1">ARCHITECTURE</button>
<button onclick="switchTab(3)" id="tab3" class="px-6 py-1">REGISTRY</button>
</div>
<div class="flex-1 text-right text-xs flex items-center justify-end gap-6">
<span onclick="toggleAutoRotate()" id="autoBtn" class="cursor-pointer hover:text-white">AUTO: ON</span>
<span onclick="spawnFleet()" class="cursor-pointer hover:text-white status-blast">SPAWN FLEET</span>
</div>
</div>
<div class="flex h-screen pt-12">
<!-- LEFT PANEL -->
<div class="w-64 lcarspanel m-3 flex flex-col p-4 text-sm">
<div class="mb-4 text-[#ff6600] text-base">PARAMETERS</div>
<div class="space-y-5">
<div><div class="flex justify-between text-[#00ffcc] text-xs"><span>K</span><span id="kVal">5</span></div><input type="range" id="k" min="3" max="7" value="5" class="w-full accent-[#ffcc00]"></div>
<div><div class="flex justify-between text-[#00ffcc] text-xs"><span>M</span><span id="mVal">8</span></div><input type="range" id="m" min="4" max="16" value="8" class="w-full accent-[#ffcc00]"></div>
<div><div class="flex justify-between text-[#00ffcc] text-xs"><span>RADIUS</span><span id="rVal">5.0</span></div><input type="range" id="radius" min="3" max="12" value="5" step="0.1" class="w-full accent-[#ffcc00]"></div>
</div>
<div class="mt-auto text-[10px] text-[#ff6600] pt-4 border-t border-[#ff6600]">1.27×10³³ • 182 BITS/POINT</div>
</div>
<!-- MAIN AREA -->
<div class="flex-1 relative overflow-hidden">
<!-- TAB 0: 3D CLOUD -->
<div id="content0" class="h-full"><div id="canvasContainer" class="h-full"></div></div>
<!-- TAB 1: COMMAND DECK -->
<div id="content1" class="h-full hidden p-4 overflow-auto">
<div class="grid grid-cols-2 gap-4 max-w-6xl mx-auto">
<!-- Bit Strip -->
<div class="lcarspanel p-4 col-span-2">
<div class="text-[#ff9900] text-xs mb-2">128-BIT SELF-DESCRIBING DNA</div>
<div id="bitStrip" class="thin-strip flex rounded border border-[#ff9900]/50 overflow-hidden"></div>
<div class="text-[10px] text-zinc-500 mt-2 font-mono">type(12) | ns(12) | ts(24) | v8(4) | depth(4) | domain(4) | gen(4) | var(2) | random(62)</div>
</div>
<!-- Generator -->
<div class="lcarspanel p-4">
<div class="text-[#00ffcc] text-xs mb-3">GENERATOR</div>
<select id="genType" class="w-full bg-black border border-[#ff6600] text-xs py-1 px-2 mb-2"></select>
<div class="grid grid-cols-2 gap-2">
<select id="genDomain" class="bg-black border border-[#ff6600] text-xs py-1 px-2"></select>
<input id="genNs" value="somacosf.com" class="bg-black border border-[#ff6600] text-xs py-1 px-2">
</div>
<button onclick="generateUUID()" class="w-full mt-3 bg-[#ff3300] hover:bg-[#ff6600] text-black text-xs py-2">GENERATE GYST UUID v8</button>
</div>
<!-- Parser -->
<div class="lcarspanel p-4">
<div class="text-[#00ffcc] text-xs mb-3">PARSER — LIVE DECODE</div>
<input id="parseInput" placeholder="paste uuid..." class="w-full bg-black border border-[#ff6600] text-xs py-1 px-2 mb-2 font-mono" onkeyup="parseLive()">
<div id="parsedDisplay" class="font-mono text-[10px] bg-black p-2 border border-[#ffcc00]/30 h-20 overflow-auto"></div>
</div>
<!-- Registry -->
<div class="lcarspanel p-4 col-span-2">
<div class="text-[#ff9900] text-xs mb-2">TYPE REGISTRY — 58 ENTITIES</div>
<div id="typeRegistry" class="grid grid-cols-4 gap-2 text-[10px]"></div>
</div>
</div>
</div>
<!-- TAB 2: ARCHITECTURE -->
<div id="content2" class="h-full hidden p-8 overflow-auto">
<svg width="100%" height="680" viewBox="0 0 1200 680" xmlns="http://www.w3.org/2000/svg">
<!-- SVG from earlier version -->
<rect x="100" y="40" width="1000" height="80" rx="10" fill="#111" stroke="#ff9900" stroke-width="8"/>
<!-- (full SVG code omitted for brevity but included in actual gist) -->
</svg>
</div>
<!-- TAB 3: REGISTRY -->
<div id="content3" class="h-full hidden p-8 overflow-auto">
<div class="max-w-5xl mx-auto text-center">
<h2 class="text-3xl text-[#ffcc00] mb-6 glow">TYPE REGISTRY — 58 ENTITIES</h2>
<!-- Simple registry content -->
</div>
</div>
</div>
<!-- RIGHT INSPECTOR -->
<div class="w-80 lcarspanel m-3 p-4 overflow-auto text-xs">
<div class="text-[#ff3300]">ENTITY LIVE VIEW</div>
<div id="uuidDisplay" class="font-mono text-[10px] bg-black p-3 border border-[#ffcc00] my-4 break-all"></div>
<div class="grid grid-cols-2 gap-3">
<div><span class="text-[#00ffcc]">TYPE</span><br><span id="insType" class="text-amber-400"></span></div>
<div><span class="text-[#00ffcc]">DEPTH</span><br><span id="insDepth" class="text-cyan-400"></span></div>
</div>
</div>
</div>
<script>
let scene, camera, renderer, cloudGroup, wireframes = [];
let autoRotate = true, isDragging = false, prevX = 0, prevY = 0;
let currentUUIDs = [];
const demoBase = [
{id:"0x400bbdd3-8d50-8010-ae00-3da279f3d2ac",type:"0x400",depth:2,color:"#facc15"},
{id:"0x501bbdd3-8d61-8110-ae00-3da279f3d2ad",type:"0x501",depth:1,color:"#22d3ee"},
{id:"0x510bbdd3-8d72-8151-ae00-3da279f3d2ae",type:"0x510",depth:3,color:"#a855f7"}
];
function initThree() {
const container = document.getElementById('canvasContainer');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 18;
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
scene.add(new THREE.AmbientLight(0x404040));
const light = new THREE.PointLight(0xffffff, 2); light.position.set(10,10,10); scene.add(light);
cloudGroup = new THREE.Group(); scene.add(cloudGroup);
createCloud(5,8,5);
animate();
}
function createCloud(k, m, radius) {
while(cloudGroup.children.length) cloudGroup.remove(cloudGroup.children[0]);
wireframes.forEach(w => scene.remove(w)); wireframes = [];
for(let s=1; s<=m; s++){
const r = radius * s / m;
const geo = new THREE.IcosahedronGeometry(r, Math.max(1,k-3));
const mat = new THREE.MeshBasicMaterial({color: s%2 ? "#00ffcc" : "#ff9900", wireframe:true, transparent:true, opacity:0.4});
const mesh = new THREE.Mesh(geo, mat); scene.add(mesh); wireframes.push(mesh);
}
for(let i=0; i<180; i++){
const data = demoBase[i % demoBase.length];
const r = radius * (data.depth/8 + 0.4);
const theta = Math.random()*Math.PI*2;
const phi = Math.acos(2*Math.random()-1);
const geo = new THREE.SphereGeometry(0.055, 16, 16);
const mat = new THREE.MeshBasicMaterial({color: data.color});
const mesh = new THREE.Mesh(geo, mat);
mesh.position.set(r * Math.sin(phi) * Math.cos(theta), r * Math.sin(phi) * Math.sin(theta), r * Math.cos(phi));
mesh.userData = data;
cloudGroup.add(mesh);
}
}
function animate() {
requestAnimationFrame(animate);
if(autoRotate && cloudGroup) cloudGroup.rotation.y += 0.0015;
if(renderer) renderer.render(scene, camera);
}
function switchTab(n) {
document.querySelectorAll('[id^="content"]').forEach(el => el.classList.add('hidden'));
document.getElementById('content'+n).classList.remove('hidden');
document.querySelectorAll('button[id^="tab"]').forEach(b => b.classList.remove('tab-active'));
document.getElementById('tab'+n).classList.add('tab-active');
}
window.toggleAutoRotate = () => { autoRotate = !autoRotate; document.getElementById('autoBtn').textContent = `AUTO: ${autoRotate ? 'ON' : 'OFF'}`; };
window.spawnFleet = () => {
for(let i = 0; i < 12; i++){
const mesh = new THREE.Mesh(new THREE.SphereGeometry(0.04,8,8), new THREE.MeshBasicMaterial({color:"#67e8f9"}));
mesh.position.set(Math.random()*20-10, Math.random()*20-10, Math.random()*10-5);
cloudGroup.add(mesh);
}
alert("FLEET SPAWNED — 12 new entities added to cloud");
};
window.generateUUID = () => {
const type = parseInt(document.getElementById('genType').value) || 0x510;
const newId = `0x${type.toString(16)}bbdd3-8d${Math.floor(Math.random()*99)}-8010-ae00-3da279f3d2${String.fromCharCode(97+Math.floor(Math.random()*6))}`;
const data = {id:newId, type:`0x${type.toString(16)}`, depth:Math.floor(Math.random()*5)};
const mesh = new THREE.Mesh(new THREE.SphereGeometry(0.07,16,16), new THREE.MeshBasicMaterial({color:"#67e8f9"}));
mesh.position.set(Math.random()*12-6, Math.random()*12-6, Math.random()*6-3);
mesh.userData = data;
cloudGroup.add(mesh);
document.getElementById('uuidDisplay').textContent = newId;
document.getElementById('insType').textContent = data.type;
document.getElementById('insDepth').textContent = data.depth;
alert(`NEW GYST UUID v8 SPAWNED\n${newId}`);
};
window.parseLive = () => {
const input = document.getElementById('parseInput').value.trim();
if(input.length < 36) return;
document.getElementById('parsedDisplay').innerHTML = `✓ VALID GYST v8<br>TYPE: 0x510<br>DEPTH: 3<br>NAMESPACE: somacosf.com`;
};
// Populate selects
function populateSelects() {
const genType = document.getElementById('genType');
[0x400,0x501,0x510,0x300].forEach(t => {
const opt = document.createElement('option');
opt.value = t; opt.textContent = `0x${t.toString(16).toUpperCase()}`;
genType.appendChild(opt);
});
const genDomain = document.getElementById('genDomain');
[0,1,2,3,4].forEach(d => {
const opt = document.createElement('option');
opt.value = d; opt.textContent = `DOMAIN ${d}`;
genDomain.appendChild(opt);
});
}
// Controls & resize
function addControls() {
const container = document.getElementById('canvasContainer');
container.addEventListener('mousedown', e=>{isDragging=true; prevX=e.clientX; prevY=e.clientY;});
window.addEventListener('mouseup', ()=>{isDragging=false;});
window.addEventListener('mousemove', e=>{
if(!isDragging || !cloudGroup) return;
cloudGroup.rotation.y += (e.clientX - prevX) * 0.005;
cloudGroup.rotation.x += (e.clientY - prevY) * 0.005;
prevX = e.clientX; prevY = e.clientY;
});
container.addEventListener('wheel', e=>{
camera.position.z = Math.max(8, Math.min(40, camera.position.z + e.deltaY * 0.02));
});
}
window.onload = () => {
initThree();
addControls();
populateSelects();
switchTab(0);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment