Remotion HtmlInCanvas
2026-05-04 발견. 실험적 API라 킵만 해두고 안정화되면 적용 예정.
뭔데
Remotion v4.0.455+에서 지원하는 <HtmlInCanvas> 컴포넌트. DOM 노드를 캔버스에 그린 다음 Canvas 2D, WebGL, WebGPU로 후처리할 수 있다.
쉽게 말하면 “평범한 HTML을 캔버스에 올려서 셰이더 효과를 입히는 것”..이라고 보면 된다.
쓸만한 효과
- CRT — 옛날 모니터 스캔라인 + 화면 곡률. 레트로 연출에.
- 글리치 — 충격 장면, 전환 효과
- 빈티지 — 필름 느낌 후처리
- 발광 차트 — 정보 그래픽 쇼츠에서 임팩트
- 돋보기 — 특정 부분 확대 강조
- 큐브 전환 — 씬 전환 애니메이션
제약
- Chrome Canary v149+ 필수 (플래그 활성화)
- WebGL 사용 시
--gl=angle렌더링 플래그 - 중첩 HtmlInCanvas 불가
- 실험적 API — 향후 변경 가능
링크
- 공식 문서: https://www.remotion.dev/docs/html-in-canvas
- 예제 코드 + 데모: https://github.com/remotion-dev/html-in-canvas
- Agent Skills (Claude/Cursor용 지식 베이스) 포함