Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

CCTV Night Cam (Security Camera Footage)

Makes any animation look like a security camera recording at night: wide-lens bulge, choppy frame rate, grain, blocky compression, a running timestamp, REC and a motion-detection box.

Effect, V1 Effects3D520 lines of codev1.0.0

In Spooky & Halloween, Text & data

Next: ASCII PortraitSurprise me

CCTV Night Cam (Security Camera Footage) preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

Which corridor the camera watches. Your own project can put anything through the camera.

The figure that appears after each power cut. Turn off for an empty corridor.

The recorder's box around the figure, blinking when it first appears.

Shown top left. Letters, numbers, spaces and : - / . work.

HH:MM:SS. The seconds tick on as the clip plays.

Shown bottom right. Leave empty to hide it.

12

Security recorders store few frames a second; lower is choppier.

0.6
0.5

Sensor grain. It climbs on its own when the picture goes dark.

0.55

How blotchy and blocky the shadows get.

0.7

How much fine detail the cheap camera loses.

0.6
4

Changes the grain, the stalled frames, the flicker of the faulty light and the corridor's details.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 3.5 MB)
Info

What it is

The look behind the AI 'caught on camera' and found-footage horror clips that fill feeds every October. Whatever you draw goes through a cheap night-time security camera: the wide lens bulges the middle of the picture, the picture turns black-and-white infrared (or green night vision, or washed-out colour), fine detail goes soft but edges get the camera's over-sharpened halos, grain climbs as the auto-gain fights the dark, shadows break into blotchy compression blocks and lights bloom. The camera runs at a choppy 8–15 frames a second and now and then stalls on a frame. On top, the recorder's display stays crisp: date and a ticking clock, a blinking REC, the camera number and its name, and a motion box that blinks when something appears. The demo watches an empty corridor from a camera high in the corner at 3 a.m.; the lights cut out twice, and each time they come back a tall figure stands closer. Choose the place (Backrooms, office, hospital ward), the look, the date, time, camera name and how cheap the camera is.

Reuse it in your own idea

  • Turn any AI 'caught on camera' clip into convincing security footage: draw each frame of the clip at cameraTime(info).time, apply(), add drawCCTVOverlay with your own date and camera name, and say in the caption that it is fiction.
  • Watch Rain on a Window or Thunderstorm through the camera with look 'color' for a stormy-night doorbell-cam shot.
  • A horror title card: draw Glitch Text or a plain title, apply() with look 'green', and set the camera name to your film's title.
  • A four-camera DVR grid: render four scenes into quarters of the frame, call apply() on each quarter's canvas and give each its own CAM number.

Which part is reusable

src/cctv-night-cam.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses liminal-corridor, three only for the demo.

Good to know

  • It degrades what it is given: it cannot make an AI clip's motion believable or fix impossible physics. The camera angle has to be right in the scene you feed it (high, fixed, wide).
  • The demo's figure is a flat silhouette: it reads at corridor distance and through the camera, not in close-up.
  • The recorder font covers capital letters, digits and a few symbols only; there are no accented letters.
  • Footage this convincing can mislead. Label fictional clips as fiction, especially anything that looks like evidence of a real event.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/cctv-night-cam.js
Exports
  • createCCTV({ look?, fisheye?, softness?, sharpen?, noise?, compression?, bloom?, autoGain?, vignette?, seed? }) => { apply(ctx, width, height, info), lensPoint(x, y, width, height) }
  • cameraTime(info, { fps?, hiccups?, seed? }) => { ...info, time, frame, fps, sourceFrame }
  • drawCCTVOverlay(ctx, width, height, info, { date?, clock?, camera?, label?, rec?, color?, recColor?, scale? })
  • drawMotionBox(ctx, { x, y, w, h }, info, { label?, color?, blink?, scale? })
  • drawPixelText(ctx, text, x, y, { cell?, color?, outline?, tracking?, align? }) => width
  • measurePixelText(text, cell, tracking?) => width
Dependencies (exact)
  • liminal-corridor@1.0.0 (demo) — The demo films this corridor from a fixed corner camera. src/cctv-night-cam.js has no dependencies and works on any 2D canvas.
  • three@0.185.1 (demo) — Renders the demo's corridor.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Pixels. Effect sizes are tuned at 1080 wide and scale with the canvas. The display sits 5.5% in from the edges.

Lighting: None of its own. Auto-gain brightens dark frames and their grain; bloom makes bright areas glow.

Timing: Pure function of the camera frame from cameraTime(): grain changes every camera frame and is held on a stalled one; the clock ticks with time; REC blinks once a second.

Output
1080×1080, 30 fps, 10 s · procedural (computed from the frame number) · not a loop — A ten-second story beat (two power cuts, a figure that comes closer); it does not loop.
Tested
Rendered 300 frames on 2026-10-10 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical.
Performance
One lens remap and a few running-sum blurs over every pixel, plus the demo's corridor shader: about 0.3–0.6 s a frame at 1080×1080 in headless Chrome on a CPU-only render machine. Fine for offline renders; live previews play at a few frames a second. Cost grows with pixel count. For live use, render at 540 or 720 and scale up; a security camera was never sharp anyway.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- cctv-night-cam/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:d306e71094d774d7…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard on 2026-10-09 by an automated agent (the daily trend routine), inspired by the AI security-camera and found-footage horror clips of the Halloween season (see content/trends/2026-10-09-cctv-night-cam.md). The list of tells to reproduce (timestamp and camera ID overlay, low resolution and 8–15 fps, grain, compression, lens distortion, high fixed corner angle, low light and fluorescent flicker) follows https://www.topmediai.com/video-tips/ai-cctv-footage/. Barrel distortion, unsharp masking, box blurs and block-wise quantisation are standard image-processing techniques; the code, the 5×7 recorder font and the figure were all written for this package. The demo's corridor is AI Pixel Wizard's own Liminal Corridor 1.0.0, imported unchanged. No code, images, fonts or shaders were copied.
BinMore like this

More like this

Play these full screen