 Maxim Dolgolyov
|
77e4dffb43
|
feat(phys8): Phase 0 redesign foundation — CSS + JS infrastructure
Закладывает уникальный визуальный язык и engine'ы для редизайна Физики 8.
CSS:
- phys8-design-system.css (12 КБ): 3 темы (thermal/electric/spectrum),
тематические hero-палитры, watermarks, animations (thermal-shift,
electric-pulse, spectrum-drift, wm-breathe/flicker/rotate, noise overlay),
staggered fade-in для виджетов, soft elevation на карточках,
monospace для физ. величин, topic-aware progress bars,
mobile responsive (≤768px), prefers-reduced-motion.
- phys8-interactives.css (10 КБ): .p8-draggable + .p8-droptarget с
hover-effects, .p8-palette (для circuit-builder), .p8-scrubber,
.p8-readout табло, .p8-tooltip, .p8-sandbox canvas wrapper,
.p8-thermometer + .p8-compass-needle SVG-композиции, glow-utility.
JS:
- phys8-anim.js (6 КБ): easing-функции (quad/cubic/expo/back/elastic/
bounce/spring), tween-engine с onUpdate/onComplete, raf-wrapper,
oscillate, stagger, onVisible (IntersectionObserver). Экспорт P8Anim.
- phys8-drag.js (12 КБ): универсальный drag-engine. P8Drag.attach()
для DOM/SVG, P8Drag.attachCanvas() для логических объектов с
hit-test, P8Drag.attachPalette() для drag-from-palette-to-drop,
constraints (lockX/Y, bounds, snap-to-grid), touch + mouse + pointer.
- phys8-helpers.js (18 КБ): тематические хелперы. P8Helpers.thermal
(tempColor 0-1, heatFlowArrow, molecule, thermometerSVG,
convectionCellParticles), .em (chargeSVG, circuitComponent для
battery/resistor/lamp/ammeter/voltmeter/switch, fieldLineFrom),
.optics (rayLine, lensSVG converging/diverging, mirrorPlane),
.svg utils (el, create, linearGradient, radialGradient,
gradientArrow, labeledText).
Линковка (redesign_p8_phase0.cjs):
- 2 CSS-link после katex CDN
- 3 JS-link после phys.js/xp.js
- body class p8-theme-thermal/electric/spectrum на ch1/ch2/ch3
- hub и lab — без темы (нейтральный пурпурный brand)
|
2026-05-30 09:55:00 +03:00 |
|