Modern Site Starter · Session 3b
Immersive Palette
10 immersive паттернов для Track 3 сайтов. R3F, GLSL шейдеры, Rive, Lottie, Spline. Hero выше — HeroOrb3D с живым distort-материалом.
02 · ShaderGradient
GLSL мёш с кастомным шейдером
Реальный fragment shader на GPU — не CSS blur. Плавность и глубина недостижимые через 2D. Fallback через CSS gradient.
03 · ParticleField
Частицы в пространстве
Buffer geometry 600-1200 точек, крутятся лениво. Zero-bloat — чистый Three.js Points без instanced meshes.
04 · FloatingText3D
3D-типографика с float
Text3D из drei + Float анимация. Для кириллицы нужен конвертированный typeface.json — см. комментарий в файле.
05 · WarpImage
Наведи на картинку — она искажается
Displacement shader. Премиум-feel для hero image или creative portfolio. Smooth lerp in/out of hover state.
06 · ScrollDrivenScene
Сцена реагирует на скролл
R3F ScrollControls + камера, едущая внутрь. Классика Apple product pages. Прокрути ниже.
Требуют asset-файлы
Ещё три в библиотеке
Эти паттерны работают с внешними файлами (Rive / Lottie / Spline) — покажем на реальных проектах. Здесь — референсные описания.
№ 7
.riv
RiveInteractive
State machine анимация с hover/click input. Ставь в public/rive/.
№ 8
.lottie
LottieHero
After Effects vector animation. ~30kb runtime. Placeholder public/animations/.
№ 9
URL
SplineEmbed
iframe embed Spline сцены. Public URL из Spline editor.
№ 10
guard
ImmersiveWrapper
Perf wrapper — проверяет WebGL, CPU cores, memory, prefers-reduced-motion. Использован на всех секциях выше.