Готовые шаблоны страниц под разные задачи

React Flow · AI workflow

RAG-pipeline на нодах

User Input + Memory → LLM → параллельные tools (web search, SQL) → composer → output stream. Drag нод, animated edges, MiniMap. Стиль Dify/FlowiseAI.

→

React Flow · ChaiNNer-style

Photo-upscale пайплайн на 7 нод

Load → Crop / Denoise → Resize → Upscale 4× → Color Correct → Save. Каждая нода с превью-градиентом и параметрами в моноширинном.

→

React Flow · DB schema

Visualizer схемы БД с FK

5 таблиц AIVEXA (users, tenants, projects, reports, shares) с типами колонок и связями FK через smoothstep-стрелки. Стиль ChartDB/DBDraw.

→

React Flow · CRM funnel

Воронка SaaS с условиями возврата

Лид → Квалификация → Демо → Предложение → Won/Lost. Двойные хэндлы (ok / fail), пунктирные edges на условиях, прогресс-бары конверсии.

→

React Flow · Mind map

Карта домена AIVEXA: 23 темы

Центральный узел AIVEXA + 6 цветных веток (Tech, Design, Product, Team, Growth, AI) с листами. Радиальная композиция, smoothstep-связи.

→

GSAP · MorphSVG smooth

Гладкий морфинг без зигзагов

Морф между двумя сложными формами с автоматическим перераспределением точек. Тоггл smooth и поле points показывают разницу — без них переход «дёргается».

→

GSAP · MorphSVG + Canvas

Морф параллельно в SVG и на Canvas

Один morph рендерится одновременно в `<svg>` и в `<canvas>` через render-callback. Пример как вытащить морфинг GSAP за пределы SVG.

→

GSAP · Dynamic morphing

Двухслойный shape-overlay с волной

Клик — две полупрозрачные волны со случайными задержками точек закрывают и открывают экран. Идеальный паттерн для page-transitions.

→

GSAP · ScrollTrigger + MorphSVG

Упругий футер на скорости скролла

Прокрутишь вниз — нижняя волна футера выпрямляется с пружинной амплитудой, зависящей от скорости скролла. Elastic ease на физике velocity.

→

GSAP · MorphSVG

Цепочка перевоплощений: 8 фигур

Один path морфит по кругу: круг → речь → ракета → молния → лайк → квадрат → сетка → лампочка. Бесконечно, без видимых стыков.

→

GSAP · DrawSVG

Линия рисуется как карандашом

Sequential-анимация stroke вдоль сложного SVG-пути: невидимая рука рисует линию из точки 0% и стирает с конца — бесконечный цикл.

→

GSAP · MotionPath

Объект движется по SVG-пути

Маленький градиентный квадрат бесконечно ходит по сложному closed-path с петлями. Базовый и самый универсальный пример MotionPath.

→

GSAP · MotionPathHelper

Редактируй путь прямо в браузере

Bezier-редактор появляется поверх SVG: тащишь точки — путь меняется в реальном времени, объект едет по новому. Кнопка copy выгружает обновлённый d.

→

GSAP · Flip + Draggable

Flip между двумя targets с drag

Маленькая иконка в рамке. Тащи мышью + кликни — она с Flip-эффектом разворачивается на весь экран и пропадает превью. Ещё клик — обратно в рамку.

→

GSAP · Draggable + Inertia

Три типа драга на одной странице

Левый объект — drag по X в bounds, средний — вращение с инерцией, правый — свободный drag с инерционным затуханием физики.

→

GSAP · MorphSVG curveMode

curveMode: морф без kinks

Переключатель: морф с обычной интерполяцией контрольных точек vs с интерполяцией углов и длин — второй вариант устраняет «изломы» при сложных переходах.

→

GSAP · MorphSVG shapeIndex

Управление точкой соединения

Один и тот же морф ромба в круг с разными значениями shapeIndex (0, 3, 6, 9) — точка старта соответствия точек кардинально меняет траекторию.

→

GSAP · MorphSVG

Curve swipe — занавес-разворот

Клик — нижний край прозрачной волны устремляется вверх и заполняет экран кривой границей через timeline reverse(). Идеальный page-transition.

→

GSAP · MorphSVG convertToPath

Примитивы превращаются в буквы

Треугольник, квадрат и круг морфят в буквы A, B, C. convertToPath() переводит SVG-примитивы в равноценные path — иначе морф был бы невозможен.

→

GSAP · ScrollTrigger + Draggable

Бесконечная карусель карточек

Горизонтальная лента, в которой карточки бесконечно перетекают через центр со scale-эффектом. Управление скроллом, кнопками Prev/Next или drag'ом мышью / тачем.

→

GSAP · Flip plugin

Плавная фильтрация по тегам

Чекбоксы Blue/Pink/Purple фильтруют сетку. Элементы не моргают — плавно переползают на новые позиции с фейдом и stagger-анимацией. Магия Flip plugin.

→

GSAP · Flip plugin

Каталог-карусель с переползанием

Кнопки Prev/Next двигают ряд карточек как «гусеничку»: одна уезжает в угол с opacity, новая выползает с противоположной стороны. Без шагов и рывков.

→

GSAP · Flip plugin

Стопка карточек — клик и смена

Стопка из 5 карточек со смещением и перспективой. Клик в любое место — верхняя плавно улетает влево-вниз, вся стопка подтягивается, снизу появляется новая.

→

Airbnb · Host Panel

Airbnb — Host Dashboard

Дашборд арендодателя в стиле Airbnb: Rausch coral акцент, KPI-плитки, line + donut диаграммы, таблица бронирований. Inter как замена Cereal VF.

→

Kanban

Growth Squad — Sprint 38

Канбан-доска с колонками статусов и плотными карточками задач. Тёмная палитра, акценты teal+purple — рабочий инструмент для трекинга спринта.

→

UI Tweaks

Filebase — Tweaks demo

Витрина мелких UI-улучшений: тогглы, инпуты, кнопки, состояния. Тёмная палитра с холодным синим акцентом — удобно для design-system gallery.

→

Email

SPORT TEST — Axis Pro

Продающее email-письмо в виде веб-страницы: hero с продуктом, преимущества, CTA. Тёплая палитра terracotta + кремовый.

→

Landing

mutuals — your dating life

Лендинг датинг-сервиса «знакомства через общих друзей»: эмоциональный hero, social proof, ясный value-prop. Свежая зелёно-красная палитра.

→

Web Prototype

Tomato — focus timer (web)

Веб-вариант помодоро-таймера с расширенным desktop-лейаутом — список задач, статистика, настройки. Тот же warm-paper стиль что и mobile-версия.

→

Mobile Onboarding

Lull — onboarding flow

Серия экранов онбординга мобильного приложения: welcome, бенефиты, разрешения, signup. Контрастная зелёно-синяя палитра на тёмном.

→

Gamified App

Level — daily quests

Игровой UI ежедневных квестов: тёмная палитра, прогресс-бары, очки и стрик-счётчики. Контраст к остальным «спокойным» примерам.

→

Mobile App

Tomato — focus screen

Экран фокус-таймера в формате мобильного приложения: крупный таймер, нижний таб-бар, минимум интерфейса.

→

Dashboard

Pulse — аналитический обзор

Внутренняя админка с sidebar-навигацией, KPI-карточками и таблицами. Плотная сетка под рабочий интерфейс.

→

Docs Page

Filebase Docs — Quickstart

Страница документации с боковой навигацией, оглавлением справа и кодовыми блоками. Аккуратный «doc reader» паттерн.

→

Blog Post

Why we rewrote sync engine in Rust

Технический пост в формате «текст-первый»: длинная читабельная колонка, сдержанная типографика. Шаблон для инженерного блога.

→

Pricing

Filebase — тарифные планы

Страница цен: четыре тарифа в плотной сетке, чек-листы фич, FAQ-блок. Чистая структура без агрессивных «выгодных» баннеров.

→

SaaS Landing

Filebase — облачная синхронизация

Маркетинговый лендинг продукта: hero с заголовком и CTA, блок преимуществ, прайсинг и финальный призыв.

→

Wireframe

Zentou AI — wireframe v0.1

Лоу-фай эскиз интерфейса в стиле «руками на бумаге»: тёплая бумажная палитра, наброски блоков и аннотации.

→

Social

Three posts. One beat.

Три слайда для соцсетевой карусели в едином ритме — формат Instagram/LinkedIn-постов, типографика как главный визуал.

→

Poster

AI Enthusiast — manifesto

Постер-манифест в журнальном стиле: крупный издательский заголовок, multi-column layout. Один экран, который продаёт идею.

→

E-Guide

Creator's Style & Format Guide

Стилизованный e-гайд с тёплой бежево-коралловой палитрой, журнальной типографикой. Для лид-магнитов и premium-контента.

→

Investor Deck

Holm — Series A Pre-Read

Pre-read для Series A инвесторов: рынок, traction, юнит-экономика, команда. Глубокий тёмный фон, спокойная подача.

→

Quarterly

Atlas Quarterly — Chapter 01

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

→

Pitch

Bluehouse — Real Estate ROI

Питч-дек по проекту в недвижимости: модель ROI, локация, риски и выходы. Та же тёмная палитра, цифры как герой слайда.

→

Board Update

Helix — Q1 '26 Board Update

Регулярный апдейт для совета директоров: метрики, риски, решения, ask. Сжатый деловой формат.

→

Critique Deck

Critique — magazine-web-ppt

Гибрид журнальной вёрстки и презентации с разбором дизайна. Богатая палитра — синий, зелёный, красный — каждый раздел как отдельная статья.

→

Investor Deck

Filebase — Q2 2026 deck

Инвесторская презентация в формате слайдов: проблема, метрики, traction, команда, ask. Сдержанный paper-стиль.

→

Weekly Update

Growth · Weekly W42

Недельный апдейт команды: метрики, прогресс по целям, блокеры, фокус на следующую неделю. Тёмная палитра с фиолетовым акцентом.

→

OKRs

Northwind — Q4 FY25 OKRs

Квартальные цели команды в виде структурированной таблицы: objectives, key results, прогресс, owner. Деловой шаблон планирования.

→

PM Spec

Spec — Two-factor authentication

Продуктовая спецификация фичи: контекст, user stories, acceptance criteria, риски. Шаблон для PM-документа перед разработкой.

→

Meeting Notes

Growth squad — 14 Oct notes

Протокол еженедельной встречи: участники, обсуждаемое, решения, action items с ответственными. Удобный шаблон для регулярок.

→

Invoice

Sable Studio — INV-2025-0142

Счёт-фактура в чистом editorial-стиле: реквизиты сверху, line items таблицей, итоги внизу. Спокойная зелёно-кремовая палитра.

→

HR

Welcome to Northwind — Maya's plan

План онбординга нового сотрудника: schedule на первые недели, контакты команды, ресурсы для изучения. Тёплая HR-эстетика.

→

Finance

Northwind — Q3 Financial Report

Финансовый отчёт квартала: revenue, costs, GP, key metrics с графиками. Корпоративный сине-зелёный стиль.

→

Runbook

Auth Service — Runbook

Инженерный регламент для дежурного: симптомы, диагностика, шаги фикса, эскалация. Тёмная palette с mint-акцентами для критичной инфы.

→

Sprite

Nintendo, 1889 — sprite

Спрайт-анимация в стиле ретро-консолей: пиксельные кадры, ограниченная палитра, ручной таймлайн. Демонстрация frame-based motion.

→

Motion

Reach every country — Charlotte & Vine

Раскадровка анимационной сцены: ключевые фреймы, пометки переходов, тайминги. Тёплая редакторская palette, как в book design.

→

CSS · 5 эффектов

Basic

Простые универсальные эффекты: fade-in, scale, slide, rotate, flip. Базовая аптечка для любых элементов.

→

CSS · 5 эффектов

Entrances

Появление: elliptic, swing, puff-in, bounce, scale-vertical. Подходит для hero-блоков и модалок.

→

CSS · 5 эффектов

Exits

Исчезновение: fade-out, scale-out, slide-blurred, puff-out, roll-out. Для закрытия модалок и dismiss-action.

→

CSS · 5 эффектов

Text

Текстовые: tracking-in-expand, text-focus-in, text-pop-up, shadow-pop, tracking-contract. Premium-вайб для заголовков.

→

CSS · 5 эффектов · loop

Attention

Привлечение внимания: vibrate, heartbeat, jello, shake, wobble. Все играют infinite — для алертов и badge'ей.

→

CSS · 5 эффектов · loop

Background

Фон и заливки: bg-pan, color-change, gradient-shimmer (наш золотой переливающийся текст). Для hero-блоков и accent-плашек.

→

R3F · MeshTransmission · drei

Crystal Dashboard — Premium Analytics

Полный дашборд: 3 KPI-карточки (Revenue $2.34M / Active 8,742 / Churn 2.4%) с counter-up и mini-sparkline, ряд из линейного chart (12 weeks) и donut-chart (Revenue by plan), таблица 10 клиентов с поиском и сортировкой по любому полю. Ночной золотой градиент фона, spotlight-dim при hover на текст, hover-zoom на всех числах, tooltip на барах/точках/секторах. 100% HTML/SVG/CSS, никаких WebGL.

→