E.01Line screen

A WebGL fragment shader that renders any photograph as a coarse line halftone. Interactive: cursor tightens line density so the photo resolves, and pools amber into the ink.

01Tune

Move the cursor over the image above

Parameters

Changes stream to the preview in real time

Line frequency170

Contrast1.70

Exposure0.00

Amber bleed0.85

Cursor focus0.50

Cursor magnetism0.45

Background#EFEBDD

Foreground#0A0A0A

Accent#DF8E2A

Load image

02Embed

One component, any page

The preview above and any production embed use the same custom element. Tune, click Copy embed code, paste. Attributes stream through attributeChangedCallback, so you can also bind them from any framework.

<!-- paste into any HTML/JSX -->
<line-screen
  src="/handshake.jpg"
  frequency="170"
  contrast="1.7"
  exposure="0"
  bleed="0.85"
  focus="0.5"
  magnet="0.45"
  angle="0"
  ink="#0A0A0A"
  paper="#EFEBDD"
  accent="#DF8E2A"
  style="display:block; width:100%; aspect-ratio:32/9;"
></line-screen>
<script src="/line-screen.js" defer></script>

Ship line-screen.js from your public assets (~5KB gzipped, zero dependencies). Works in React 19, Vue, Svelte, or plain HTML. The component pauses rAF when off-screen, stops the loop when mouse easing settles, and respects prefers-reduced-motion.

Element: <line-screen>
Runtime: WebGL 1 + OES_derivatives
Deps: none
Size: ~5KB gz
Fallback: <img> via src
Motion: respects reduced