{"_id":"@automuxer/cobe","name":"@automuxer/cobe","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@automuxer/cobe","version":"0.1.0","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/reesericci/cobe.git"},"license":"MIT","scripts":{"build":"node ../node_modules/.bin/tsdown && cp src/index.d.ts dist/index.d.ts","chrome:debug":"open -na \"Google Chrome\" --args --new-window --disable-frame-rate-limit --user-data-dir=\"/tmp/chrome_dev_session\" --disable-web-security http://localhost:3000/playground"},"devDependencies":{"esbuild":"^0.13.14","glslx":"^0.3.0","next":"^12.2.4","react":"^18.2.0","react-dom":"^18.2.0","tsdown":"^0.22.3","typescript":"^4.5.4"},"packageManager":"pnpm@8.7.0+sha512.1d61f8c10e8a5a5dbfbddea0f1f5efb7dbd5177223073aec953cf230aa46416884b9427a6421dba78f28ad0f93fbede38ba57083237b350243de6b1e3a8ce71d","_id":"@automuxer/cobe@0.1.0","description":"[![COBE](card.png)](https://cobe.vercel.app)","bugs":{"url":"https://github.com/reesericci/cobe/issues"},"homepage":"https://github.com/reesericci/cobe#readme","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-5R6EPKsIWgYPMPosERr79TBGEH0H7gmoS3WdRghM941MmwiTInT+Yqd4j7fsjjPoSKSSFnjnp0MyWivYTXxq4g==","shasum":"828af746fb030d791dafbe569499d4135b6c2b7a","tarball":"https://registry.npmjs.org/@automuxer/cobe/-/cobe-0.1.0.tgz","fileCount":5,"unpackedSize":21319,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDsmw+N5j3nBNOldVxUj9NrPQFn8mfwvNsGZdGLZO+hmgIgdGACtn/LYGXQReNfFp9tbQ7DGeMPTn01cupTT+ECJOI="}]},"_npmUser":{"name":"reesericci","email":"me@reeseric.ci"},"directories":{},"maintainers":[{"name":"reesericci","email":"me@reeseric.ci"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cobe_0.1.0_1783112386177_0.07133710143807837"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-03T20:59:46.012Z","0.1.0":"2026-07-03T20:59:46.356Z","modified":"2026-07-03T20:59:46.607Z"},"maintainers":[{"name":"reesericci","email":"me@reeseric.ci"}],"description":"[![COBE](card.png)](https://cobe.vercel.app)","homepage":"https://github.com/reesericci/cobe#readme","repository":{"type":"git","url":"git+https://github.com/reesericci/cobe.git"},"bugs":{"url":"https://github.com/reesericci/cobe/issues"},"license":"MIT","readme":"[![COBE](card.png)](https://cobe.vercel.app)\n\n> [!NOTICE]\n> This is the Automuxer *fork* that includes bubbling anchorUpdate events and transitions to Rolldown.\n\n

Use any DOM element as bindable markers.
CSS transitions, animations, filters, interactivity, all just work.

\n\n

High perf, zero deps, ~5KB.

\n\n

\n \n

\n\n---\n\n- [**Demo** and configurations](https://cobe.vercel.app)\n\n## Quick Start\n\n```html\n\n```\n\n```js\nimport createGlobe from 'cobe'\n\nlet phi = 0\nlet canvas = document.getElementById(\"cobe\")\n\nconst globe = createGlobe(canvas, {\n devicePixelRatio: 2,\n width: 1000,\n height: 1000,\n phi: 0,\n theta: 0,\n dark: 0,\n diffuse: 1.2,\n scale: 1,\n mapSamples: 16000,\n mapBrightness: 6,\n baseColor: [0.3, 0.3, 0.3],\n markerColor: [1, 0.5, 1],\n glowColor: [1, 1, 1],\n offset: [0, 0],\n markers: [\n { location: [37.7595, -122.4367], size: 0.03 },\n { location: [40.7128, -74.006], size: 0.1, color: [1, 0, 0] }, // custom color\n ],\n arcs: [\n {\n from: [37.7595, -122.4367],\n to: [40.7128, -74.006],\n color: [1, 0.5, 0.5], // custom color (optional)\n },\n ],\n arcColor: [1, 0.5, 1],\n arcWidth: 0.5,\n arcHeight: 0.3,\n markerElevation: 0.02,\n onRender: (state) => {\n // Called on every animation frame.\n // `state` will be an empty object, return updated params.\n state.phi = phi\n phi += 0.01\n },\n})\n\n// To destroy the instance and bindings:\n// `globe.destroy()`\n```\n\n## Arcs\n\nArcs connect two locations on the globe:\n\n```js\narcs: [\n {\n from: [37.7595, -122.4367],\n to: [35.6762, 139.6503],\n color: [1, 0.5, 0.5], // optional, uses arcColor if not set\n },\n]\n```\n\n## Bindable Markers & Arcs\n\nMarkers and arcs can have an `id` property for [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning):\n\n```js\nmarkers: [\n { location: [37.7595, -122.4367], size: 0.03, id: 'sf' },\n],\narcs: [\n { from: [37.7595, -122.4367], to: [35.6762, 139.6503], id: 'sf-tokyo' },\n]\n```\n\n```css\n.marker-label {\n position: absolute;\n position-anchor: --cobe-sf;\n bottom: anchor(top);\n left: anchor(center);\n opacity: var(--cobe-visible-sf, 0);\n filter: blur(calc((1 - var(--cobe-visible-sf, 0)) * 8px));\n transition: opacity 0.3s, filter 0.3s;\n}\n\n.arc-label {\n position: absolute;\n position-anchor: --cobe-arc-sf-tokyo;\n bottom: anchor(top);\n left: anchor(center);\n opacity: var(--cobe-visible-arc-sf-tokyo, 0);\n}\n```\n\nThe globe exposes:\n- `--cobe-{id}` / `--cobe-arc-{id}` — CSS anchor names for positioning\n- `--cobe-visible-{id}` / `--cobe-visible-arc-{id}` — visibility variable (0 when behind globe, 1 when visible)\n\nUse the visibility variable to drive opacity, blur, scale, or any CSS property for smooth transitions.\n\n## Events\n\nWhen an anchor is updated (such as position or visibility), the anchor emits a bubbling `anchorUpdate` event. This event can then be captured from the globe wrapper to monitor anchor changes from JavaScript to run functions such as custom animations.\n\n## Acknowledgment\n\nThis project is inspired & based on the great work of:\n\n- [Spherical Fibonacci Mapping](https://dl.acm.org/doi/10.1145/2816795.2818131), Benjamin Keinert et al.\n- https://www.shadertoy.com/view/lllXz4, Inigo Quilez\n- https://github.blog/2020-12-21-how-we-built-the-github-globe\n- https://github.com/vaneenige/phenomenon\n- https://github.com/evanw/glslx\n\nWorld map asset from:\n\n- https://de.wikipedia.org/wiki/Datei:World_map_blank_without_borders.svg\n\n## License\n\nThe MIT License.\n","readmeFilename":"README.md","_rev":"1-93c9a4d062fb476493268b1a515ba704"}