canvas-ui brings WebGL shaders to live DOM

// 3h agoOPENSOURCE RELEASE

canvas-ui brings WebGL shaders to live DOM

canvas-ui by David Haz (@DavidHDev) is an experimental open-source UI component library that applies real-time WebGL shader effects—such as liquid warping, glass refraction, and VHS distortion—directly over live HTML elements. Leveraging the experimental html-in-canvas API, it enables React, Vue, Svelte, and vanilla web apps to use GPU-accelerated visuals while preserving native DOM interactivity and text selection.

// ANALYSIS

Blending high-end WebGL graphics with standard web interaction has long been a challenge, making canvas-ui an exciting step forward for creative front-end development.

–Enables rich shader visual effects directly on interactive text, buttons, and layouts.
–Preserves native web usability features including text selection, focus handling, and link navigation.
–Offers multi-framework support for React, Vue, Svelte, and vanilla TypeScript via a shadcn-style component registry.
–Relies on experimental browser features like html-in-canvas, which may limit present-day cross-browser production readiness.

// TAGS

canvas-uiwebglshadersfrontendui-libraryjavascriptopen-source

DISCOVERED

3h ago

2026-07-25

PUBLISHED

3h ago

2026-07-25

RELEVANCE

7/ 10

AUTHOR

Github Awesome

// KEEP READING

More AI developer news from the feed

EXPLORE FULL FEED

VIDEO1h ago

Granola CEO demonstrates OpenAI Codex browser automation

In a video demonstration presented by Every, Granola's CEO showcases OpenAI Codex functioning as an autonomous agent executing complex, multi-step browser workflows. Drawing upon saved user context, Codex navigates web applications and customer support chats to negotiate an internet plan migration and eliminate extra fees.

LAUNCH2h ago

Moonshot AI introduces Kimi K3 Agent Swarm

Moonshot AI has introduced Agent Swarm mode for Kimi K3, a horizontal scaling architecture capable of coordinating up to 300 parallel sub-agents to tackle complex software engineering tasks. By dividing web development across autonomous agent teams working concurrently, the system can generate multi-page websites and frontend applications significantly faster than traditional single-agent approaches.

OPEN SOURCE3h ago

Jakub Antalik releases thinking-orbs for AI UI states

thinking-orbs is an open-source animation library designed by Jakub Antalik to replace static spinners with state-aware visual loading indicators for AI agents. Built for React and Tailwind CSS, the SSR-safe library provides six hand-tuned canvas states with automatic theme switching and preset sizing.