VideoHatch

Hand-Drawn Video Playback

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

Original Color Sampling The hatching shader samples the exact colors from the underlying video pixels, recreating your video entirely out of colored scribble strokes. Alternatively, turn off Original Color to tint the entire sketch with a single custom color.

Interactive Triggers Set the effect to run continuously or smoothly animate in on hover using Framer Motion springs. The video continues to play underneath, but the scribble mask dynamically transitions in and out.

Fully Customizable Fine-tune the angle, spacing, width, jitter, speed, and softness to achieve the exact stylistic sketch look you need.

Use Cases

Creative Portfolios — Make your showreel or project thumbnails stand out by presenting them as living sketches.

Hero Backgrounds — Use a muted, monochromatic hatching effect on a background video to add subtle, organic texture without distracting from your foreground content.

How to Use

Installation

VIDEO PLACEHOLDER: Installation Tutorial

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find VideoHatch in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Customization

VideoHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.

Video Settings

• Source: Toggle between pasting a URL or Uploading a local video file.
• Playback Controls: Toggle AutoPlay, Loop, and Mute.
• Video Fit: Control how the video scales within the component bounds (Fill, Fit, Stretch).
• Trigger: Choose whether the effect runs always, or only animates in when hovered.
• Quality: Auto-detects device capabilities to ensure optimal framerates. Video textures are heavy, so leaving this on Auto is recommended.

Style & Geometry

• Original Color: Enable this to sample colors directly from the video. Disable it to tint the strokes with a single solid Color.
• Angle: Define the tilt of the hatch lines.
• Spacing: How far apart the scribble strokes are.
• Line Width: The thickness of each stroke.

Jitter & Animation

• Control how messy the scribble looks by tweaking Angle Jitter, Offset Jitter, and Spacing Jitter. Set the animation speed to control how fast the scribble updates over time.

Quick Tips

Best Performance — Video textures are the most demanding type of texture in WebGL. To ensure 60fps on mobile devices, compress your video files and keep the resolution reasonable (e.g., 720p or 1080p max).

Static Sketches — Set the Speed to 0 and tweak the Seed property to lock in a specific, perfect scribble iteration. The video will still play underneath, but the strokes will remain fixed in place.

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!

Why Designers Love This

VideoHatch brings the coveted "awwwwards-style" WebGL shading effect directly into Framer video playback without writing a single line of shader code.