Анимированные элементы для сайта (preloader, интерактивные глаза)

Техническое задание (ТЗ) для иллюстратора / motion-дизайнера  

Формат: Векторная графика (SVG) + анимация (CSS/Lottie)  

1. Preloader  

Концепция: Плавный переход от ночного неба к глазу через эффект северного сияния.  

Требования:  
- Статика:  
  – Фон: тёмно-синий/фиолетовый градиент с точками-звёздами.  
  – Северное сияние: плавные волны (основные цвета — светло-синий, зелёный, бирюзовый).  
  – Глаз: стилизованный, с чётко выделенной радужкой и зрачком (слои для анимации).  
- Анимация:  
  1. Появление звёзд → первые всполохи сияния.  
  2. Расширение сияния до заполнения экрана.  
  3. Схлопывание в блик → превращение в глаз.  
- Техническое:  
  – Экспорт SVG с разделёнными слоями (например: “stars”, “aurora”, “pupil”).  
  – Длительность: 3–4 сек.  

2. Интерактивные глаза (главная страница)  
Концепция: Глаз, который следит за курсором и реагирует на hover.  

Требования:  
- Статика:  
  – Векторный глаз (веки, радужка, зрачок, блики).  
  – Радужка: с градиентом под северное сияние.  
- Анимация:  
  1. Слежение за курсором:  
     – Радужка плавно смещается в сторону движения мыши (ограничение: не выходит за пределы белка).  
  2. Эффект при hover на раздел "Gallery":  
     – Усиление свечения радужки (мерцание цветов).  
  3. Отражение текста:  
     – В радужке — едва заметные блики с текстом "Ольга Холод" (появление/исчезновение с opacity 0.2 → 0.5).  
- Техническое:  
  – SVG с группами: “iris”, “pupil”, “highlights”.  
  – Анимация: реализуется через CSS/JS, но иллюстратор должен подготовить корректные слои.  

3. Подмигивающий глаз (футер)

Что нужно сделать:
1. Две анимации для глаза:
   – Автоматическое подмигивание при загрузке (дружелюбное)
   – Реакция при наведении на Instagram (игривое)

Автоподмигивание (дружелюбное):
- Веки плавно прикрывают глаз на 0.4 сек
- Зрачок слегка увеличивается
- Появляется мягкий блик
- Эффект: "Привет, я тут!"

Hover-анимация (игривая):
- Быстрое подмигивание (0.25 сек)
- Зрачок сужается
- Появляется весёлый блик (звезда или сердечко)
- Эффект: "Эй, заходи в инсту!"

Технические требования:
- SVG с отдельными слоями: веки, зрачок, блики
- Анимация должна быть плавной
- Вес файла не больше 50КБ
- Без бровей, только глаз

Как проверить:
- Подмигивание выглядит дружеским при загрузке
- При наведении – более озорное/игривое
- Всё работает без тормозов 

Общие требования  
- Стиль: Полуреалистичный или стилизованный. 
- Форматы:  
  – SVG с чистой векторной графикой (без растровых вставок).  
  – Если используется Lottie — приложить .json и видео-превью.  
- Оптимизация:  
  – Минимизировать количество узлов в векторе.  
  – Все слои должны быть именованными (не “layer 1”, “layer 2’).  

Этапы работы  
1. Концепт-арт: Утверждение статичных иллюстраций (preloader, глаз).  
2. Анимация:  
   – Preloader: покадровая раскадровка → финальная анимация.  
   – Глаза: проверка движения радужки/подмигивания.  
3. Правки: Не более 2 итераций на каждый этап.  
4. Финал: Передача файлов + инструкция по слоям.  

Бюджет и сроки  
- Сроки: 10–14 дней (зависит от сложности).  
- Бюджет: 10 000 – 30 000 ₽ (обсуждается после уточнения деталей).  

Критерии приёмки  
- Соответствие концепции.  
- Корректная работа анимации в вебе (тест в браузере).  
- Оптимизированные файлы (вес SVG не более 200 КБ).  

Примечание: Иллюстратор должен иметь опыт работы с UI-анимациями и понимать технические ограничения (например, как SVG анимируется через CSS).  

Готовы ответить на вопросы и предоставить референсы!