Лендинг уровня Awwwards

Ты — фронтенд-инженер, который делает сайты уровня Awwwards. Создай лендинг для [ПРОДУКТ ИЛИ БРЕНД] на [СТЕК — React/Next.js или HTML/Astro].

1. Визуальная идея. Прежде чем верстать, выбери и назови одно направление и держись его:
- редакционный брутализм: высокий контраст, огромный шрифт, острые углы, открытая сетка;
- органическая плавность: мягкие градиенты, большие скругления, стекло, пружинная физика;
- кибер/технический: тёмная тема, неоновые акценты, моноширинный шрифт, быстрые каскадные появления;
- кинематографичный: полноэкранные изображения, медленные переходы, много воздуха, история через скролл.

2. Структура.
- Вход: лёгкий прелоадер, который плавно уходит (раздвижные створки, увеличение или «протяжка» текста) — никакого пустого экрана.
- Первый экран: на всю высоту (100dvh), заголовок разбит на слова или буквы для каскадного появления, глубина за счёт парящих элементов.
- Навигация: липкая шапка, которая прячется при скролле вниз и возвращается при скролле вверх.

3. Движение.
- Сценарии скролла: закреплённые секции, горизонтальная галерея, мягкий параллакс в 2–3 слоя.
- Микровзаимодействия: «магнитные» кнопки, свой курсор с плавным следованием, объёмные hover через transform.

4. Типографика и фактура: контраст масштабов (заголовки через clamp() до 12vw, текст 16–18 px), выразительный вариативный шрифт, лёгкое зерно 2–5%, стекло через backdrop-filter с тонкой полупрозрачной обводкой.

5. Производительность и доступность — обязательно:
- анимируй только transform и opacity;
- will-change ставь точечно и снимай после анимации;
- курсор и тяжёлый hover — только в @media (hover: hover) and (pointer: fine);
- постоянные анимации — только при prefers-reduced-motion: no-preference.

6. Инструменты: React — Motion для переходов и пружин, Lenis для плавного скролла, React Three Fiber, если нужен 3D; HTML — GSAP и ScrollTrigger, Lenis, SplitType.

Контент страницы: [СЕКЦИИ И ТЕКСТЫ ИЛИ «придумай сам»].

```text
Ты — фронтенд-инженер, который делает сайты уровня Awwwards. Создай лендинг для [ПРОДУКТ ИЛИ БРЕНД] на [СТЕК — React/Next.js или HTML/Astro].

1. Визуальная идея. Прежде чем верстать, выбери и назови одно направление и держись его:
- редакционный брутализм: высокий контраст, огромный шрифт, острые углы, открытая сетка;
- органическая плавность: мягкие градиенты, большие скругления, стекло, пружинная физика;
- кибер/технический: тёмная тема, неоновые акценты, моноширинный шрифт, быстрые каскадные появления;
- кинематографичный: полноэкранные изображения, медленные переходы, много воздуха, история через скролл.

2. Структура.
- Вход: лёгкий прелоадер, который плавно уходит (раздвижные створки, увеличение или «протяжка» текста) — никакого пустого экрана.
- Первый экран: на всю высоту (100dvh), заголовок разбит на слова или буквы для каскадного появления, глубина за счёт парящих элементов.
- Навигация: липкая шапка, которая прячется при скролле вниз и возвращается при скролле вверх.

3. Движение.
- Сценарии скролла: закреплённые секции, горизонтальная галерея, мягкий параллакс в 2–3 слоя.
- Микровзаимодействия: «магнитные» кнопки, свой курсор с плавным следованием, объёмные hover через transform.

4. Типографика и фактура: контраст масштабов (заголовки через clamp() до 12vw, текст 16–18 px), выразительный вариативный шрифт, лёгкое зерно 2–5%, стекло через backdrop-filter с тонкой полупрозрачной обводкой.

5. Производительность и доступность — обязательно:
- анимируй только transform и opacity;
- will-change ставь точечно и снимай после анимации;
- курсор и тяжёлый hover — только в @media (hover: hover) and (pointer: fine);
- постоянные анимации — только при prefers-reduced-motion: no-preference.

6. Инструменты: React — Motion для переходов и пружин, Lenis для плавного скролла, React Three Fiber, если нужен 3D; HTML — GSAP и ScrollTrigger, Lenis, SplitType.

Контент страницы: [СЕКЦИИ И ТЕКСТЫ ИЛИ «придумай сам»].
```

{
  "messages": [
    {
      "role": "user",
      "content": "Ты — фронтенд-инженер, который делает сайты уровня Awwwards. Создай лендинг для [ПРОДУКТ ИЛИ БРЕНД] на [СТЕК — React/Next.js или HTML/Astro].\n\n1. Визуальная идея. Прежде чем верстать, выбери и назови одно направление и держись его:\n- редакционный брутализм: высокий контраст, огромный шрифт, острые углы, открытая сетка;\n- органическая плавность: мягкие градиенты, большие скругления, стекло, пружинная физика;\n- кибер/технический: тёмная тема, неоновые акценты, моноширинный шрифт, быстрые каскадные появления;\n- кинематографичный: полноэкранные изображения, медленные переходы, много воздуха, история через скролл.\n\n2. Структура.\n- Вход: лёгкий прелоадер, который плавно уходит (раздвижные створки, увеличение или «протяжка» текста) — никакого пустого экрана.\n- Первый экран: на всю высоту (100dvh), заголовок разбит на слова или буквы для каскадного появления, глубина за счёт парящих элементов.\n- Навигация: липкая шапка, которая прячется при скролле вниз и возвращается при скролле вверх.\n\n3. Движение.\n- Сценарии скролла: закреплённые секции, горизонтальная галерея, мягкий параллакс в 2–3 слоя.\n- Микровзаимодействия: «магнитные» кнопки, свой курсор с плавным следованием, объёмные hover через transform.\n\n4. Типографика и фактура: контраст масштабов (заголовки через clamp() до 12vw, текст 16–18 px), выразительный вариативный шрифт, лёгкое зерно 2–5%, стекло через backdrop-filter с тонкой полупрозрачной обводкой.\n\n5. Производительность и доступность — обязательно:\n- анимируй только transform и opacity;\n- will-change ставь точечно и снимай после анимации;\n- курсор и тяжёлый hover — только в @media (hover: hover) and (pointer: fine);\n- постоянные анимации — только при prefers-reduced-motion: no-preference.\n\n6. Инструменты: React — Motion для переходов и пружин, Lenis для плавного скролла, React Three Fiber, если нужен 3D; HTML — GSAP и ScrollTrigger, Lenis, SplitType.\n\nКонтент страницы: [СЕКЦИИ И ТЕКСТЫ ИЛИ «придумай сам»]."
    }
  ]
}