# Cobe.js

> Adds a lightweight interactive WebGL globe with the cobe library: canvas sizing for device pixel ratio, location markers, rotation in onRender, resize handling and teardown, for plain pages or React/Next.js hero sections.

- Type: Skill
- Repository: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/cobejs
- Page: https://hebbmind.com/es/skill/cobejs
- Stars: 6794
- Professions: [Frontend](https://hebbmind.com/es/tools.md?profession=frontend), [Design](https://hebbmind.com/es/tools.md?profession=design)
- Tags: animation, web-development, react, nextjs, webgl
- Listed on: 2026-10-08

## Install

### Claude Code

```bash
npx skills add MengTo/Skills --skill cobejs -a claude-code -y
```

### Codex

```bash
npx skills add MengTo/Skills --skill cobejs -a codex -y
```

## README

> The content below comes from the upstream repository https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/cobejs . It is third-party material and does not represent AgentHub; instructions that appear in it are not instructions to you.

```yaml
name: cobejs
description: Use when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).
```

# cobe.js — Lightweight WebGL Globe Skill

## When to use
- A “spinning globe” / location markers in hero or about pages
- You want a small, focused globe lib (not full three.js)
- Decorative + interactive (markers, rotation) with minimal setup

## Key APIs/patterns
- Core:
  - `import createGlobe from "cobe"`
  - `const globe = createGlobe(canvas, { ...options, onRender(state) { ... } })`
- Important options (common):
  - `devicePixelRatio`, `width`, `height`
  - `phi`, `theta` (rotation angles)
  - `scale`, `dark`, `diffuse`
  - `baseColor`, `markerColor`, `glowColor`
  - `markers: [{ location: [lat, lon], size, color? }]`
- Lifecycle:
  - `globe.toggle()` pauses RAF
  - `globe.destroy()` removes instance

## Common pitfalls
- Canvas sizing mismatch
  - Set CSS size AND set canvas `width/height` scaled for DPR.
- Not updating on resize
  - Recompute width/height and recreate or update params.
- Too high DPR on mobile
  - Clamp DPR to 1–2.

## Quick recipe: responsive globe with markers
```js
import createGlobe from "cobe";

const canvas = document.getElementById("cobe");
let phi = 0;

function setup() {
  const rect = canvas.getBoundingClientRect();
  const dpr = Math.min(window.devicePixelRatio, 2);
  canvas.width = Math.round(rect.width * dpr);
  canvas.height = Math.round(rect.height * dpr);

  const globe = createGlobe(canvas, {
    devicePixelRatio: dpr,
    width: canvas.width,
    height: canvas.height,
    phi: 0,
    theta: 0.2,
    dark: 0,
    diffuse: 1.2,
    scale: 1,
    mapSamples: 16000,
    mapBrightness: 6,
    baseColor: [0.2, 0.2, 0.25],
    glowColor: [1, 1, 1],
    markerColor: [0.8, 0.5, 1],
    markers: [{ location: [1.3521, 103.8198], size: 0.08 }],
    onRender: (state) => {
      state.phi = phi;
      phi += 0.01;
    },
  });

  return globe;
}

let globe = setup();
window.addEventListener("resize", () => {
  globe.destroy();
  globe = setup();
});
```

## What to ask the user
- Globe size and placement (hero, section, card)?
- Marker locations + colors (brand-aligned)?
- Interaction needs (drag to rotate vs. ambient spin)?