П.ВИН
Landing

18ai — Landing из портфолио Паши Вина

Анимированный лендинг для AI-продукта с плавным скроллом на Lenis и GSAP-анимациями. Высокая производительность и современный визуал.

01. КатегорияLanding
02. РольFull-stack, Product
03. Датамар 2026

Что это?

Анимированный лендинг для AI-продукта с плавным скроллом на Lenis и GSAP-анимациями. Высокая производительность и современный визуал.

Какую задачу решает?

Статичная страница → кинематографичный лендинг с плавными переходами и GSAP-анимациями

Как реализовано?

Реализовано на стеке: Next.js, React, GSAP, Lenis. Next.js лендинг с GSAP-анимациями и Lenis smooth scroll для премиального пользовательского опыта.

Next.jsReactGSAPLenisNext.jsReactGSAPLenisNext.jsReactGSAPLenisNext.jsReactGSAPLenis
Сложные AI-продукты теряют пользователей в первые секунды — стандартный лендинг не передаёт глубину технологии. Цель — превратить страницу в кинематографичный опыт: GSAP-сцены и smooth scroll ведут пользователя через продукт как через сюжет.
18ai
18ai — Сложные AI-продукты теряют пользователей в первые секунды — стандартный лендинг не передаёт глубину технологии.

Вызов

Слабый первый экран

AI-продукту нужен лендинг, который визуально передаёт технологичность и удерживает внимание.

  • — Нет анимаций и визуального вау-эффекта
  • — Стандартный скролл без плавности
  • — Слабое первое впечатление от продукта

Решение

Кинематографичный лендинг

Next.js лендинг с GSAP-анимациями и Lenis smooth scroll для премиального пользовательского опыта.

  • + GSAP-анимации входа и скролл-триггеры
  • + Lenis для плавного инерционного скролла
  • + Оптимизированный рендеринг на Next.js

Архитектура & Стек

Mindmap

[ Mindmap Процессов / v2.0 ]
NODE.01

Framework

SSR & Routing
Next.js · React

NODE.02

Animations

GSAP Timelines
GSAP · ScrollTrigger

NODE.03

Scroll

Smooth Inertia
Lenis · Studio Freight

NODE.04

Performance

Optimized Render
Next.js Font · Static Gen

COREEngine

Смоделировано 100 предпринимателями

Бизнес Импакт

60fps

Плавность анимаций

GSAP

Кинематографичный скролл

SSR

Быстрая загрузка

Следующий кейс

Feberra →