Демо 22 May 2026
sirius - живой DOM, искажённый внутри canvas
- TypeScript
- Vite
- WebGL
- HTML-in-Canvas
Демонстрация экспериментального API HTML-in-Canvas: настоящий DOM рисуется в WebGL и искажается шейдерами в шести сценах, с фолбэком. TypeScript + WebGL.
Задача
Показать возможности экспериментального API HTML-in-Canvas - настоящий интерактивный DOM, искажённый шейдерами - не ломая браузеры, которые ещё не поддерживают флаг.
Подход
Живой DOM рисуется в WebGL-canvas через texElementImage2D и искажается шейдерами в шести сценах. Детект возможностей подставляет фолбэк на статичную текстуру, который гоняет те же шейдеры, - так эффекты деградируют плавно, а не падают.
Результат
Шесть эффектов - стеклянная рефракция, жидкая рябь, голографическая фольга, 3D-комната, распад на частицы и 2D-трансформация - с аккуратным фолбэком. TypeScript, Vite, WebGL.