useGradient

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

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

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


colors	string[]	["#60a5fa", "#34d399", "#fbbf24", "#f87171"]	Array of gradient colors
duration	number	6000	Animation cycle duration in milliseconds
direction	"horizontal" \| "vertical" \| "diagonal"	"diagonal"	Gradient direction
size	number	300	Background size percentage
easing	"linear" \| "ease-in-out" \| "ease-in" \| "ease-out"	"ease-in-out"	Animation easing function
autoStart	boolean	false	Start gradient animation automatically


ref	RefObject<T \| null>	Ref to attach to element
style	CSSProperties	Style with background gradient and animation
isVisible	boolean	Visibility state
isAnimating	boolean	Whether gradient is animating
progress	number	Animation progress (0-1)
start	() => void	Start gradient animation
pause	() => void	Pause animation
resume	() => void	Resume paused animation
stop	() => void	Stop animation
reset	() => void	Reset to initial state

useRepeat useOrchestrationPro