shader-effects-inc/shaders

어떤 프로젝트인가요?

핵심 기능

• 01그라디언트, 노이즈, 글래스, 전환 등을 포함한 200개 이상의 WebGPU 효과 컴포넌트
• 02React, Vue, Svelte, Solid와 JavaScript에서 동일한 props와 API 사용
• 03프레임워크 컴포넌트 코드를 내보내는 시각 디자인 에디터
• 04선택한 컴포넌트를 잠금 파일과 함께 코드베이스에 동기화하는 CLI
• 05AI 코딩 어시스턴트를 위한 MCP 서버와 agent skill
• 06WGSL 픽셀 코드로 정의하는 사용자 지정 컴포넌트

활용 사례

• 마케팅 사이트나 랜딩 페이지에 애니메이션 그라디언트 또는 글래스 배경 추가
• 브라우저 기반 에디터에서 시각 효과를 프로토타이핑하고 React 또는 Vue 앱으로 내보내기
• AI 코딩 에이전트가 기존 프로젝트에서 셰이더 효과를 찾아 설치하도록 하기
• Svelte 또는 Solid 프런트엔드에서 인터랙티브한 커서 효과나 호버 효과 만들기

빠른 시작

1. 1

   패키지를 설치하세요

   npm install shaders
2. 2

   사용하는 프레임워크(예: React)에서 Shader와 컴포넌트를 가져와 렌더링하세요

사용 전 알아둘 점

• !Pro 프리셋, 섹션 및 일부 에디터 기능을 사용하려면 유료 Pro 플랜이 필요합니다.
• !디자인 에디터와 내보내기 기능은 MIT 라이선스 패키지와 별개인 shaders.com 계정에 연결되어 있습니다.
• !효과는 WebGPU에 의존하므로 브라우저가 WebGPU를 지원해야 합니다.

토픽

자주 묻는 질문

shaders은(는) 무엇인가요?

React, Vue, Svelte, Solid와 일반 JavaScript에서 바로 사용할 수 있는 WebGPU 셰이더 효과 컴포넌트 Shaders는 그라디언트, 노이즈, 글래스, 왜곡, 전환, 블러, 커서 효과 등의 WebGPU 시각 효과를 프레임워크 컴포넌트로 제공하는 라이브러리입니다. Shader 요소는 캔버스를 렌더링하며, 자식 컴포넌트는 위에서 아래 순서로 쌓이고 GPU에서 블렌딩됩니다. React, Vue, Svelte, Solid와 바닐라 JavaScript용 진입점에서 동일한 props를 사용할 수 있습니다.

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

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

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

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

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

마케팅 사이트나 랜딩 페이지에 애니메이션 그라디언트 또는 글래스 배경 추가 브라우저 기반 에디터에서 시각 효과를 프로토타이핑하고 React 또는 Vue 앱으로 내보내기 AI 코딩 에이전트가 기존 프로젝트에서 셰이더 효과를 찾아 설치하도록 하기 Svelte 또는 Solid 프런트엔드에서 인터랙티브한 커서 효과나 호버 효과 만들기

shaders는 어떻게 설치하나요?

패키지를 설치하세요: npm install shaders 사용하는 프레임워크(예: React)에서 Shader와 컴포넌트를 가져와 렌더링하세요

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

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