xiry.

Development · Web app

COBE

Lightweight 5KB WebGL globe with CSS anchor positioning support

From the Xiry library · Updated 10 October 2026

Visit cobe.vercel.app ↗

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.

What it's 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
Topic
UI Components
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: 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

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated