Перейти к основному содержанию
Scrolltide

Scrolltide: кинематографичные шаблоны сайтов со скролл-анимацией и библиотека дизайн-промптов

Веб-дизайнПромптыСкролл-анимацияФронтенд-шаблоны

Библиотека промптов для шаблонов сайтов со скролл-анимацией, компонентов и шейдеров. Копируете промпт, вставляете в ИИ — и получаете страницу, которая действительно двигается, а не выдаёт себя за работу нейросети с первого экрана.

★ 9 Последнее обновление: 2026-11-08 scrolltide.co
Перейти на сайт

Подробное описание

Что такое Scrolltide

Scrolltide — библиотека материалов для сборки сайтов с помощью ИИ. Суть здесь не в стопке файлов Figma, а в промпте, который можно сразу отдать нейросети: скопировать, вставить в Claude, Cursor или другой пишущий код ИИ — и на выходе будет готовая страница со встроенными скролл-анимациями.

Позиционирование намеренно прямое: сайт не должен выглядеть так, будто его собрал ИИ. Проблема вполне реальна — большинство сгенерированных лендингов сводятся к одному и тому же центрированному заголовку и трём карточкам, и Scrolltide берётся именно за это.

Что есть в библиотеке

Сейчас сайт делится на три раздела:

  • Шаблоны страниц: 143 штуки — Hero Section, готовые лендинги, портфолио, интернет-магазины, 3D-фоны; большинство помечено как Premium.
  • Компоненты: 85 блоков, которые можно взять по отдельности и вставить в уже существующий проект — glass-табы, морфящий навбар, аккордеон из карточек, планета из частиц, светящаяся кнопка-кольцо.
  • Шейдеры: 55 анимированных на GPU фонов — градиенты, полярное сияние, жидкий металл, огонь; отдаются как MP4, статичный кадр и встраиваемый компонент.

У каждой позиции есть живое превью, так что анимацию можно посмотреть, прежде чем что-то брать.

Стек и формат поставки

Шаблоны построены на React, Vite, Next.js и Tailwind CSS, за слой анимации отвечают Framer Motion, GSAP и Lenis с плавным скроллом, а 3D и фоны сделаны на Three.js, WebGL и собственных шейдерах. После разовой покупки вы получаете читаемый исходный код, а не сжатый чёрный ящик.

Кому подойдёт

Независимым разработчикам, дизайн-инженерам и командам на подряде — особенно тем, кому нужно быстро собрать «дорого выглядящую» промостраницу и при этом не выстраивать каждую кривую анимации вручную. Если вы делаете только статичные страницы или бюджет производительности проекта жёстко ограничен, цену таких скролл-эффектов стоит оценить отдельно.

Footer Design: галерея качественных референсов для футеров сайтов

Библиотека идей для футеров сайтов с фильтрами по типу и стилю — от типографичных и иллюстративных до сеточных, карточных и анимированных; у каждого примера есть отметка редакции и ссылка на оригинал.

Веб-дизайнДизайн футераДизайн-вдохновение

Navbar Gallery: большая коллекция идей для навигации на сайтах

Галерея, которая собирает только удачные примеры навигации на сайтах — с фильтрами по статичным меню, выпадающим спискам, Mega Menu, боковым панелям и поиску; у каждого примера есть ссылка на живой сайт.

Веб-дизайнНавигацияДизайн-вдохновение

shadcn/ui: Создавайте свою библиотеку компонентов

Хорошо спроектированные компоненты, которые вы можете скопировать и вставить в свои приложения. Доступные. Настраиваемые. Open Source.

develop

Variant: одна фраза на входе — и бесконечные варианты дизайна на скролле

Введите идею приложения или сайта и скролльте бесконечную ленту дизайн-направлений. Никакого холста и бесконечного переписывания промптов: остановитесь на том варианте, который зацепил. Экспорт в HTML и React.

ИИ-дизайнгенерация интерфейсовдизайн-вдохновение

Header Name: бесплатный генератор баннеров

Создавайте бесплатные баннеры для X, LinkedIn, YouTube и GitHub: 48 шаблонов, локальное редактирование, экспорт PNG/SVG и общий ZIP.

freeГенератор баннеровЛичный бренд

Anime.js: Легковесная JavaScript библиотека для анимации

Anime.js — это эффективная JavaScript библиотека для анимации, поддерживающая анимацию HTML, SVG, CSS и других элементов, идеально подходящая для фронтенд-разработчиков и дизайнеров для быстрого создания веб-анимации, улучшающей пользовательский опыт.

фронтенд разработкавеб-дизайн