Архитектура данных: ISR + динамический CMS-контент Контент (SEO, блоки главной, текстовые страницы, футер, конфигуратор) приходит из backend-API. Проблема Нужны SEO, скорость и актуальность без полного rebuild при каждом изменении в CMS. Решение ISR с коротким revalidate — все страницы через getStaticProps + revalidate: 5: export const getStaticProps = async () => { try { const [ { data: { seo, content } }, { data: { address, max, telephone, ... } }, bannerResult, { data: { configurator } }, ] = await Promise.all([ mainRequests.getMainPage(), footerRequests.getFooter(), mainRequests.getMainBanner(), footerRequests.getHeaderConfigurator(), ]); return { props: { ... }, revalidate: 5 }; } catch (error) { return { notFound: true }; } }; Динамические CMS-страницы — getStaticPaths + fallback: 'blocking': export const getStaticPaths: GetStaticPaths = async () => { const slugs = await commonRequests.getAllPages(); const paths = slugs.data.map((slug: string) => ({ params: { slug }, })); return { paths, fallback: 'blocking' }; }; ISR с revalidate: 5 — страница статическая (CDN, SEO), обновляется каждые 5 секунд при следующем запросе. fallback: 'blocking' — новые CMS-страницы без деплоя. Promise.all параллелит запросы. dmask.ru

Canvas2D-анимация в React с адаптивным масштабированием Секция «Старые методы» — декоративная Canvas-анимация: пиксельная «собака» ходит по экрану, сверху падают кубики. На широких мониторах (>1600px) сайт масштабируется пропорционально. Проблема ⏺️ корректный devicePixelRatio (четкость на Retina); ⏺️ синхронизация с CSS --zoom для ultra-wide; ⏺️ ResizeObserver вместо window.resize; ⏺️ чистый dispose (cancelAnimationFrame, disconnect observer). Решение Imperative-класс DogAnimation, монтируемый из React через ref + useEffect: private handleResize() { const dpi = window.devicePixelRatio || 1; ... if (vw > 1600 && !this.noZoom) { this.zoom = vw / 1800; } else { this.zoom = 1; } this.canvas.width = Math.round(logicalWidth * dpi); this.canvas.height = Math.round(logicalHeight * dpi); this.ctx.scale(dpi, dpi); } useEffect(() => { if (!canvasRef.current) return; const handler = new DogAnimation(canvasRef.current, { disableCubes, noZoom }); return () => { handler.dispose(); }; }, []); Canvas2D для pixel-art проще WebGL. Imperative-класс вынесен из React — rAF-цикл не триггерит re-render. DPR + zoom в одном handleResize решают «мыло» на Retina и растягивание на 4K. dmask.ru

SVG-диаграмма потоков данных с оркестрацией навигации Next.js 14 React 18 TypeScript SCSS Modules Effector Блок «Как работают данные» — ключевой образовательный раздел: 6 шагов токенизации с анимированными схемами потоков (конфиденциальные данные, подменные данные, токены). Проблема Нужна сложная векторная анимация (сотни SVG-элементов), синхронизированная с горизонтальной навигацией с drag & autoplay, карточками описания, отдельной мобильной версией и автопрокруткой подшагов на 6-м слайде. Решение Единый SVG-«фильм» высотой 3360px — все 6 шагов в одном <svg>. Переключение — CSS transform: translateY(): <svg style={{ transform: `translateY(${-(100 / 6) * active}%)`, }} width="790" height="3360" > Активный шаг получает CSS-класс .active, который запускает keyframe-анимации: .step3 { &.active { .special { animation: step3 3s infinite; } } } @keyframes step3 { 0% { fill: var(--Electric-Green); transform: translate(-8px, -8px); } 30% { fill: var(--Violet); transform: translate(-8px, -8px); } ... } Кастомный слайдер DataNav — drag-слайдер с snap-to-nearest, autoplay через IntersectionObserver: const onDragStart = (e: React.MouseEvent | React.TouchEvent) => { setDragging(true); setStartX('touches' in e ? e.touches[0].clientX : e.clientX); setStartOffset(offset); }; const onDragEnd = () => { // Поиск ближайшего слайда к левому краю scrollToSlide(bestIndex); }; Один SVG вместо 6 отдельных — проще синхронизировать анимации. CSS-анимации на GPU, без JS per frame. Кастомный слайдер дает контроль над snap, autoplay и интеграцией с SVG-состоянием. dmask.ru