目を引く（Attention）

'use client';
import { useAnimation, motion } from 'framer-motion';

export default function AttentionDemo() {
  const controls = useAnimation();

  const triggerBounce = async () => {
    await controls.start({
      y: [0, -24, 0, -12, 0, -6, 0],
      transition: { duration: 0.7, ease: 'easeOut' },
    });
  };

  const triggerShake = async () => {
    await controls.start({
      x: [0, -12, 12, -12, 12, -6, 6, 0],
      transition: { duration: 0.5, ease: 'easeInOut' },
    });
  };

  const triggerPulse = async () => {
    await controls.start({
      scale: [1, 1.25, 1, 1.25, 1, 1.1, 1],
      transition: { duration: 0.7, ease: 'easeInOut' },
    });
  };

  const triggerFlash = async () => {
    await controls.start({
      opacity: [1, 0, 1, 0, 1, 0, 1],
      transition: { duration: 0.6 },
    });
  };

  return (
    <div>
      <motion.div animate={controls}>
        アニメーション対象
      </motion.div>

      <button onClick={triggerBounce}>バウンス</button>
      <button onClick={triggerShake}>シェイク</button>
      <button onClick={triggerPulse}>パルス</button>
      <button onClick={triggerFlash}>点滅</button>
    </div>
  );
}

// jQueryプラグイン（jQuery UI）を使ったバウンス
$('#box').effect('bounce', { times: 3 }, 400);

// シェイク
$('#box').effect('shake', { times: 3, distance: 10 }, 400);

// パルス（強調）
$('#box').effect('pulsate', { times: 3 }, 400);

// 点滅
$('#box').fadeOut(150).fadeIn(150).fadeOut(150).fadeIn(150);

// addClass でCSSアニメーションをトリガーする方法（プラグイン不要）
$('#box').addClass('animate-bounce');
setTimeout(() => $('#box').removeClass('animate-bounce'), 1000);