Component and playground
dv-media
Renders an image or video as a live field of dots, squares, lines, dither, ASCII or LCD segments. It reads your , and you can push it around with your finger or cursor.
8 KB gzipped · no dependencies · web component
Quickstart with your AI
Paste this into your AI assistant. It gets the component and walks you through adding it to your site.
I want to use dv-media, a tiny web component that redraws an image or video as a live pattern you can push around.
Site: https://dv-media.vercel.app
Docs: https://dv-media.vercel.app/docs
Source: https://dv-media.vercel.app/dv-media.js
If you can't open links, this is enough:
- Load it once, pinned to version 1.2.0: <script src="https://dv-media.vercel.app/v/1.2.0/dv-media.min.js" integrity="sha384-5iHnipBx52iWI1W+ZuNLrF3xYIKJUb/7MhdY5UY47G+24sHjj8q0Z/EiIAOxlRo2" crossorigin="anonymous" defer></script>
- Use it: <dv-media src="my-video.mp4" variant="dots" interactive alt="..."></dv-media>
- It needs a size, for example: dv-media { display: block; aspect-ratio: 3 / 4; }
- variant: dots, squares, lines, dither, ascii or lcd
- Colors come from CSS variables: --dv-bg and --dv-ink (LCD: --dv-lcd-bg and --dv-lcd-ink)
First ask me what my project is built with and where the effect should go. Then add it with my own image or video, sized to fit, and set the color variables to match my site. Keep the explanation short.