bingshuo/hololake-system-architecture
Watch
1
0
Fork
You've already forked hololake-system-architecture
 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

planet v4：可见自转+脉络（语言世界的经脉）

Browse source 
冰朔反馈v3不转/无脉络/单调。修：SVG脉络层7条发光经脉（冷暖交织+辉光，
width 200% 26s无缝环移=可见自转）；云带提速80s→26s并增强对比；mask放宽。
双动画同频26s。结构验证：veins 7 paths + fph-veins-flow/fph-surf-pan running。
This commit is contained in:
冰朔 2026-08-26 09:11:00 +08:00
commit de864945c1
2 changed files with 46 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

12
build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/FirstPlanetHome.tsx
View file

@ -191,7 +191,17 @@ export function FirstPlanetHome() {
))}
{/* 立体悬浮星球 */}
<div className="fph-planet">
<i className="surf" />
<i className="surf">
<svg className="veins" viewBox="0 0 200 100" preserveAspectRatio="none" aria-hidden="true">
<path d="M0,22 C30,16 60,28 95,21 S150,14 200,22" />
<path d="M0,38 C35,32 70,44 105,37 S160,30 200,38" className="warm" />
<path d="M0,52 C40,46 75,58 110,51 S165,44 200,52" />
<path d="M0,66 C30,60 65,72 100,65 S155,58 200,66" className="warm" />
<path d="M0,80 C38,74 72,86 108,79 S162,72 200,80" />
<path d="M0,10 C45,6 85,16 125,9 S175,5 200,10" className="faint" />
<path d="M0,92 C42,86 80,96 118,90 S168,84 200,92" className="faint" />
</svg>
</i>
{specks.map((sp) => (
<i key={sp.id} className={`speck${sp.warm ? ' warm' : ''}`} style={{ left: `${sp.x}%`, top: `${sp.y}%`, width: sp.s, height: sp.s, '--tw-d': `${sp.d}s`, '--tw-dl': `${sp.dl}s` } as React.CSSProperties} />
))}

50
build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/first-planet-home.css
View file

@ -124,26 +124,46 @@
}
@keyframes fph-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
/* 表面纹理：云带+陆块，慢速平移=自转错觉；球形遮罩让边缘收窄 */
/* 表面：云带+脉络（SVG经脉），26s 环移=可见自转 */
.fph-planet .surf {
position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
background:
repeating-linear-gradient(100deg,
transparent 0 26px,
color-mix(in srgb, var(--primitive-glass-top) 9%, transparent) 26px 34px,
transparent 34px 60px,
color-mix(in srgb, var(--primitive-nebula-a) 26%, transparent) 60px 74px,
transparent 74px 108px),
repeating-radial-gradient(circle at 40% 60%,
repeating-linear-gradient(96deg,
transparent 0 18px,
color-mix(in srgb, var(--primitive-cool-glow) 12%, transparent) 18px 24px,
transparent 24px 44px);
opacity: .6;
-webkit-mask: radial-gradient(circle at 42% 38%, #000 30%, color-mix(in srgb, #000 55%, transparent) 62%, transparent 78%);
mask: radial-gradient(circle at 42% 38%, #000 30%, color-mix(in srgb, #000 55%, transparent) 62%, transparent 78%);
animation: fph-surf-pan 80s linear infinite;
color-mix(in srgb, var(--primitive-glass-top) 16%, transparent) 18px 26px,
transparent 26px 44px,
color-mix(in srgb, var(--primitive-nebula-a) 42%, transparent) 44px 58px,
transparent 58px 84px),
repeating-radial-gradient(circle at 42% 58%,
transparent 0 14px,
color-mix(in srgb, var(--primitive-cool-glow) 20%, transparent) 14px 20px,
transparent 20px 34px);
opacity: .85;
-webkit-mask: radial-gradient(circle at 40% 36%, #000 44%, color-mix(in srgb, #000 62%, transparent) 70%, transparent 86%);
mask: radial-gradient(circle at 40% 36%, #000 44%, color-mix(in srgb, #000 62%, transparent) 70%, transparent 86%);
animation: fph-surf-pan 26s linear infinite;
}
@keyframes fph-surf-pan { from { background-position: 0 0, 0 0; } to { background-position: 240px 0, -160px 0; } }
@keyframes fph-surf-pan { from { background-position: 0 0, 0 0; } to { background-position: 168px 0, -112px 0; } }
/* 脉络：语言世界的经脉，随球自转流动；首尾同形可无缝环移 */
.fph-planet .surf .veins {
position: absolute; top: 0; left: 0; height: 100%; width: 200%;
animation: fph-veins-flow 26s linear infinite;
}
@keyframes fph-veins-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fph-planet .veins path {
fill: none;
stroke: color-mix(in srgb, var(--primitive-cool-glow) 62%, transparent);
stroke-width: 0.7;
filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--primitive-cool-glow) 70%, transparent));
opacity: .75;
}
.fph-planet .veins path.warm {
stroke: color-mix(in srgb, var(--primitive-warm-glow) 66%, transparent);
filter: drop-shadow(0 0 1.8px color-mix(in srgb, var(--primitive-warm-glow) 75%, transparent));
opacity: .8;
}
.fph-planet .veins path.faint { stroke-width: 0.45; opacity: .4; }
/* 球面光点：文明/星群微光，只落在受光面 */
.fph-planet .speck {