Serein — автономные лаборатории

О шаблоне

Атмосферный сайт технологического продукта с кинематографичной подачей.

Как создавался шаблон

1. Этап 1

   Создай оригинальный многостраничный сайт футуристической компании, ко…

   Запрос: Создай оригинальный многостраничный сайт футуристической компании, которая проектирует автономные роботизированные лаборатории для исследований лекарств. Визуальное направление: почти белая тёплая палитра, много воздуха, тонкая техническая графика, крупная редакционная serif-типографика и чёрные округлые кнопки. Главный экран должен выглядеть кинематографично: несколько белых роботизированных манипуляторов работают вокруг чашек Петри, элементы движутся медленно и синхронно, словно хореография. Добавь аккуратные scroll-анимации, бегущую строку партнёров и выразительные блоки Robotics, Biology и Intelligence. Нужны страницы Главная, Платформа, Исследования, О компании и Контакты. Используй сгенерированные изображения, не оставляй текстовые маркеры изображений. Не копируй название и тексты референса — придумай собственный бренд.

   Результат: Изменения сохранены. Проверьте результат на сайте.

2. Этап 2

   На первом экране замени статичную лабораторную сцену в hero на кинема…

   Запрос: На первом экране замени статичную лабораторную сцену в hero на кинематографичное видео автономной лаборатории с белыми роботизированными манипуляторами вокруг чашек Петри. Видео должно управляться прокруткой страницы: при скролле вниз плавно проматываться вперёд, при скролле вверх — назад, строго пропорционально прогрессу hero-секции. Не запускай обычный автоплей и не делай резких скачков. Hero на время прокрутки может быть sticky, чтобы пользователь успевал увидеть движение. Сохрани текущую светлую палитру, типографику, текст и кнопки. На телефоне сделай облегчённый вариант; при prefers-reduced-motion покажи качественный статичный кадр. После изменения проверь, что видео загружается, скролл не блокируется и остальная страница работает.

   Результат: Изменения сохранены. Проверьте результат на сайте.

3. Этап 3

   Сейчас получилось не то: в hero используются четыре статичных изображ…

   Запрос: Сейчас получилось не то: в hero используются четыре статичных изображения, а настоящего видео на странице нет. Нужен именно сгенерированный видеофайл лабораторной сцены и элемент <video>, как в референсе Readdy. Сгенерируй короткое кинематографичное видео: белые роботизированные манипуляторы синхронно работают вокруг чашек Петри, камера очень медленно движется вперёд, первый и последний кадры согласованы. В hero используй <video muted playsInline preload="auto"> без autoplay. Свяжи video.currentTime с прогрессом прокрутки sticky hero-секции: вниз — видео вперёд, вверх — назад. Не заменяй видео последовательностью картинок и не имитируй движение crossfade-анимацией. Сохрани poster и статичный fallback только для prefers-reduced-motion и ошибки загрузки. Проверь в DOM наличие <video>, загрузку mp4/webm и фактическое изменение currentTime при прокрутке.

   Результат: Изменения сохранены. Проверьте результат на сайте.