문서

설치와 사용법

시작하기

Vivid Kit은 무료 React 애니메이션 컴포넌트 모음입니다. 컴포넌트 상세 페이지의 코드 탭에서 복사하거나, 아래 CLI로 설치하세요.

shadcn CLI로 컴포넌트를 프로젝트에 추가합니다(컴포넌트 상세의 설치 명령 참고).

npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GradientFlowText-TS-TW

컴포넌트 상세 페이지 → 코드 탭에서 사용 예를 복사하고, 컴포넌트 소스를 프로젝트에 붙여넣습니다. 커스터마이즈 탭에서 props를 실시간 조절해 값을 정한 뒤 복사하면 편합니다. AI로 응용하려면 상단의 'AI 프롬프트 복사'를 눌러 붙여넣으세요.

컴포넌트는 근-블랙 배경 위 보라(#C084FC)·마젠타(#EC4899) 액센트를 기본으로 합니다. props로 색을 바꿀 수 있습니다.

--accent: #C084FC;
--accent-2: #EC4899;
--bg-base: #08060E;

모든 컴포넌트는 prefers-reduced-motion을 존중하고(모션 최소화 시 정적 표시), 타이머·리스너·rAF를 정리합니다. 커스터마이즈 탭의 색 컨트롤은 실시간 WCAG 대비비 배지를 제공합니다.

컴포넌트 코드는 자유롭게 사용할 수 있습니다. 자세한 내용은 약관 페이지를 참고하세요.