DavidHDev/canvas-ui

어떤 프로젝트인가요?

핵심 기능

• 01유체, 불꽃, 유리, 레트로 글리치, 파티클, 3D 오브젝트를 아우르는 효과 35종
• 02React, Solid, Preact, Vue, Svelte, 순수 JavaScript용 컴포넌트
• 03WebGL(GLSL) 및 WebGPU(vgpu를 통한 WGSL) 렌더러 빌드
• 04shadcn 호환 레지스트리를 통해 소스를 프로젝트에 복사
• 05효과 아래의 콘텐츠가 실제로 렌더링되어 인터랙티브하게 유지
• 06AI 어시스턴트가 컴포넌트를 찾아 설치할 수 있는 MCP 지원

활용 사례

• 마케팅 랜딩 페이지의 히어로 영역에 액체 또는 유리 효과 추가
• 포트폴리오나 디자인 중심 사이트에 인터랙티브한 시각적 완성도 더하기
• 창작 웹 프로젝트에 레트로 글리치 또는 ASCII 렌즈 적용
• React 또는 Vue 앱 안에서 GLB 또는 SVG 모델을 3D 장면으로 렌더링

빠른 시작

1. 1

   아직 shadcn을 설정하지 않았다면 shadcn init을 실행하세요

   npx shadcn@latest init
2. 2

   Liquid for React와 같은 컴포넌트를 추가하세요

   npx shadcn@latest add @canvas-ui/liquid-react
3. 3

   코드에서 컴포넌트로 페이지를 감싸세요

사용 전 알아둘 점

• !README에는 라이선스가 MIT + Commons Clause라고 나와 있으며, 소프트웨어 판매를 제한합니다. 반면 메타데이터에는 감지된 라이선스가 없습니다.
• !대부분의 효과는 실험적인 HTML-in-canvas API에 의존하며, 그 외 환경에서는 GPU 오버레이로 대체됩니다.
• !WebGPU 빌드에는 Chrome 또는 Edge 113 이상, Safari 26 이상, Firefox 141 이상과 같은 최신 브라우저가 필요합니다.

포함된 컬렉션

토픽

자주 묻는 질문

canvas-ui은(는) 무엇인가요?

실제 HTML 콘텐츠 위에 액체, 유리, 불꽃 등의 효과를 적용하는 프레임워크 독립형 캔버스 UI 효과 35종을 복사해 사용하는 라이브러리입니다. Canvas UI는 캔버스에 그리는 창의적인 시각 컴포넌트 모음입니다. 유체 시뮬레이션, 유리 왜곡, 불꽃, 글리치, 3D 장면 등의 효과가 페이지의 실제 인터랙티브 HTML 위에 적용되므로 텍스트를 선택할 수 있고 링크도 클릭할 수 있습니다. React, Solid, Preact, Vue, Svelte, 순수 JavaScript용 컴포넌트를 제공합니다.

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

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

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

6개월 이내 업데이트. canvas-ui의 마지막 커밋은 2026년 10월 3일입니다.

canvas-ui은(는) 어디에 사용할 수 있나요?

마케팅 랜딩 페이지의 히어로 영역에 액체 또는 유리 효과 추가 포트폴리오나 디자인 중심 사이트에 인터랙티브한 시각적 완성도 더하기 창작 웹 프로젝트에 레트로 글리치 또는 ASCII 렌즈 적용 React 또는 Vue 앱 안에서 GLB 또는 SVG 모델을 3D 장면으로 렌더링

canvas-ui는 어떻게 설치하나요?

아직 shadcn을 설정하지 않았다면 shadcn init을 실행하세요: npx shadcn@latest init Liquid for React와 같은 컴포넌트를 추가하세요: npx shadcn@latest add @canvas-ui/liquid-react 코드에서 컴포넌트로 페이지를 감싸세요

canvas-ui은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/DavidHDev/canvas-ui