# COBE

> Lightweight 5KB WebGL globe with CSS anchor positioning support

COBE is an ultra-lightweight, zero-dependency WebGL globe library that renders interactive dotted 3D globes. In version 2, it integrates with the CSS Anchor Positioning API, exposing anchor points and visibility CSS variables so you can bind standard HTML elements like badges, tooltips, and cards directly to 3D coordinates.

Website: https://cobe.vercel.app/

## What it is for

- Display global office locations or data center networks on a landing page
- Visualize flight paths or network traffic using curved 3D arcs between coordinates
- Attach interactive DOM cards, badges, and tooltips to 3D globe coordinates using native CSS

## Features

- Ultra-lightweight bundle size around 5KB with zero runtime dependencies
- Native CSS anchor positioning support via exposed \`--cobe-{id}\` anchors
- Automatic visibility CSS variables (\`--cobe-visible-{id}\`) to hide or fade markers behind the horizon
- Configurable 3D curved connecting arcs with customizable height, thickness, and color
- Fully customizable dot-matrix density, diffuse lighting, glow, and dark mode presets
- Framework-agnostic design compatible with vanilla JavaScript, React, Vue, and Svelte

## Pricing

Open source. Free and open source

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Frontend developers looking for a lightweight, performant 3D globe without heavy WebGL frameworks
- Alternative to: globe.gl, Three.js
- Tags: webgl, javascript, dataviz, css, frontend, canvas

## Why it was saved

- [@shuding, 15 March 2026](https://x.com/shuding/status/2033146453586296980): COBE v2 is a tool one would use to add a stylish interactive 3D dotted globe (like the demo: city labels, satellite icons, live badges, flight arcs) to a website with CSS-native anchoring instead of JS positioning.

## Compare

- [Alternatives to Three.js](https://xiry.app/alternatives/three-js.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/cobe

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.