ElementMirror: Stream Any Live DOM Element into a Canvas
austin_malerba · x · 2026-08-24
A React component that mirrors any live DOM element into a React-managed <canvas>, at up to 60fps.
Use Cases:
- Blurred img/video backdrops
- Drag and drop (dnd)
- Picture-in-picture (pip)
- Minimaps
- Magnifiers
- Custom glass effects
- Creative coding shenanigans
Features:
- Live Sync: Inputs, video, animation, selection, scroll, and style changes update in real-time.
- Faithful Rendering: The browser paints the capture, including text, masks, filters, blend modes, transforms, shadows, and overflow.
- Shared Captures: Mirrors of one element share captures, even at different rates and delays.
More from Apps
- Design Podcast: Behind the Scenes of Grok Bot UX — soleio · 2026-08-25
- Agent Tether: Mining Personalized Content with Preference Data — tokenbender · 2026-08-25
- User impressed after testing Tesla's latest Full Self-Driving — firstadopter · 2026-08-25
- Google's WeatherNext AI model aids in 5-day hurricane prediction — GoogleAI · 2026-08-25
- OpenAI or Anthropic could disrupt the APM market with AI on-call — rickasaurus · 2026-08-25
- Flova Agent autonomously crafts prompt based on user needs — techhalla · 2026-08-25