애니메이션

1'use client';
2 
3import { useMotion } from '@hua-labs/hua/framework';
4 
5export function AnimatedCard() {
6  const motion = useMotion({
7    type: 'fadeIn',
8    duration: 500
9  });
10 
11  return (
12    <div ref={motion.ref} style={motion.style}>
13      <h1>Animated Content</h1>
14    </div>
15  );
16}

1// 사용 가능한 모션 타입
2const fadeIn = useMotion({ type: 'fadeIn' });
3const slideUp = useMotion({ type: 'slideUp' });
4const slideDown = useMotion({ type: 'slideDown' });
5const slideLeft = useMotion({ type: 'slideLeft' });
6const slideRight = useMotion({ type: 'slideRight' });
7const scaleIn = useMotion({ type: 'scaleIn' });
8const bounceIn = useMotion({ type: 'bounceIn' });

1'use client';
2 
3import { useMotion } from '@hua-labs/hua/framework';
4 
5export function StaggeredList({ items }) {
6  return (
7    <div>
8      {items.map((item, index) => {
9        const motion = useMotion({
10          type: 'slideUp',
11          duration: 400,
12          delay: index * 100, // stagger effect
13          easing: 'easeOut'
14        });
15 
16        return (
17          <div key={item.id} ref={motion.ref} style={motion.style}>
18            {item.content}
19          </div>
20        );
21      })}
22    </div>
23  );
24}

1'use client';
2 
3import { useScrollReveal } from '@hua-labs/motion-core';
4 
5export function ScrollRevealSection() {
6  const reveal = useScrollReveal({
7    threshold: 0.2, // 20% 보일 때 트리거
8    once: true,     // 한 번만 실행
9  });
10 
11  return (
12    <section
13      ref={reveal.ref}
14      style={{
15        opacity: reveal.isVisible ? 1 : 0,
16        transform: reveal.isVisible
17          ? 'translateY(0)'
18          : 'translateY(20px)',
19        transition: 'all 0.5s ease-out'
20      }}
21    >
22      <h2>Scroll to reveal!</h2>
23    </section>
24  );
25}