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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user