React images

pnpm add crt-shader react@19 react-dom@19

Live example · Click to inspect

Save as Artwork.jsx, then import and render <Artwork /> in your existing React app.

'use client';

import { CRTImage } from 'crt-shader/react';

// An included image: replace this data URL with your own image URL.
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="60">
  <path fill="#101018" d="M0 0h96v60H0z"/>
  <path fill="#ef6868" d="M8 8h14v44H8z"/>
  <path fill="#f4ca70" d="M30 8h14v44H30z"/>
  <path fill="#83c99a" d="M52 8h14v44H52z"/>
  <path fill="#7fa7ef" d="M74 8h14v44H74z"/>
</svg>`;
const src = `data:image/svg+xml,${encodeURIComponent(svg)}`;

export default function Artwork({ onLoad, onError = console.error }) {
  return (
    <div style={{ width: '100%', maxWidth: 640, aspectRatio: '8 / 5' }}>
      <CRTImage
        src={src}
        alt="CRT color bars"
        preset="reference"
        width={640}
        height={400}
        dpr={1}
        style={{ maxWidth: '100%', maxHeight: '100%' }}
        onLoad={onLoad}
        onError={onError}
      />
    </div>
  );
}

CRTImage releases its runtime lease on unmount.

API reference · Presets and options

Photos: choose reduction explicitly

Replace src with your photo URL and add inputMode="photo" inputResolution={96} preset="photoSoft". The resolution sets the prepared image’s longest edge; the preset only changes the effect. Remote images need CORS permission.

Updates and ownership

Change settings through props, such as exposure={1.05}. Increment sourceVersion when you redraw a supplied canvas. Sizing props use CSS pixels; dpr controls framebuffer scale.

CRTImage supports React 18.3.1 and 19. Keep React and React DOM on matching versions. Rendering runs in client effects; the component releases its shared-runtime lease on unmount.

React image API · Options and presets