TL;DR

  • Shaders는 React, Vue, Svelte, Solid, JavaScript에서 사용할 수 있는 200개 이상의 WebGPU 효과 컴포넌트를 제공하는 패키지임.
  • 효과는 선언형 <Shader> 컴포넌트 안에 레이어로 배치되며, 위에서 아래 순서로 평가되고 GPU에서 혼합됨.
  • shaders.com의 무한 캔버스 편집기에서 효과를 시각적으로 설계하고 각 프레임워크용 컴포넌트 트리를 무료로 내보낼 수 있음.
  • CLI와 MCP 서버를 통해 설계한 효과를 코드베이스에 설치·동기화하고, 코딩 에이전트에서 검색·편집할 수 있음.
  • MIT 라이선스는 엔진과 컴포넌트, 프레임워크 바인딩에 적용되며, 편집기·프리셋 등 플랫폼 기능은 별도 이용 약관을 따름.

Shaders란?

  • npm install shaders로 설치하는 Shaders는 React, Vue, Svelte, Solid, JavaScript용 WebGPU 효과 컴포넌트 패키지임.
  • 그라디언트, 노이즈, 유리, 금속, 빛, 왜곡, 전환, 블러, 커서 효과 등 200개 이상의 효과를 컴포넌트로 제공하며, 중첩·혼합·마스킹 가능함.
  • TypeScript를 지원하고 최적화가 폭넓게 적용되어 있으며, 타입이 지정된 속성(props)은 반응형으로 갱신되고 서버 사이드 렌더링(SSR)에 안전함.
  • 수천 개 웹사이트에서 16,000명 이상의 디자인 엔지니어가 사용 중임.

컴포넌트

  • 모든 효과는 컴포넌트이며, <Shader>가 캔버스를 렌더링하고 자식 컴포넌트가 레이어를 구성함. 레이어는 위에서 아래 순서로 평가되고 GPU에서 혼합됨.
  • React에서는 shaders/react에서 Shader, LinearGradient, CursorTrail을 가져와 사용하며, LinearGradient에 색상 속성을 설정하고 CursorTrail을 레이어로 배치함. React용 Shaders 시작하기.
  • Vue에서는 shaders/vue에서 같은 컴포넌트를 가져와 템플릿의 <Shader> 안에 배치함. Vue용 Shaders 시작하기.
  • Svelte에서는 shaders/svelte에서 컴포넌트를 가져와 <Shader> 안에 배치함. Svelte용 Shaders 시작하기.
  • Solid에서는 shaders/solid에서 컴포넌트를 가져와 <Shader> 안에 배치함. Solid용 Shaders 시작하기.
  • JavaScript에서는 shaders/js의 createShader를 호출하고, 대상 요소와 LinearGradient, CursorTrail을 지정하는 컴포넌트 배열을 전달함. JavaScript용 Shaders 시작하기.
  • 전체 200개 이상의 컴포넌트를 실시간 미리보기 및 모든 속성 문서와 함께 둘러볼 수 있음.

시각적으로 설계하고 코드 내보내기

  • 대부분의 사용자는 효과 코드를 직접 작성하는 대신 시각적으로 설계함.
  • shaders.com의 디자인 편집기는 컴포넌트를 쌓고, 실제 조작 컨트롤로 모든 속성을 조정하며, 커서나 타임라인을 통해 속성을 제어하고 결과를 실시간으로 확인하는 무한 캔버스임.
  • 결과가 완성되면 코드 내보내기 기능으로 해당 프레임워크의 컴포넌트 트리를 복사해 바로 사용할 수 있음.
  • 계정이 있으면 설계와 내보내기를 무료로 이용할 수 있으며, 작업은 다시 열 수 있는 프로젝트로 저장됨.
  • 디자인 편집기 열기.

CLI

  • CLI는 코드베이스를 Shaders 계정에 연결해 설계한 효과를 실제 컴포넌트 파일로 프로젝트에 가져오고 동기화함.
  • npx shaders connect는 코드베이스를 Shaders 프로젝트에 연결하고, npx shaders install은 프로젝트에서 선택한 셰이더를 컴포넌트 파일로 작성하며, npx shaders update는 편집기에서 변경한 내용을 가져옴.
  • 프레임워크를 감지하고 컴포넌트 폴더에 파일을 작성하며, 설치 항목을 잠금 파일에 기록함. 전역 설치는 필요하지 않음.
  • CLI 안내서 읽기.

AI와 Shaders 사용

  • 코딩 에이전트에 사용자와 같은 도구를 제공할 수 있음.
  • MCP 서버는 npx shaders@latest install-mcp로 설정하며, Claude Code, Cursor, Codex, Windsurf, Copilot 등을 구성함. 에이전트는 사용자가 설계한 셰이더를 검색·설치·편집할 수 있고, 무료 계정을 포함한 모든 계정에서 작동함. MCP 안내서.
  • shaders.com/llms.txt는 모든 문서 페이지를 색인하며, shaders.com/llms-full.txt는 속성·기본값·범위를 포함한 전체 컴포넌트 참조를 제공함.

Shaders Pro

  • 위 기능은 모두 무료이며, Pro는 컴포넌트 라이브러리와 작업 흐름을 확장함.
  • 1,000개 이상의 프로덕션용 프리셋 및 컬렉션
  • 바로 삽입할 수 있는 완성형 웹사이트 섹션 55개 이상
  • 워터마크 없는 고화질 동영상 및 이미지 렌더링
  • Framer 플러그인을 통한 Framer 내부 원클릭 설치
  • 편집기의 무제한 버전 기록
  • CLI 및 MCP를 통한 Pro 프리셋
  • 독점 Discord 역할 및 채널, 우선 지원, 향후 모든 업데이트
  • 요금 보기.

자체 컴포넌트 만들기

  • 새 컴포넌트가 필요한 경우 직접 작성할 수 있음. 컴포넌트는 이름, 속성, 각 픽셀에서 그릴 내용을 담아 defineShader에 전달하는 일반 객체임.
  • 정의한 컴포넌트는 다른 컴포넌트처럼 <CustomShader>로 마운트할 수 있음.
  • 픽셀 부분은 두 가지 방식으로 작성할 수 있음. std 프리미티브 조합 방식은 실험적이며, WGSL을 직접 작성하는 방식은 안정적임.
  • 사용자 정의 컴포넌트 안내서 · 프리미티브 참조.

라이선스

  • 저장소의 엔진·모든 컴포넌트·프레임워크 바인딩과 shaders npm 패키지는 MIT 라이선스임.
  • shaders.com의 디자인 편집기·프리셋·섹션 및 기타 플랫폼 기능은 패키지와 별개이며 자체 이용 약관을 따름.

기여

  • 이슈와 풀 리퀘스트를 환영함. 작업을 시작하기 전에 기여 안내서를 확인해야 하며, 버그 수정 이상의 변경은 풀 리퀘스트 전에 이슈를 열어 논의해야 함.
  • 엔진은 packages/core에 있으며, 컴포넌트별 디렉터리는 src/shaders/ 아래에 있음. 프레임워크 패키지는 엔진에서 생성됨.
  • pnpm install로 의존성을 설치하고, pnpm lib:build로 모든 패키지를 빌드함. 이 과정에서 레지스트리와 프레임워크 컴포넌트가 다시 생성됨.
  • pnpm test는 엔진 테스트 모음을 실행함.