useGradient

@hua-labs/hua/motion

다이나믹 CSS 그래디언트 생성 및 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useGradient } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

const gradient = useGradient({
  colors: ["#ff0080", "#7928ca", "#0070f3"],
  autoStart: true,
});

return (
  <div style={gradient.style} className="h-64 rounded-lg">
    Animated Gradient Background
  </div>
);

라이브 데모

선셋 그래디언트 데모

선셋

오션 그래디언트 데모

오션

API 레퍼런스

옵션

이름	타입	기본값	설명
colors	string[]	["#60a5fa", "#34d399", "#fbbf24", "#f87171"]	docs:hooks.use-gradient.options.colors
duration	number	6000	docs:hooks.use-gradient.options.duration
direction	"horizontal" \| "vertical" \| "diagonal"	"diagonal"	docs:hooks.use-gradient.options.direction
size	number	300	docs:hooks.use-gradient.options.size
easing	"linear" \| "ease-in-out" \| "ease-in" \| "ease-out"	"ease-in-out"	docs:hooks.use-gradient.options.easing
autoStart	boolean	false	docs:hooks.use-gradient.options.autoStart

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-gradient.returns.ref
style	CSSProperties	docs:hooks.use-gradient.returns.style
isVisible	boolean	docs:hooks.use-gradient.returns.isVisible
isAnimating	boolean	docs:hooks.use-gradient.returns.isAnimating
progress	number	docs:hooks.use-gradient.returns.progress
start	() => void	docs:hooks.use-gradient.returns.start
pause	() => void	docs:hooks.use-gradient.returns.pause
resume	() => void	docs:hooks.use-gradient.returns.resume
stop	() => void	docs:hooks.use-gradient.returns.stop
reset	() => void	docs:hooks.use-gradient.returns.reset

사용 사례

배경 효과

동적 배경 그래디언트 애니메이션

히어로 섹션

페이지 진입 시 히어로 영역 애니메이션

버튼

버튼 호버 및 클릭 피드백 효과

카드

카드 컴포넌트 호버 및 클릭 효과

useRepeat useLoadingSpinner