---
title: "VideoHatch — Framer component · Best of Framer"
description: "$9.00 · Framer component · by FramerHub.io  · Backgrounds. Overview Add a dynamic, scribbled hatching effect to your videos with VideoHatch."
canonical: "https://framer.elliotli.dev/component/videohatch"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/VideoHatch

# VideoHatch

hand-drawn hatching shader

[View on Framer](https://framer.com/marketplace/components/videohatch/?via=elliot-li)

![VideoHatch preview image 1](https://framer.elliotli.dev/og/component/videohatch/e4e21c7f20050a27/1600x1200.jpg)

## Summary

Overview Add a dynamic, scribbled hatching effect to your videos with VideoHatch.

## Description

**Overview**

Add a dynamic, scribbled hatching effect to your videos with VideoHatch. Powered by native Three.js WebGL, this component uses `VideoTexture` to convert any standard MP4 into a beautifully shaded, hand-drawn animation right on the canvas with incredibly smooth performance.

**Features**

\- **Real-time Video Textures**: Applies real-time native WebGL shading to MP4 video textures.

\- **Original Color Sampling**: Color sampling directly from the video source for full-color sketches.

\- **Interactive**: Interactive hover triggers included.

\- **Customizable**: Fully customizable stroke angles, spacing, and jitter for a hand-drawn look.

**Use Cases**

\- Creative Portfolios

\- Hero Backgrounds

**Properties**

\- **Video Settings**: Source (URL or Upload), Playback Controls (AutoPlay, Loop, Muted), Video Fit, Trigger, Quality.

\- **Style**: Original Color, Tint Color, Angle, Spacing, Line Width, Round Caps, Softness.

\- **Jitter**: Angle Jitter, Offset Jitter, Spacing Jitter, Seed.

\- **Animation**: Speed.

**Customization**

\- Choose your Source (URL or Upload) and provide the video.

\- Pick how you want the video to scale with Video Fit.

\- Tweak the Style group to customize stroke look and color.

\- Adjust the Jitter group to control randomness and hand-drawn feel.

**License**

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

**Refund Policy**

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

**Version**

1.0.0

## Rank history [How rankings work →](/terms#rankings)

-   All · #7697

## Details

- **Author**: FramerHub.io
- **Price**: $9.00
- **Published**: 2026-08-23
- **Updated**: 2026-08-23
- **Added**: 2026-08-23
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background