feat(loader): real Natural Earth globe via d3-geo + topojson + world-atlas

Per user — GlobeLoader должен показывать реальные континенты (Asia/Africa/
Australia outline) с rotating orthographic projection, как в прототипе
Downloads/Globe loader/Globe Loader.html. Прошлая версия использовала
faked ellipses graticule — выглядело как абстрактные кольца, не как глобус.

Implementation:
- d3-geo.geoOrthographic + d3.geoPath для projection math
- topojson-client.feature для распаковки world-atlas land-110m
- dynamic import обоих deps + JSON — не блокирует main bundle, lazy chunk
- requestAnimationFrame loop пересчитывает d-attr на каждом кадре
  (8s per revolution per прототип, tilt -15° lean)
- LAND_CACHE module-level — повторные mount'ы не re-fetch
- CSS .globe-sphere rotation удалена — d3 projection делает работу,
  CSS transform distort'ила бы land mass (нет projection math)

Bundle hit: ~55kb (land-110m.json) + ~15kb gzipped (d3-geo + topojson) —
lazy chunk, fetched один раз и cached.
This commit is contained in:
Zimin A.N.
2026-05-11 22:39:58 +03:00
parent e165a552aa
commit acde4e134d
4 changed files with 223 additions and 49 deletions
+4 -7
View File
@@ -399,16 +399,13 @@ body {
transform-box: fill-box;
animation: ord-globe-pulse 2.4s ease-in-out infinite;
}
.globe-loader .globe-sphere {
transform-origin: 100px 100px;
transform-box: fill-box;
animation: ord-globe-spin 14s linear infinite;
}
/* Sphere/land внутри globe-loader rotates через d3 projection (rAF
* пересчитывает path d-attr), не через CSS transform — иначе land
* distort'илась бы при rotation (no projection math). */
@media (prefers-reduced-motion: reduce) {
.globe-loader .globe-whirl,
.globe-loader .globe-whirl-rev,
.globe-loader .globe-pulse,
.globe-loader .globe-sphere {
.globe-loader .globe-pulse {
animation: none;
}
}