Liveplate
Liveplate: a recorded-footage effect kit. Sixteen CSS and SVG layers that turn any image or video into body-cam, security, VHS, drone or game-capture footage. Six presets and a live playground. No WebGL.
About This Template
An effect kit rather than a website. Sixteen layers turn any image or video into footage that looks recorded — body-worn camera, security DVR, VHS tape, drone feed or game capture — and a live playground lets you tune every one of them and copy the CSS straight out.
No WebGL, no shaders, no per-frame canvas compositing. The whole stack is CSS gradients, blend modes, one SVG turbulence tile and one SVG displacement filter.
Why it reads as footage
Most "film look" snippets are a vignette and some noise, and they read as a photo with filters on it. Real footage has passed through four things that each leave their own marks, and this kit models them separately: the lens (barrel distortion, chromatic aberration, vignette, bloom, dirt), the sensor (luminance grain, chroma noise, auto-exposure hunting), the codec (macroblocking, scanlines, an interlace band) and the recorder (handheld shake, rolling shutter, motion smear, HUD). Remove any one stage and the illusion weakens in a way you can see but cannot immediately name.
Real barrel distortion
CSS cannot bend an image — perspective tilts a flat plane, it does not curve one. So a displacement map is generated on a canvas, with the red channel carrying the x offset and green the y, both growing with the square of the distance from centre, and handed to an SVG feDisplacementMap. That is genuine optical distortion rather than a transform trick, and it is most of what stops the result looking like stacked filters. The demo plate is drawn in one-point perspective on purpose: lens distortion is only visible on edges that are supposed to be straight.
Six presets, no per-preset code
Body cam, game capture, security cam, VHS tape, drone/thermal and cinematic — points on one scale running from "do not notice the camera" to "the camera is the subject". Each preset is nothing but a set of CSS variables plus a few layer switches, so adding your own is one entry in a file and nothing else needs to know about it.
The playground is the handoff
Every intensity is a CSS custom property, not a prop. The control panel writes variables onto a single element, so moving a slider and editing the stylesheet are literally the same operation — and the effect stack never re-renders while you drag. Press Copy and you get a ready-to-paste block. There is no config file, no theme object and no build step between tuning and shipping.
Built to behave
A reduced-motion preference stops every animation and the background video never mounts, while the optical character stays. On mobile the expensive layers come down and video is never loaded. The still image is in the initial HTML and is the LCP candidate. The HUD is aria-hidden, because a screen reader announcing a running timecode thirty times a second would be hostile.
What you get
The complete Next.js project source — App Router, TypeScript and Tailwind — building to a fully static site with no Node server at runtime. The component ships with its own documented prop table, and the README covers swapping the plate, every tuning dial and the techniques worth knowing about.