---
title: "ShaderHatch | FramerHub"
canonical_url: "https://framerhub.io/components/shader-hatch"
last_updated: "2026-06-15T14:46:28.495Z"
meta:
  description: "Add beautiful hatching and scribble WebGL effects to your elements. Premium Framer component for client sites, portfolios, and product pages."
  "og:description": "Add beautiful hatching and scribble WebGL effects to your elements. Premium Framer component for client sites, portfolios, and product pages."
  "og:title": "ShaderHatch | FramerHub"
---

# **ShaderHatch **

Add beautiful hatching and scribble WebGL effects to your elements.

One-time payment

Lifetime updates

Commercial license

## **Overview** Add beautiful hatching and scribble WebGL effects to your elements. - Native WebGL Three.js Effect - Responsive Image Fitting - Interactive Hover States - Fully Customizable Jitter & Hatching ## Bring Your Elements to Life Add a dynamic, scribbled hatching effect to your images with ShaderHatch. Powered by native Three.js WebGL, this component converts standard images into beautifully shaded artwork right on the canvas with incredibly smooth performance. ## Features**Interactive Triggers** Set the effect to run continuously or smoothly animate in on hover using Framer Motion springs.**Perfect Responsive Fitting** Standard image fit modes (Fill, Fit, Stretch, Tile) ensure your images and the shader effect adapt flawlessly to any container size.**Fully Customizable** Fine-tune the angle, spacing, width, jitter, speed, and softness to achieve the exact stylistic look you need. ## Use Cases**Hero Graphics** — Transform a standard hero image into a striking, animated scribble illustration.**Interactive Portfolios** — Make your creative work stand out with highly customized hover or reveal states.![ShaderHatch Preview](https://framerhub.io/framerhub/img/components/control/shader-hatch.jpg) ## 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 ShaderHatch 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 ShaderHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.**Core Settings**- **Image**: Upload your source image. - **Image Fit**: Control how the image scales within its container. - **Trigger**: Choose whether the effect runs always, or only animates in when hovered. - **Quality**: Auto-detects device capabilities to ensure optimal framerates.**Style & Geometry**- **Angle**: Define the tilt of the hatch lines. - **Spacing**: Adjust the gap between consecutive strokes. - **Line Width**: Set the thickness of the scribbles. - **Softness & Round Cap**: Control anti-aliasing and stroke terminations.**Jitter & Animation**- **Angle, Offset, & Spacing Jitter**: Introduce randomness to create a hand-drawn feel. - **Speed**: Determine the frame rate of the scribble animation. Set to 0 for a static sketch. ### Quick Tips**Performance** — The component automatically detects device capabilities to adjust pixel ratio and antialiasing. You can manually force it into "Performance" mode via the Quality dropdown for heavy pages.**Static Sketches** — Set the `Speed` to 0 and tweak the `Seed` property to lock in a specific, perfect scribble iteration.**Dynamic Coloring** — By turning off `Use Original`, you can enforce a monochrome or specific line color, making the component highly adaptable to different color themes. ## 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 ShaderHatch brings the power of custom shaders into Framer with zero code. It provides an immediate, striking visual upgrade to regular media that cannot be replicated with standard CSS filters. ### **ShaderHatch - $9** Add beautiful hatching and scribble WebGL effects to your elements.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub.