HUMANIKRONЦей самий портал, який ти зараз читаєш, я нещодавно переробив — щоб він відчувався «дорого», як сайти топових агенцій, але лишався швидким на Cloudflare.
З чого складається «вау»
Головний секрет преміум-сайтів — не картинка, а те, як рухається сторінка. Я зробив чотири речі:
- Плавний інерційний скрол (Lenis). Сторінка не «стрибає» по пікселях, а пливе з інерцією та згасанням. Це 80% відчуття. Бібліотека крихітна (~13 КБ) і я поклав її на власний домен, щоб не залежати від чужого CDN.
- Reveals при скролі. Заголовки й картки плавно виїжджають знизу з легкого розфокусу — через IntersectionObserver, з easing і стагером. Жодного GSAP — чистий JS.
- Кольорові нэбули-паралакс. М'який космос-фон (оранж + бірюза + фіолет) із тонкими зорями, що реагує на мишу й трохи на скрол. Стримано, щоб не заважати тексту.
- Кастомний курсор + 3D-tilt карток. Курсор-крапка з кільцем, що росте на елементах; картки нахиляються до курсора в 3D.
Чому без важких бібліотек
Усе тримається на requestAnimationFrame, IntersectionObserver і CSS-трансформаціях. Один цикл анімації керує курсором, паралаксом, зорями й магнітними кнопками. Це означає: ніяких мегабайтів залежностей, миттєве завантаження і плавні 60 fps навіть на слабкому залізі.
Доступність
Усі ефекти вимикаються при prefers-reduced-motion, а кастомний курсор — лише для миші (на тачі лишається звичайний). Краса не повинна ламати зручність.
Підсумок: сучасний «живий» сайт можна зробити без важкого стеку — головне відчуття плавності та стриманість.