🚀 Промт для разработки презентационного сайта (React + Anime.js + 3D)

Роль: Ты — Senior Frontend Developer, специализирующийся на создании иммерсивных веб-презентаций с акцентом на микро-анимации и производительность.

Цель: Разработать одностраничный (или многостраничный с плавным скроллом) презентационный сайт для вымышленного бренда "NEXUS VISION". Основная задача — вызвать вау-эффект за счет плавной анимации и современного 3D-контента.

---

1. Технологический стек (Stack)

• Фреймворк: React 18+ (TypeScript опционально)
• Маршрутизация: React Router v6 (для навигации по секциям с использованием HashRouter или BrowserRouter) или React Scroll для плавной навигации по якорям
• Анимация: anime.js (для SVG-анимаций, текста, морфинга и анимации по скроллу)
• 3D Графика: Three.js + @react-three/fiber + @react-three/drei (для отображения 3D-сцен)
• Стилизация: Tailwind CSS (для быстрой верстки) или CSS Modules

---

2. Архитектура и Навигация (Modern Navigation)

Реализуй современную навигацию с динамическими переходами:

Плавающее меню

Фиксированное горизонтальное меню в верхней части экрана с эффектом размытия стекла (Glassmorphism).

Прогресс-бар

Индикатор прогресса прокрутки страницы, синхронизированный с anime.js.

Якорные ссылки

При клике на пункт меню происходит плавный скролл к секции с использованием anime.js (easing: easeInOutQuad) вместо стандартного scrollIntoView.

Динамические страницы (опционально)

Если используется React Router, реализуй анимацию появления/исчезновения страниц (AnimatePresence-подобный подход, но на anime.js).

---

3. Работа с 3D графикой

Интегрируй 3D-сцену в качестве фона или центрального элемента:

Сцена

Используй Canvas от @react-three/fiber, растянутый на всю ширину экрана (с pointer-events: none для фона или auto для интерактива).

Объекты

• Создай абстрактную геометрию (например, вращающийся тор или икосаэдр) с фрагментным шейдером, меняющим цвет в зависимости от позиции курсора мыши
• Добавьте частицы (Particles), разлетающиеся при наведении на определенные секции

Взаимодействие

Параллакс-эффект — при движении мыши 3D-объекты слегка смещаются относительно курсора (использовать useFrame для обновления поворота).

---

4. Анимации с anime.js (Ключевые механики)

Раздели анимации на несколько уровней:

Стартовая загрузка

• Сначала появляется логотип (анимация рисования контура SVG — anime.js с strokeDashoffset)
• Затем "влетают" текстовые блоки (с задержкой 200ms друг за другом)
• Только после этого исчезает прелоадер и становится активной основная навигация

Скролл-анимации (Scroll-triggered)

• Используй anime.js в связке с Intersection Observer
• При появлении секции в зоне видимости, элементы внутри секции (карточки, иконки) выполняют анимацию "перевертывания" или масштабирования (scale: [0.8, 1]) с эффектом пружины (elasticity: 400)

Микро-взаимодействия

• При наведении на кнопку — анимация пульсации фона
• При клике — "волна" расходящаяся от места клика

---

5. Интеграция PNG-персонажа (Референс)

У меня есть PNG-изображение персонажа с прозрачным фоном. Твоя задача:

Позиционирование

Размести персонажа в правой нижней части экрана поверх 3D-фона, но позади текстовых слоев (z-index: 10).

Анимация (Idle)

Сделай так, чтобы персонаж плавно покачивался (легкий наклон влево-вправо) и слегка масштабировался при "дыхании" (используй anime.js циклы loop: true).

Реакция на курсор

При наведении на персонажа, он должен "смотреть" на курсор (поворачиваться) или менять эмоцию (заменить PNG на другой вариант, если их несколько).

Parallax

При скролле, персонаж должен перемещаться по оси Y медленнее, чем основной контент (эффект глубины).

---

6. Структура секций (UI/UX)

Сверстай 5 основных блоков:

1. Hero: Большой заголовок, подзаголовок, CTA-кнопка
2. О нас: Сетка с иконками и текстом (анимация появления по очереди)
3. Портфолио / 3D Шоурум: Здесь 3D-сцена становится интерактивной (можно крутить объект мышью)
4. Команда: Карточки участников с их фото (используй маски)
5. Контакты: Форма обратной связи с анимированными полями ввода (при фокусе поле расширяется)

---

7. Требования к коду (Quality Gates)

1. Оптимизация: Используй React.memo для тяжелых компонентов и lazy + Suspense для загрузки 3D-модулей
2. Адаптивность: Мобильная версия должна корректно отображать 3D-сцену (уменьшенный размер), а персонаж должен смещаться в центр или исчезать на маленьких экранах
3. Чистота: Весь код анимаций вынеси в отдельные хуки (например, useHeroAnimation, useParallax)

---

8. Референсы (Примерная реализация анимации персонажа)

// Примерный код для анимации "дыхания" персонажа
useEffect(() => {
  const animation = anime({
    targets: '.character-img',
    translateY: ['-5px', '5px'],
    scale: ['1', '1.02'],
    direction: 'alternate',
    loop: true,
    easing: 'easeInOutSine',
    duration: 1500
  });
  return () => animation.pause();
}, []);

Пример 3D сцены с частицами
javascript
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stars } from '@react-three/drei';

function Scene3D() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <Stars radius={10} depth={50} count={2000} factor={4} />
      <mesh rotation={[0.5, 0.5, 0]}>
        <torusGeometry args={[1.5, 0.3, 16, 100]} />
        <meshStandardMaterial color="#6c63ff" wireframe />
      </mesh>
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
}
Пример навигации с React Router и anime.js
javascript
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useEffect, useRef } from 'react';
import anime from 'animejs';

function Navigation() {
  const menuRef = useRef(null);

  useEffect(() => {
    anime({
      targets: menuRef.current,
      translateY: [-50, 0],
      opacity: [0, 1],
      easing: 'easeOutQuad',
      duration: 800
    });
  }, []);

  return (
    <nav ref={menuRef} className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md">
      <ul className="flex justify-center space-x-8 p-4">
        <li><Link to="/" className="hover:text-indigo-600 transition">Главная</Link></li>
        <li><Link to="/about" className="hover:text-indigo-600 transition">О нас</Link></li>
        <li><Link to="/portfolio" className="hover:text-indigo-600 transition">Портфолио</Link></li>
        <li><Link to="/contact" className="hover:text-indigo-600 transition">Контакты</Link></li>
      </ul>
    </nav>
  );
}
Пример использования Intersection Observer с anime.js
javascript
import { useEffect, useRef } from 'react';
import anime from 'animejs';

function AnimatedSection({ children }) {
  const sectionRef = useRef(null);
  const animated = useRef(false);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !animated.current) {
          animated.current = true;
          anime({
            targets: sectionRef.current,
            translateY: [50, 0],
            opacity: [0, 1],
            easing: 'easeOutElastic',
            duration: 1200,
            elasticity: 400
          });
        }
      });
    }, { threshold: 0.3 });

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return <div ref={sectionRef} className="opacity-0">{children}</div>;
}
Полная структура компонента Hero с интеграцией
javascript
import React, { useEffect, useRef } from 'react';
import anime from 'animejs';
import { Scene3D } from './Scene3D';
import characterPNG from './assets/character.png';

function Hero() {
  const titleRef = useRef(null);
  const subtitleRef = useRef(null);
  const ctaRef = useRef(null);
  const characterRef = useRef(null);

  useEffect(() => {
    // Анимация заголовка
    anime({
      targets: titleRef.current,
      translateY: [100, 0],
      opacity: [0, 1],
      easing: 'easeOutQuad',
      duration: 1000,
      delay: 200
    });

    // Анимация подзаголовка
    anime({
      targets: subtitleRef.current,
      translateY: [80, 0],
      opacity: [0, 1],
      easing: 'easeOutQuad',
      duration: 1000,
      delay: 400
    });

    // Анимация кнопки
    anime({
      targets: ctaRef.current,
      scale: [0.8, 1],
      opacity: [0, 1],
      easing: 'easeOutElastic',
      duration: 1200,
      delay: 600,
      elasticity: 500
    });

    // Анимация "дыхания" персонажа
    anime({
      targets: characterRef.current,
      translateY: ['-8px', '8px'],
      scale: ['1', '1.03'],
      direction: 'alternate',
      loop: true,
      easing: 'easeInOutSine',
      duration: 2000
    });

    // Параллакс при скролле
    const handleScroll = () => {
      const scrollY = window.scrollY;
      if (characterRef.current) {
        characterRef.current.style.transform = `translateY(${scrollY * 0.1}px)`;
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <section className="relative h-screen flex items-center overflow-hidden">
      {/* 3D Фон */}
      <div className="absolute inset-0 z-0">
        <Scene3D />
      </div>

      {/* Контент */}
      <div className="relative z-10 container mx-auto px-6">
        <h1 ref={titleRef} className="text-6xl md:text-8xl font-bold text-white opacity-0">
          NEXUS VISION
        </h1>
        <p ref={subtitleRef} className="text-xl md:text-2xl text-gray-200 mt-4 opacity-0">
          Будущее уже здесь
        </p>
        <button ref={ctaRef} className="mt-8 px-8 py-4 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition transform hover:scale-105 opacity-0">
          Начать
        </button>
      </div>

      {/* PNG Персонаж */}
      <img
        ref={characterRef}
        src={characterPNG}
        alt="Персонаж"
        className="absolute bottom-10 right-10 z-10 w-48 md:w-64 h-auto pointer-events-none select-none"
        style={{ filter: 'drop-shadow(0 10px 30px rgba(0,0,0,0.5))' }}
      />
    </section>
  );
}

export default Hero;
Структура проекта
text
src/
├── components/
│   ├── Navigation.jsx
│   ├── Hero.jsx
│   ├── About.jsx
│   ├── Portfolio.jsx
│   ├── Team.jsx
│   ├── Contact.jsx
│   └── Footer.jsx
├── components/3D/
│   ├── Scene3D.jsx
│   ├── Particles.jsx
│   └── AnimatedObject.jsx
├── hooks/
│   ├── useScrollAnimation.js
│   ├── useParallax.js
│   └── useCharacterAnimation.js
├── assets/
│   └── character.png
├── styles/
│   └── index.css
├── App.jsx
└── index.js
9. Итоговый запрос к модели
Сгенерируй код для этого проекта, начиная с файла App.js, настройки роутинга, и основного компонента Hero с интеграцией 3D-фона и PNG-персонажа, используя вышеописанные правила анимации. Убедись, что:

Все зависимости правильно импортированы

Анимации работают синхронно и не конфликтуют

3D-сцена оптимизирована для производительности

Персонаж правильно реагирует на скролл и имеет "дыхание"

Навигация плавно скроллит к секциям

Код чистый, хорошо структурированный и задокументированный

10. Дополнительные рекомендации
Для улучшения производительности:
Используй useMemo для сложных вычислений в 3D-сцене

Включи shallow рендеринг для компонентов, которые часто обновляются

Оптимизируй изображения с помощью next/image или vite-plugin-imagemin

Используй React.lazy для код-сплиттинга страниц

Для улучшения UX:
Добавь индикатор загрузки для 3D-сцены

Реализуй плавные переходы между страницами

Добавь поддержку prefers-reduced-motion для пользователей с чувствительностью к анимации

Включи кеширование статических ресурсов

Для SEO:
Используй react-helmet для управления мета-тегами

Добавь структурированные данные (JSON-LD)

Убедись, что контент доступен без JavaScript