Playground and web component
Shaders
A playground of 31 styles that redraw an image or video as a live pattern. Seven of them ship as a web component: dots, squares, lines, dither, ASCII, LCD segments and glow. It reads your , and you can push it around with your finger or cursor.
31 styles in the Lab · 11 KB gzipped component · no dependencies
Quickstart with your AI
Paste this into any AI assistant. It will load the component and walk you through adding it to your site.
I want to use <fk-shader>, the web component from Shaders by Fede Kotek. It redraws an image or video as a live pattern you can push around.
Site: https://shaders.fedekotek.design
Docs: https://shaders.fedekotek.design/docs
Source (to read, not to load): https://shaders.fedekotek.design/v/2.2.0/fk-shader.js
Lab, to pick a look visually: https://shaders.fedekotek.design/lab, then More, Copy as <fk-shader>
If you can't open links, this is enough:
- Load it once, pinned to version 2.2.0: <script src="https://shaders.fedekotek.design/v/2.2.0/fk-shader.min.js" integrity="sha384-v9OVsPd28wQWZ35YMxTUkP6H31rE7VTpesVZ+rXCmYRXj5PnzNCa8dsFiMU+MAtT" crossorigin="anonymous" defer></script>
- Use it: <fk-shader src="my-video.mp4" variant="dots" interactive alt="..."></fk-shader>
- It needs a size, for example: fk-shader { display: block; aspect-ratio: 3 / 4; }
- variant: dots, squares, lines, dither, ascii, lcd or glow. Tune it with pitch (cell size in px) and size (mark size, around 0.5 to 1.5; for glow, how far the light spreads). For glow, map="proximity" lights up the nearest person instead of what is bright (it loads a person-finding model, about 10 MB)
- Serve the page over http(s): opened as a file it stays blank. Media on another domain needs CORS headers
- Colors come from CSS variables: --fk-shader-bg and --fk-shader-ink (LCD: --fk-shader-lcd-bg and --fk-shader-lcd-ink; glow: --fk-shader-glow-bg and --fk-shader-glow-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.