[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71417":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},71417,"cobe","shuding\u002Fcobe","shuding","5KB WebGL globe lib.","https:\u002F\u002Fcobe.vercel.app",null,"TypeScript",5367,312,17,29,0,10,43,126,30,113.49,"MIT License",false,"main",[26,27],"globe","webgl","2026-06-12 04:01:00","[![COBE](card.png)](https:\u002F\u002Fcobe.vercel.app)\n\n\u003Cp align=\"center\">Use any DOM element as bindable markers.\u003Cbr\u002F>CSS transitions, animations, filters, interactivity, all just work.\u003C\u002Fp>\n\n\u003Cp align=\"center\">High perf, zero deps, ~5KB.\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cvideo src=\"ideas-1_4x.mp4\" poster=\"card.png\" autoplay loop muted playsinline width=\"600\">\u003C\u002Fvideo>\n\u003C\u002Fp>\n\n---\n\n- [**Demo** and configurations](https:\u002F\u002Fcobe.vercel.app)\n\n## Quick Start\n\n```html\n\u003Ccanvas\n  id=\"cobe\"\n  style=\"width: 500px; height: 500px;\"\n  width=\"1000\"\n  height=\"1000\"\n>\u003C\u002Fcanvas>\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] }, \u002F\u002F 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], \u002F\u002F 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    \u002F\u002F Called on every animation frame.\n    \u002F\u002F `state` will be an empty object, return updated params.\n    state.phi = phi\n    phi += 0.01\n  },\n})\n\n\u002F\u002F To destroy the instance and bindings:\n\u002F\u002F `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], \u002F\u002F 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:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_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}` \u002F `--cobe-arc-{id}` — CSS anchor names for positioning\n- `--cobe-visible-{id}` \u002F `--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## Acknowledgment\n\nThis project is inspired & based on the great work of:\n\n- [Spherical Fibonacci Mapping](https:\u002F\u002Fdl.acm.org\u002Fdoi\u002F10.1145\u002F2816795.2818131), Benjamin Keinert et al.\n- https:\u002F\u002Fwww.shadertoy.com\u002Fview\u002FlllXz4, Inigo Quilez\n- https:\u002F\u002Fgithub.blog\u002F2020-12-21-how-we-built-the-github-globe\n- https:\u002F\u002Fgithub.com\u002Fvaneenige\u002Fphenomenon\n- https:\u002F\u002Fgithub.com\u002Fevanw\u002Fglslx\n\nWorld map asset from:\n\n- https:\u002F\u002Fde.wikipedia.org\u002Fwiki\u002FDatei:World_map_blank_without_borders.svg\n\n## License\n\nThe MIT License.\n","COBE 是一个轻量级的 WebGL 地球仪库，大小仅约 5KB。它支持将任何 DOM 元素作为可绑定的标记点，并且兼容 CSS 过渡、动画、滤镜和交互性功能。COBE 的高性能和零依赖特性使其非常适合在网页上展示地球仪效果，如地理信息可视化或数据展示等场景。通过简单的配置，用户可以自定义地球的颜色、标记点的位置与样式以及连接不同地点的弧线，实现丰富的视觉表现。",2,"2026-06-11 03:37:37","high_star"]