Echo Ripple Button

Эффектный CTA для промо-экранов, лид-форм и launch-блоков, где нужен яркий акцент.

Framer MotionRipple timing

Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Echo Ripple Button

'use client';

import { motion } from 'framer-motion';
import { useState } from 'react';

export function EchoRippleButton() {
  const [seed, setSeed] = useState(0);

  return (
    <button onClick={() => setSeed((value) => value + 1)}>
      {[0, 1, 2].map((ring) => <motion.div key={String(seed) + '-' + String(ring)} initial={{ scale: 0.4, opacity: 0.55 }} animate={{ scale: 2.4, opacity: 0 }} transition={{ duration: 1.2, delay: ring * 0.14 }} />)}
      Echo
    </button>
  );
}