SHA256
Связи: полировка карты связей (свечение, прорастание линий, CSS-фильтры)
- Линии: тонкие дуги Безье (градиент неон-центр → цвет роли); связь к «сияющему» монолитно светится статичной тенью drop-shadow (без бегущих импульсов). - Прорастание новых линий из центра: stroke-dasharray/dashoffset синхронно с разлётом узла (кончик трекает аватарку); старые линии исчезают мгновенно. - Ghost-слой: только аватарки (без линий), 1000мс — нет висящих «ошмётков». - CSS-bloom разлёта на компоновщике (устойчив к троттлингу rAF; завершение по таймеру). - Сияющие узлы: мягкая медленная пульсация 3.6с (многослойная box-shadow + SVG-ореол); тестовые фото-аватарки. - Фильтры слоёв в лаборатории + фикс перехвата click сценой (stopPropagation на чипах); фейд скрываемых на месте (opacity 0 + scale 0.8, 300мс), фиксация без физики (ноль тряски). - Бамп client.version → 1.2.137; обновлена документация фичи. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -37,6 +37,12 @@
|
||||
transition: opacity 420ms ease; /* плавное появление линий при перестройке */
|
||||
}
|
||||
|
||||
/* Связь к «сияющему» узлу — МОНОЛИТНО светится мягким неоном (тот же приём, что у ободка аватарки):
|
||||
статичная двухслойная тень через drop-shadow. Никакой динамики, бегущих точек и пульсаций. */
|
||||
.fg-edge-shine {
|
||||
filter: drop-shadow(0 0 3px rgba(140, 235, 255, 0.75)) drop-shadow(0 0 6px rgba(110, 225, 255, 0.4));
|
||||
}
|
||||
|
||||
.fg-node {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -99,24 +105,52 @@
|
||||
box-shadow: 0 0 0 3px rgba(77, 160, 255, 0.22), 0 8px 16px rgba(4, 8, 15, 0.35);
|
||||
}
|
||||
|
||||
/* пульсирующее свечение «сияющих» узлов */
|
||||
/* «Сияние» — мягкое живое свечение НА УЗЛЕ (аватарке), а не на линии связи.
|
||||
Многослойная анимированная box-shadow + размытый радиальный ореол (через внешний SVG-фильтр).
|
||||
Пульсация очень медленная и плавная (3.6с): радиус и прозрачность «дышат» 0.5 ↔ 1.0 —
|
||||
как мягкое свечение живого организма в темноте, а не «жирный маркер». */
|
||||
.fg-node.is-shine .node-dot {
|
||||
border-color: rgba(150, 240, 255, 0.62);
|
||||
animation: fg-shine-glow 3.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* размытый радиальный ореол позади аватарки; внешний SVG-фильтр даёт мягкое гауссово размытие */
|
||||
.fg-node.is-shine .node-dot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -12px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(130, 235, 255, 0.6) 0%, rgba(130, 235, 255, 0.26) 44%, rgba(130, 235, 255, 0) 76%);
|
||||
filter: blur(2px);
|
||||
background: radial-gradient(circle, rgba(140, 240, 255, 0.5) 0%, rgba(130, 235, 255, 0.18) 46%, rgba(130, 235, 255, 0) 72%);
|
||||
filter: url(#fg-shine-glow);
|
||||
z-index: -1;
|
||||
animation: fg-shine-pulse 2.4s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
animation: fg-shine-halo 3.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes fg-shine-pulse {
|
||||
0%, 100% { transform: scale(0.92); opacity: 0.5; }
|
||||
50% { transform: scale(1.16); opacity: 0.95; }
|
||||
/* пульсация многослойной тени: компактное приглушённое → широкое мягкое свечение */
|
||||
@keyframes fg-shine-glow {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 5px rgba(125, 232, 255, 0.30),
|
||||
0 0 11px rgba(112, 226, 255, 0.18),
|
||||
0 0 20px rgba(100, 220, 255, 0.10);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 9px rgba(150, 245, 255, 0.62),
|
||||
0 0 20px rgba(122, 236, 255, 0.42),
|
||||
0 0 36px rgba(100, 220, 255, 0.26);
|
||||
}
|
||||
}
|
||||
|
||||
/* ореол дышит размером и прозрачностью синхронно с тенью (мягко, без рывков) */
|
||||
@keyframes fg-shine-halo {
|
||||
0%, 100% { transform: scale(0.9); opacity: 0.5; }
|
||||
50% { transform: scale(1.12); opacity: 1; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fg-node.is-shine .node-dot { animation: none; }
|
||||
.fg-node.is-shine .node-dot::before { animation: none; }
|
||||
}
|
||||
|
||||
@@ -230,7 +264,8 @@
|
||||
z-index: 0;
|
||||
opacity: 0.5; /* стартовая прозрачность шлейфа выше → дольше читается (JS уводит в 0) */
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
/* лениво и породисто тает на месте за 1000мс — медленный дорогой шлейф истории перехода */
|
||||
transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1000ms ease;
|
||||
}
|
||||
|
||||
/* Импульс центрального кольца при захвате нового фокуса */
|
||||
|
||||
Reference in New Issue
Block a user