 e.target.classList.add('visible'); });
}, {threshold:.1,rootMargin:'0px 0px -40px 0px'});
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
// ── CARD HOVER LIFT ──
document.querySelectorAll('.acard').forEach(card => {
const base = card.style.transform;
card.addEventListener('mouseenter', () => {
card.style.transform = base + ' translateY(-6px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = base;
});
});
// ══════════════════════════════════
// GEOCENTRIC ENGINE ANIMATION
// ══════════════════════════════════
const canvas = document.getElementById('cosmos-canvas');
const ctx = canvas.getContext('2d');
const W = 700, H = 700, cx = W/2, cy = H/2;
let running = true;
let t = 0;
let pulseActive = false;
let pulseT = 0;
// Orbital bodies
const bodies = [
// Moon (inner) — tethered shutter
{name:'Moon',r:80,speed:.8,size:7,color:'#9ab0c8',trail:[]},
// Mercury — high gear
{name:'Mercury',r:130,speed:1.4,size:5,color:'#c8a96e',trail:[]},
// Venus — slow drag flywheel
{name:'Venus',r:185,speed:-.55,size:9,color:'#f472b6',trail:[]},
// Sun — mobile spotlight
{name:'Sun',r:260,speed:.22,size:22,color:'#ffd700',glow:true,trail:[]},
// Mars
{name:'Mars',r:330,speed:.18,size:7,color:'#d08aff',trail:[]},
// Jupiter — flywheel/woofer
{name:'Jupiter',r:400,speed:.12,size:16,color:'#4ecdc4',trail:[]},
// Saturn
{name:'Saturn',r:470,speed:.08,size:13,color:'#c8a96e',ring:true,trail:[]},
];
function drawOrbit(r, alpha=0.07){
ctx.beginPath();
ctx.arc(cx,cy,r,0,Math.PI*2);
ctx.strokeStyle=`rgba(255,255,255,${alpha})`;
ctx.lineWidth=.5;
ctx.setLineDash([3,6]);
ctx.stroke();
ctx.setLineDash([]);
}
function drawBody(b, angle){
const x = cx + Math.cos(angle)*b.r;
const y = cy + Math.sin(angle)*b.r;
// Trail
b.trail.push({x,y,a:.4});
if(b.trail.length > 30) b.trail.shift();
b.trail.forEach((pt,i) => {
ctx.beginPath();
ctx.arc(pt.x,pt.y,b.size*.3,0,Math.PI*2);
ctx.fillStyle = b.color + Math.floor((i/b.trail.length)*40).toString(16).padStart(2,'0');
ctx.fill();
});
// Glow
if(b.glow || b.name==='Sun'){
const g = ctx.createRadialGradient(x,y,0,x,y,b.size*3);
g.addColorStop(0,b.color+'88');
g.addColorStop(1,'transparent');
ctx.beginPath();
ctx.arc(x,y,b.size*3,0,Math.PI*2);
ctx.fillStyle=g;
ctx.fill();
}
// Ring (Saturn)
if(b.ring){
ctx.save();
ctx.translate(x,y);
ctx.scale(1,.3);
ctx.beginPath();
ctx.arc(0,0,b.size*2,0,Math.PI*2);
ctx.strokeStyle=b.color+'55';
ctx.lineWidth=3;
ctx.stroke();
ctx.restore();
}
// Body
ctx.beginPath();
ctx.arc(x,y,b.size,0,Math.PI*2);
ctx.fillStyle=b.color;
ctx.fill();
// Label
ctx.fillStyle='rgba(232,228,222,.35)';
ctx.font='9px JetBrains Mono, monospace';
ctx.textAlign='center';
ctx.fillText(b.name,x,y+b.size+12);
}
function drawEarth(pulse){
// Earth glow
const eg = ctx.createRadialGradient(cx,cy,0,cx,cy,40+pulse*15);
eg.addColorStop(0,'rgba(78,205,196,.3)');
eg.addColorStop(.5,'rgba(78,205,196,.1)');
eg.addColorStop(1,'transparent');
ctx.beginPath();
ctx.arc(cx,cy,40+pulse*15,0,Math.PI*2);
ctx.fillStyle=eg;
ctx.fill();
// Earth body
ctx.beginPath();
ctx.arc(cx,cy,18,0,Math.PI*2);
ctx.fillStyle='#1a3a5c';
ctx.fill();
ctx.strokeStyle='#4ecdc4';
ctx.lineWidth=1.5;
ctx.stroke();
// Piezo pulse rings
if(pulse > 0){
for(let i=0;i<3;i++){
const rr = 30 + i*20 + pulse*40;
const aa = Math.max(0, .5 - rr/200) * pulse;
ctx.beginPath();
ctx.arc(cx,cy,rr,0,Math.PI*2);
ctx.strokeStyle=`rgba(78,205,196,${aa})`;
ctx.lineWidth=1;
ctx.stroke();
}
}
// Earth label
ctx.fillStyle='#4ecdc4';
ctx.font='bold 9px JetBrains Mono, monospace';
ctx.textAlign='center';
ctx.fillText('EARTH',cx,cy+32);
ctx.fillStyle='rgba(78,205,196,.5)';
ctx.font='8px JetBrains Mono, monospace';
ctx.fillText('CENTER',cx,cy+42);
}
function drawConnectors(){
// Magnetic tether lines
bodies.forEach((b,i) => {
const angle = b.speed * t + i * .8;
const x = cx + Math.cos(angle)*b.r;
const y = cy + Math.sin(angle)*b.r;
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.lineTo(x,y);
ctx.strokeStyle='rgba(78,205,196,.03)';
ctx.lineWidth=.5;
ctx.stroke();
});
}
function frame(){
ctx.clearRect(0,0,W,H);
// Background
ctx.fillStyle='#030408';
ctx.fillRect(0,0,W,H);
// Stars
ctx.fillStyle='rgba(255,255,255,.4)';
for(let i=0;i<80;i++){
const sx=(Math.sin(i*137.5)*W+W)/2;
const sy=(Math.cos(i*97.3)*H+H)/2;
const ss=Math.sin(t*.3+i)*.5+.5;
ctx.globalAlpha=ss*.4;
ctx.fillRect(sx,sy,1,1);
}
ctx.globalAlpha=1;
// Pulse value
const pulse = pulseActive ? Math.max(0, Math.sin(pulseT*4)) : Math.sin(t*.5)*.15+.1;
if(pulseActive) pulseT += .04;
if(pulseT > Math.PI && pulseActive){ pulseActive=false; pulseT=0; }
drawConnectors();
// Orbits
bodies.forEach(b => drawOrbit(b.r));
// Bodies
bodies.forEach((b,i) => {
const angle = b.speed * t + i * .8;
drawBody(b, angle);
});
// Earth at center
drawEarth(pulse);
// Readout update
const states = ['Aligned','Resonant','Pulsing','Calibrated','Harmonic'];
document.getElementById('rd-state').textContent = states[Math.floor(t*.1)%states.length];
document.getElementById('rd-pulse').textContent = '●'.repeat(Math.floor(pulse*5+1)) + ' 5.18Hz';
if(running){
t += .008;
requestAnimationFrame(frame);
}
}
frame();
document.getElementById('btn-play').addEventListener('click',function(){
if(!running){ running=true; t+=.001; frame(); }
this.classList.add('active');
document.getElementById('btn-pause').classList.remove('active');
});
document.getElementById('btn-pause').addEventListener('click',function(){
running=false;
this.classList.add('active');
document.getElementById('btn-play').classList.remove('active');
});
document.getElementById('btn-pulse').addEventListener('click',function(){
pulseActive=true; pulseT=0;
this.style.borderColor='var(--teal)';
setTimeout(()=>this.style.borderColor='',2000);
});
</script>
</body>
</html>)
S.O.N. · Spirit of Numbers · OceansE=mEDia
A mind that reads
what the text was built to carry
Tap any annotation. Tap the center orb for the framework map.
Cap 01
Associative Precision
"Reads values already present in the structure of names, letters, weights."
↗ tap to expand
Cap 02
Metacognitive Neutrality
"He recognized it as a signal — not a personal achievement."
↗ tap to expand
Cap 03
Tolerance for Tension
"A living methodology — each symbol defined, then allowed to grow."
↗ tap to expand
Cap 04
Somatic Recognition
"Numbers feel like something. Characters in scripture have weight."
↗ tap to expand
Cap 05
Forensic Reconstruction
"Two voices. Two postures. The text distinguishes them."
↗ tap to expand
Cap 06
Systems Convergence
"Coincidence has a ceiling. S.O.N. is above that ceiling."
↗ tap to expand
Cap 07
Participatory Epistemology
"The human link completes the circuit."
↗ tap to expand
Cap 08
Training Architecture
"The outputs weren't products. They were the prerequisite."
↗ tap to expand
Framework tap to navigate