Гайд по анимациям для лендинга GEO — Clean B2B

Гайд по анимациям

Clean B2B оформление (Slate + Cobalt + Aqua) для лендинга GEO-продвижения. Демки сохранены, палитра и типографика приведены к “корпоративной” подаче.

Clean B2B

1. Morphing Blob — Морфинговое пятно

Где использовать: декоративные элементы фона, hero-секция, абстрактные иллюстрации.
Эффект: органичная форма меняет очертания и создаёт мягкую динамику.

Demo
Живая форма
/* CSS */
.blob {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation: morphing 8s ease-in-out infinite;
}

@keyframes morphing {
  0%, 100% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    transform: rotate(0deg);
  }
  25% { border-radius: 70% 30% 50% 50% / 60% 70% 30% 40%; }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: rotate(180deg);
  }
  75% { border-radius: 60% 40% 30% 70% / 40% 40% 70% 50%; }
}

2. Particle Burst — Взрыв частиц

Где использовать: при загрузке страницы, success-сообщения, микровзаимодействия в UI.
Эффект: частицы разлетаются из центральной точки.

Demo
/* CSS */
.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  animation: particleBurst 2.2s ease-out infinite;
}

@keyframes particleBurst {
  0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(0); opacity: 0; }
}

/* направления для частиц */
.particle:nth-child(1) { --x: 60px; --y: -60px; }
.particle:nth-child(2) { --x: -70px; --y: -50px; }

3. Holographic Shimmer — Голографическое мерцание

Где использовать: featured-карточки, “рекомендуемый” тариф, CTA-плашки.
Эффект: световая полоса мягко скользит по поверхности.

Demo
Shimmer
/* CSS */
.holographic { position: relative; overflow: hidden; }
.holographic::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: linear-gradient(45deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  animation: holographicSweep 3.2s linear infinite;
}

@keyframes holographicSweep {
  0% { transform: translateX(-35%) translateY(-35%) rotate(45deg); }
  100% { transform: translateX(35%) translateY(35%) rotate(45deg); }
}

4. Gradient Slide — Скользящий градиент

Где использовать: акцентные плашки, крупные CTA-блоки, фон заголовка секции.
Эффект: градиент плавно перемещается.

Demo
Gradient slide
/* CSS */
.element {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 60%, var(--highlight) 100%);
  background-size: 200% auto;
  animation: gradientSlide 3.4s linear infinite;
}

@keyframes gradientSlide { to { background-position: 200% center; } }

5. Glow Pulse — Мягкое свечение (вместо “неона”)

Где использовать: tech-акценты, “AI-mode”, хедлайн в тёмном блоке.
Эффект: пульсация подсветки без агрессивного кибер-неона.

Demo
AI MODE
/* CSS */
.glow {
  color: var(--secondary);
  text-shadow: 0 0 10px rgba(6,182,212,.45);
  animation: neonPulse 2.4s ease-in-out infinite;
}

6. 3D Flip Card — 3D переворот карточки

Где использовать: карточки услуг, этапы работы (детали на обороте).
Эффект: карточка переворачивается в 3D при наведении.

Demo (наведите курсор)
Лицевая сторона
Обратная сторона
/* CSS */
.flip-container { perspective: 1000px; }
.flip-card { transform-style: preserve-3d; transition: transform .85s cubic-bezier(.175,.885,.32,1.15); }
.flip-container:hover .flip-card { transform: rotateY(180deg); }
.flip-front, .flip-back { backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }

7. Wave Motion — Волновое движение

Где использовать: фоновые элементы, progress-индикаторы, декоративные блоки.
Эффект: плавная “волна” внутри контейнера.

Demo
Wave
/* CSS */
.wave {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  border-radius: 1000px 1000px 0 0;
  animation: wave 4.2s ease-in-out infinite;
}

8. Magnetic Hover — Магнитное притяжение

Где использовать: интерактивные кнопки, карточки проектов, элементы навигации.
Эффект: лёгкое “притяжение” при hover.

Demo (hover)
Magnetic
/* CSS */
.magnetic { transition: transform .28s cubic-bezier(.175,.885,.32,1.1); }
.magnetic:hover { transform: scale(1.03) translateY(-4px); }

9. Glitch — цифровой акцент (умеренно)

Где использовать: tech-подписи, “AI/LLM” акценты (не на каждом экране).
Эффект: лёгкие цифровые “помехи”.

Demo
GLITCH
/* HTML */
<div class="glitch-text" data-text="GLITCH">GLITCH</div>

/* CSS */
.glitch-text::before { color: var(--secondary); }
.glitch-text::after  { color: var(--primary); }

10. Parallax Layers — Параллакс слоёв

Где использовать: hero-секция, фоновые элементы (лучше лёгко и не на mobile).
Эффект: слои движутся с разной скоростью.

Demo
Parallax
/* CSS */
.layer-1 { animation: parallax1 6s ease-in-out infinite; }
.layer-2 { animation: parallax2 6s ease-in-out infinite; }
.layer-3 { animation: parallax3 6s ease-in-out infinite; }

11. Text Shimmer — Мерцающий текст

Где использовать: заголовки H1/H2 или ключевые тезисы (точечно).
Эффект: градиент внутри текста перемещается.

Demo
Мерцающий текст
/* CSS */
.text-shimmer{
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 55%, var(--highlight) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 3.2s linear infinite;
}

12. Liquid Button — “жидкая” кнопка

Где использовать: основной CTA (если стиль лендинга допускает эффект).
Эффект: мягкая “волна” внутри кнопки при наведении.

Demo (hover)
/* CSS */
.liquid-button{ position: relative; overflow: hidden; }
.liquid-button::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  border-radius:50%;
  background: rgba(255,255,255,.22);
  transform: translate(-50%,-50%);
  transition: width .6s, height .6s;
}
.liquid-button:hover::before{ width: 340px; height: 340px; }

Рекомендации по использованию

Где применить на лендинге GEO

  • Первый экран: Morphing Blob (фон), Text Shimmer (H1), Liquid Button (CTA)
  • Блок результатов: Holographic Shimmer (карточки), Particle Burst (успешные состояния)
  • Этапы работы: 3D Flip Card (детали этапов), Magnetic Hover (кликабельные карточки)
  • Тарифы: Shimmer для “рекомендуемого”, Glow Pulse — точечно для акцента
  • FAQ: Wave Motion как декоративный элемент

Технические правила

  • Performance: анимируйте transform/opacity, избегайте тяжёлых фильтров
  • Mobile: упрощайте/отключайте Glitch и Parallax
  • Accessibility: добавьте @media (prefers-reduced-motion: reduce) (уже включено)
  • Сочетаемость: не более 2–3 типов анимаций на одном экране