Modern Site Starter · Session 3
Motion Patterns Palette
12 копипаст-паттернов для modern-stack сайтов. Прокрути — каждая секция ниже показывает эффект вживую.
1 · Marquee
Бесконечная лента. Часто используется для showcase логотипов клиентов/партнёров.
2 · ThreeDTilt
Поводи курсором по карточкам — наклоняются следом. Spring на уходе.
Позиционирование и офферы
Tokens, motion, иммерсивность
Deploy, handoff, support
3 · CopyToClipboard
Rauno-style feedback. Клик — иконка меняется, лейбл перевернулся на «Скопировано».
4 · GradientMesh
Три размытых цветных blob-а плавно двигаются по секции. CSS + Motion, без шейдеров — мобилу выдержит.
Текст остаётся читаемым поверх gradient.
5 · HorizontalScroll
Секция "пиннится", скролл двигает панели горизонтально. GSAP ScrollTrigger + pin. Классика Apple product pages.
Step 1
Research & discovery
Step 2
Positioning & offers
Step 3
Design & build
Step 4
Deploy & support
6 · StickyParallax
Несколько layers с разной scroll-скоростью. Прокрути — foreground и background движутся независимо.
7 · AccordionReveal
Smooth height animation. Подходит для FAQ, changelog, expandable секций.
Ещё в библиотеке
№ 8
SplitTextReveal
Заголовок стартовой страницы — пример выше. Word- или char-level reveal при попадании в viewport.
№ 9
CursorFollower
Тонкая точка курсора с mix-blend-mode. Ставится в layout.tsx — живёт на всех страницах. Скрыта на touch.
№ 10
NoiseTexture
SVG film grain overlay. Подмешивается поверх плоских фонов — даёт живой текстурный feel (см. эту страницу).
№ 11
StickyHeader
Скрывается при scroll down, показывается при scroll up. Backdrop-blur для glass-feel.
№ 12
PageTransition
AnimatePresence-обёртка для smooth cross-route переходов в Next.js App Router.