AnimatedGradient

@hua-labs/ui/advanced

v1.1.0

Pro

베타

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

Beautiful animated gradient backgrounds for hero sections, backgrounds, and overlays. Supports mesh, linear, radial, and conic gradients.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { AnimatedGradient } from "@hua-labs/ui/advanced";

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

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

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

그라디언트 타입

Select a gradient type to preview

Pro

MESH

커스텀 색상

Custom color combinations

Blue → Purple → Pink

Emerald → Cyan → Indigo

Conic Rainbow

Radial Sunset

속도 조절

Animation speed comparison

Props

이름	타입	기본값	설명
`colors`	`string[]`	`["#ff0080", "#7928ca", "#0070f3", "#00dfd8"]`	Array of gradient colors
`speed`	`number`	`3`	Animation speed in seconds
`blur`	`boolean`	`true`	Enable blur effect
`blurAmount`	`number`	`100`	Blur amount in pixels
`type`	`"linear" \| "radial" \| "conic" \| "mesh"`	`"mesh"`	Gradient type
`animate`	`boolean`	`true`	Enable animation

코드 예시

docs:common.basicUsagetsx

import { AnimatedGradient } from '@hua-labs/ui/advanced';

<AnimatedGradient
  type="mesh"
  className="absolute inset-0 -z-10"
/>

docs:components.animatedGradient.examples.customColorstsx

<AnimatedGradient
  colors={["#667eea", "#764ba2", "#f093fb"]}
  speed={5}
  type="conic"
/>

docs:components.animatedGradient.examples.heroBackgroundtsx

<section className="relative min-h-screen">
  <AnimatedGradient
    type="mesh"
    colors={["#3b82f6", "#8b5cf6", "#ec4899"]}
    className="absolute inset-0 -z-10"
  />
  <div className="relative z-10 p-12">
    <h1>Welcome</h1>
  </div>
</section>

접근성

•모션 감소: prefers-reduced-motion 설정 존중
•장식 전용: 순수 장식 요소로 콘텐츠 접근성에 영향 없음

GlowCardPro TextRevealPro