ruucm/shadergradient

어떤 프로젝트인가요?

핵심 기능

• 01plane, sphere, waterPlane mesh로 애니메이션 3D 그라디언트를 렌더링합니다.
• 02props로 색상, 애니메이션 속도, 왜곡 강도, 주파수를 설정할 수 있습니다.
• 03온라인 커스터마이저에서 복사한 URL을 통해 설정을 불러옵니다.
• 04SSR에 안전한 canvas를 갖춘 @shadergradient/vue 패키지로 Vue 3 및 Nuxt를 지원합니다.
• 05디자인 도구에서 사용할 수 있는 Figma 플러그인과 Framer 컴포넌트를 제공합니다.

활용 사례

• React 또는 Next.js 랜딩 페이지에 애니메이션 그라디언트 히어로 배경을 추가합니다.
• 웹사이트에서 만든 그라디언트를 Vue 또는 Nuxt 앱에서 재사용합니다.
• Figma 또는 Framer 디자인에서 그라디언트 비주얼을 제작합니다.

빠른 시작

1. 1

   React renderer와 peer dependencies를 설치합니다

   npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
2. 2

   Three.js 타입 정의를 설치합니다

   npm i -D @types/three
3. 3

   README의 사용 예시처럼 앱에서 ShaderGradientCanvas 안에 ShaderGradient를 렌더링합니다

사용 전 알아둘 점

• !프로젝트에 라이선스가 명시되어 있지 않아 재사용 권한이 불분명합니다.
• !Next.js 15 App Router에는 React 19와 @react-three/fiber v9가 필요합니다. v8은 호환되지 않습니다.

토픽

자주 묻는 질문

shadergradient은(는) 무엇인가요?

Three.js와 React Three Fiber 기반의 React용 커스터마이즈 가능한 3D 애니메이션 그라디언트 렌더러로, Vue·Framer·Figma 버전도 제공합니다. Shader Gradient는 애니메이션 3D 그라디언트 배경을 렌더링하는 컴포넌트 모음입니다. 핵심 패키지인 @shadergradient/react는 React Three Fiber와 Three.js 기반의 ShaderGradient 렌더러와 ShaderGradientCanvas 래퍼를 제공합니다. mesh 유형(plane, sphere, waterPlane), 색상, 애니메이션 속도, 강도, 주파수, 조명, 카메라 설정 등의 props로 그라디언트 모양을 조정할 수 있습니다.

shadergradient은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

shadergradient에는 명시된 라이선스가 없습니다. 코드는 공개되어 있지만 라이선스가 없으면 재사용 허가가 명확하지 않으므로, 사용 전에 작성자에게 문의하는 것이 좋습니다.

shadergradient은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. shadergradient의 마지막 커밋은 2026년 9월 23일입니다.

shadergradient은(는) 어디에 사용할 수 있나요?

React 또는 Next.js 랜딩 페이지에 애니메이션 그라디언트 히어로 배경을 추가합니다. 웹사이트에서 만든 그라디언트를 Vue 또는 Nuxt 앱에서 재사용합니다. Figma 또는 Framer 디자인에서 그라디언트 비주얼을 제작합니다.

shadergradient는 어떻게 설치하나요?

React renderer와 peer dependencies를 설치합니다: npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls Three.js 타입 정의를 설치합니다: npm i -D @types/three README의 사용 예시처럼 앱에서 ShaderGradientCanvas 안에 ShaderGradient를 렌더링합니다

shadergradient은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/ruucm/shadergradient