<!-- FRAMER EMBED: Rotating B/W Globe (works out of the box) -->

<section class="globe-embed" aria-hidden="true" style="position:relative;width:100%;height:100%;min-height:320px;margin:0;padding:0;line-height:0;background:#000;overflow:hidden;">

<canvas style="position:absolute;inset:0;width:100%;height:100%;display:block;"></canvas>

</section>

<script>

/* No-ID, no-conflicts, fills parent, zero margins/padding */

(function () {

const wrap = document.currentScript.previousElementSibling;

const canvas = wrap.querySelector('canvas');

const ctx = canvas.getContext('2d', { alpha: true });

// ===== Tunables =====

const COLOR_LINES = 'rgba(255,255,255,0.22)';

const COLOR_FRONT = 'rgba(255,255,255,0.58)';

const BG_GLOW = 'rgba(255,255,255,0.08)';

const ROT_SPEED = 0.35;

const LON_STEP = 15;

const LAT_STEP = 15;

const SEG_STEP = 5;

// 배치/크기 (0~1)

const ALIGN_X = 0.5; // 0=left ~ 1=right

const ALIGN_Y = 0.5; // 0=top ~ 1=bottom

const RATIO = 0.46; // radius = min(w,h)*RATIO

let dpr = Math.max(1, Math.min(window.devicePixelRatio || 1, 2));

let w=0,h=0,cx=0,cy=0,R=0,cam=0;

function resize() {

const rect = wrap.getBoundingClientRect();

const cssW = Math.max(1, rect.width);

const cssH = Math.max(1, rect.height);

const W = Math.round(cssW * dpr);

const H = Math.round(cssH * dpr);

if (canvas.width !== W || canvas.height !== H) {

canvas.width = W; canvas.height = H;

ctx.setTransform(dpr,0,0,dpr,0,0); // 1 CSS px = 1 unit

}

w = cssW; h = cssH;

R = Math.min(w, h) * RATIO;

cx = w * ALIGN_X;

cy = h * ALIGN_Y;

cam = R * 3.2;

}

resize();

// 레이아웃 변화 대응

new ResizeObserver(resize).observe(wrap);

const rad = d => d * Math.PI / 180;

function project(lambda, phi, rot) {

const cl = Math.cos(lambda + rot), sl = Math.sin(lambda + rot);

const cp = Math.cos(phi), sp = Math.sin(phi);

const x = R * cl * cp;

const y = R * sp;

const z = R * -sl * cp;

const s = cam / (cam - z);

return { x: cx + x * s, y: cy + y * s, z };

}

function strokeVisiblePath(pts) {

let drawing = false;

for (let i=0;i<pts.length;i++){

const p = pts[i];

if (p.z > 0) { // front

ctx.strokeStyle = COLOR_FRONT;

ctx.lineWidth = 1.25;

if (!drawing) { ctx.beginPath(); ctx.moveTo(p.x,p.y); drawing = true; }

else ctx.lineTo(p.x,p.y);

} else if (drawing) {

ctx.stroke(); drawing = false;

}

}

if (drawing) ctx.stroke();

}

let tPrev = performance.now()/1000, rot = 0;

function draw(now) {

const t = now/1000, dt = t - tPrev; tPrev = t;

rot += ROT_SPEED * dt;

ctx.clearRect(0,0,canvas.width/dpr,canvas.height/dpr);

// glow

const g = ctx.createRadialGradient(cx,cy, R*0.72, cx,cy, R*1.06);

g.addColorStop(0,'rgba(255,255,255,0)');

g.addColorStop(1,BG_GLOW);

ctx.fillStyle = g;

ctx.beginPath(); ctx.arc(cx,cy,R*1.06,0,Math.PI*2); ctx.fill();

// sphere outline

ctx.strokeStyle = 'rgba(255,255,255,0.22)';

ctx.lineWidth = 1.2;

ctx.beginPath(); ctx.arc(cx,cy,R,0,Math.PI*2); ctx.stroke();

// latitudes

for (let lat=-90+LAT_STEP; lat<=90-LAT_STEP; lat+=LAT_STEP){

const pts = [];

for (let lon=-180; lon<=180; lon+=SEG_STEP) pts.push(project(rad(lon), rad(lat), rot));

strokeVisiblePath(pts);

ctx.strokeStyle = COLOR_LINES; ctx.lineWidth = 0.85; // back guideline style

}

// longitudes

for (let lon=-180; lon<=180; lon+=LON_STEP){

const pts = [];

for (let lat=-90; lat<=90; lat+=SEG_STEP) pts.push(project(rad(lon), rad(lat), rot));

strokeVisiblePath(pts);

ctx.strokeStyle = COLOR_LINES; ctx.lineWidth = 0.85;

}

// center soft spot

const spot = ctx.createRadialGradient(cx,cy,0, cx,cy,R*0.9);

spot.addColorStop(0,'rgba(255,255,255,0.06)');

spot.addColorStop(1,'rgba(255,255,255,0.00)');

ctx.fillStyle = spot;

ctx.beginPath(); ctx.arc(cx,cy,R,0,Math.PI*2); ctx.fill();

requestAnimationFrame(draw);

}

requestAnimationFrame(draw);

})();

</script>