TimeWarpScan.me

The viral Time Warp Scan filter, running 100% in your browser with TensorFlow.js.
No app. No sign-up. No uploads. Just your webcam and a scan line that freezes time.

---

✨ What is it?

The Time Warp Scan is the effect that blew up on TikTok. A line sweeps across the camera and freezes every pixel it passes. Move while the line goes by and you can stretch your face, clone yourself, or pull off illusions that look impossible.

TimeWarpScan.me recreates that filter on the open web:

• 🎥 Live webcam scanning, top-down or left-to-right
• 🎛️ Controls: scan speed ("brakes"), scan line size, delayed start, mirror, color/grayscale and looping
• 💾 Download your result as a PNG image or a recorded video
• 🔒 Private by design: every frame is processed on your device with WebGL. Nothing is uploaded or stored.
• 🆓 Free and open source (MIT)

👉 Try it now at timewarpscan.me

🧠 How it works

Each webcam frame is turned into a tensor with TensorFlow.js, and the scan builds the final image one strip at a time:

1. tf.browser.fromPixels() grabs the current video frame on the GPU.
2. The frame is resized to the canvas and optionally mirrored (tf.reverse).
3. A thin slice at the scan line's position is cut out with tf.slice.
4. That slice is tf.concat-ed onto the slices from earlier frames.
5. tf.browser.toPixels() paints the slice to a canvas, and a MediaRecorder captures the whole composite as video.

Each row (or column) of the result comes from a slightly different moment, which is what makes the "time warp" happen. Everything runs inside tf.tidy() and tensors are disposed as they go, so memory stays flat no matter how many scans you run.

The core logic lives in timewarpscanme/src/Scancam.jsx.

📚 Learn it step by step

The previous/ folder has the plain-HTML prototypes this project grew from. Each one adds a single feature, which makes it a good way to learn the technique:

Step	File	Adds
1	1simplest.html	The smallest working time warp scan
2	2efficient.html	Draws slices directly instead of re-rendering the whole tensor
3	3loops.html	Continuous looping scans
4	4mirror.html	Mirrored (selfie) mode
5	5delay.html	Delayed start so you can get in position
6	6workingvideo.html	Records the scan to video

Want to go deeper? The techniques used here are covered in the book Learning TensorFlow.js (O'Reilly) by Gant Laborde.

🚀 Run it locally

You'll need Node.js 18+ and Yarn.

git clone https://github.com/GantMan/timewarp.git
cd timewarp/timewarpscanme
yarn
yarn start      # dev server on http://localhost:3000

Command	What it does
yarn start	Start the Vite dev server with hot reload
yarn build	Production build into timewarpscanme/build
yarn preview	Serve the production build locally

Webcams only work on localhost or HTTPS, and your browser will ask for camera permission.

☁️ Deployment

The site is hosted on AWS Amplify Hosting, with DNS at name.com. Every push to main triggers a build:

• amplify.yml: build settings (Amazon Linux 2023 image, Node 20, yarn build in timewarpscanme, publishes timewarpscanme/build)
• customHttp.yml: response headers (long-term caching for fingerprinted assets, security headers, camera permissions policy)

🗂️ Project structure

timewarp/
├── amplify.yml            # Amplify build spec
├── customHttp.yml         # Amplify response headers
├── previous/              # Step-by-step HTML prototypes
└── timewarpscanme/        # The React app
    ├── index.html         # SEO meta tags, Open Graph, JSON-LD
    ├── public/            # Static assets, sitemap, robots.txt, manifest
    └── src/
        ├── App.jsx        # Intro ↔ scanner switch (scanner is lazy-loaded)
        ├── Intro.jsx      # Landing page
        ├── Warper.jsx     # Scanner controls (Material UI)
        └── Scancam.jsx    # Webcam + TensorFlow.js time warp engine

🤝 Contributing

Issues and PRs are welcome! Good places to start:

• 🦊 Firefox support. The scanner currently has trouble in Firefox. If you can track down why, you're a hero.
• 📱 Mobile layout for the scanner screen
• 🎨 New scan modes (diagonal, radial, …)

👋 Credits

Created by Gant Laborde (@GantLaborde) of Infinite Red, the React Native and AI consultancy.

If you made something fun with it, share it and tag @GantLaborde! And if you like the project, a ⭐ helps other people find it.

📄 License

MIT © Gant Laborde