Introduction
Pixel-level treatments you hold over a whole scene, built on the experimental html-in-canvas browser API
How it works
A filter wraps a scene and re-reads its pixels every frame. Put your scene inside one and it comes out as tape footage, as a CRT display, as halftone print, for as long as the scene runs.
- Wrap the scenePut your scene inside the filter. No progress to drive, no second scene, no state to pass.
- It holds, never driftsMotion inside is a pure function of the frame. Frame 600 looks like frame 60, detail elsewhere.
- Nest to stack looksThe innermost filter runs first. Keep the one that bends geometry outermost.
Installation
$ pnpm dlx shadcn@latest add @remocn/vhs-filtertsx
import { VhsFilter } from "@/components/remocn/vhs-filter";
export const Scene = () => (
<VhsFilter>
<YourScene />
</VhsFilter>
);