StopFrame: High-Performance Stop Motion Generator

High-performance, browser-based stop motion generator that transforms standard cinematic video into hand-crafted stop-motion claymation masterpieces.

---

🎯 Why This Exists

Modern digital video is clinical, smooth, and hyper-saturated. It often lacks the tactile soul, organic staccato cadence, and imperfect charm of traditional physical animation.

StopFrame bridges this gap. It is an online stop motion generator and claymation video filter built to give digital creators, video editors, and visual artists the power to simulate hand-crafted frame-by-frame animation entirely in the browser. With zero server uploads, absolute privacy, and instant client-side rendering, you can transform high-frame-rate footage into jerky, textured analog cinema.

---

⚡ Quick Start

Get your local production studio up and running in under a minute:

# Clone the repository
git clone https://github.com/peiyan0/stopframe.git
cd stopframe

# Install dependencies
npm install

# Start the high-performance local studio
npm run dev

Open http://localhost:5173 in your browser to start generating.

---

🏗️ Architectural Flow: The "Ghost Canvas" Engine

StopFrame performs advanced temporal downsampling and structural style transferring using client-side HTML5 technologies. Below is the end-to-end processing pipeline:

graph TD
    A["Raw Input Video (<video> tag)"] --> B["Low-Interval Sampler (1-24 FPS)"]
    B --> C["Ghost Canvas Renderer"]
    C --> D["Frame Boil Jitter Processor (Random Translation Coordinates)"]
    D --> E["Artistic Post-Effects Matrix (CSS Filters & Grain overlays)"]
    E --> F["Canvas Output Stream (canvas.captureStream)"]
    F --> G["Media Recorder Encoder"]
    G --> H["Downloadable Transformed Master (.mp4 / .webm)"]

Loading

The Core Processing Loop

1. Source Capture: A source <video> element is initialized and hidden from view to act as the primary frame stream.
2. Temporal Cadence Control: Instead of utilizing CPU-heavy Web Workers, frame sampling is governed by the video's active playback rate. When rendering, a staccato clock pulls frames at explicit intervals matching your targeted FPS (e.g., pulling precisely 8 frames out of 24 or 30 every second).
3. Frame Boil Jitter: Standard video has stable, static registration. Physical stop-motion has "boil"—imperceptible variations in camera and object positioning caused by human hands. StopFrame models this by adding randomized coordinate translations dynamically as pixels are painted onto the Canvas.
4. Style Matrix Injection: Real-time canvas filters and custom textures (such as fingerprint swirls and silver-halide scratches) are composited into the frame buffer.
5. Real-Time Assembly: A high-fidelity canvas capture stream is piped directly into the browser's MediaRecorder API, recording and encoding the resulting staccato masterpiece.

---

⚙️ Configuration & Parameter Reference

Adjust these options in the workspace to fine-tune your staccato aesthetic and optimize your video to stop motion converter settings:

Setting	Range	Recommended	Description
Temporal Cadence	1 - 24 FPS	8 - 12 FPS	Defines the staccato frame rate. Lower rates (e.g., 8 FPS) yield a classic amateur-claymation look, while 12 FPS mimics standard professional cinematic animation ("animating on twos").
Shake Intensity	0px - 12px	2px - 4px	Controls the "frame boil" registration jitter. Adjusts the maximum randomized translation boundaries of each drawn frame.
Aesthetic Render Style	—	—	Layer post-processing visual matrix filters to simulate physical rendering mediums (clay, ink, monochrome charcoal).

---

🎨 Creative Render Styles

StopFrame includes multiple real-time post-processing styles that alter the structural and color properties of your output:

• Vivid Reality: Natural camera colors overlayed with hand-crafted stop-motion pacing.
• Claymation Tactile: Hand-sculpted contrast, deep warm sepia tones, and procedurally drawn finger-kneaded fingerprint overlays.
• Retro Comic Book: Bold inked celluloid lines, graphic comic-strip hatchings, and high-saturation cartoon shading.
• Vintage Noir Film: Monochromatic silver halide contrast, authentic video scratches, and dynamic camera lens dust simulation.

---

🛠️ Technology Stack

• Framework: React 19 — High-performance interactive component state.
• Bundler: Vite — Near-instant hot module replacement and lightning-fast asset pipeline.
• Motion: Framer Motion — Fluid workspace transitions.
• Icons: Lucide React — Elegant, minimal vector icons (zero raw emojis used).
• Styling: Pure Vanilla CSS — Custom variables, glassmorphic layout grids, and optimized hardware-accelerated filters.

---

💡 Best Practices for the Ultimate Animation Look

To get the absolute most authentic result from the online stop motion generator:

1. Shoot at High Speeds: For best results, use video shot on a tripod with minimal background movement. Let the subjects move through the frame.
2. Apply Jitter for Hand-Held Feel: A shake level of 1.5px to 3px is the sweet spot. It injects just enough organic camera wiggle to simulate physical set adjustments.
3. Use the Contrast Filters: Real physical models are affected by studio light variations. Combining the Claymation Tactile style with temporal downsampling perfectly completes the illusion of tactile clay.

---

⚖️ License

Distributed under the MIT License. See LICENSE for more information.