paper-design/shaders

어떤 프로젝트인가요?

핵심 기능

• 01의존성 없는 캔버스 셰이더 컴포넌트
• 02React 및 vanilla JavaScript용 npm 패키지로 제공
• 03Paper에서 시각적으로 디자인하고 코드로 내보내기
• 04색상, 왜곡, 소용돌이, 속도, 크기 맞춤 설정
• 05애니메이션 선택 가능

활용 사례

• 마케팅 웹사이트에 애니메이션 그라데이션 배경 추가
• 셰이더 텍스처로 도형이나 텍스트 마스킹
• Paper에서 시각적 스타일을 프로토타이핑한 뒤 코드로 배포

빠른 시작

1. 1

   React 패키지를 설치합니다

   npm i @paper-design/shaders-react
2. 2

   또는 vanilla JS 패키지를 설치합니다

   npm i @paper-design/shaders
3. 3

   0.0.x 버전 관리에서는 호환성을 깨는 변경 사항이 배포될 수 있으므로 의존성 버전을 고정합니다

4. 4

   MeshGradient와 같은 셰이더 컴포넌트를 가져와 colors 및 style props와 함께 사용합니다

사용 전 알아둘 점

• !프로젝트는 0.0.x 버전 관리 체계를 사용하므로 릴리스 간에 호환성을 깨는 변경 사항이 있을 수 있습니다. 버전을 고정해야 합니다.
• !React와 vanilla JS만 지원하며, Vue는 아직 지원하지 않습니다.

토픽

자주 묻는 질문

shaders은(는) 무엇인가요?

웹 배경과 텍스처를 위한 무의존성 WebGL 스타일 캔버스 셰이더로, npm(React 또는 vanilla JS)에서 사용하거나 Paper에서 시각적으로 디자인할 수 있습니다. Paper Shaders는 그라데이션 배경 같은 애니메이션 또는 정적 텍스처를 웹사이트에 추가하거나, 셰이더 효과로 도형과 텍스트를 마스킹할 수 있는 캔버스 기반 컴포넌트 모음입니다. vanilla JavaScript용 @paper-design/shaders와 React용 @paper-design/shaders-react, 두 가지 npm 패키지로 배포되며 런타임 의존성이 없습니다.

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

shaders은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

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

활발히 유지보수 중. shaders의 마지막 커밋은 2026년 11월 5일입니다.

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

마케팅 웹사이트에 애니메이션 그라데이션 배경 추가 셰이더 텍스처로 도형이나 텍스트 마스킹 Paper에서 시각적 스타일을 프로토타이핑한 뒤 코드로 배포

shaders는 어떻게 설치하나요?

React 패키지를 설치합니다: npm i @paper-design/shaders-react 또는 vanilla JS 패키지를 설치합니다: npm i @paper-design/shaders 0.0.x 버전 관리에서는 호환성을 깨는 변경 사항이 배포될 수 있으므로 의존성 버전을 고정합니다 MeshGradient와 같은 셰이더 컴포넌트를 가져와 colors 및 style props와 함께 사용합니다

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

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/paper-design/shaders