Mouse Paint Effect with Framer Motion

Mouse Paint Effect with Framer Motion

Use your mouse to reveal text with a paint-like effect, adding a creative twist to your site.

This should be your Heading

This component is super easy to customize

get your brush out


Install Dependencies

First you'll need to install component dependencies into your project.

Paste Component Code

Create a new component in your project and paste in the below code.

Serve your Application

Just like that. Your new component should render in your App.

Other things


  • Windstatic - For their amazing Tailwind CSS components. Forever a lifesaver when building.
  • SVG Doodles - Thanks for the arrows. Always my go to.
  • Bruno Simon - Mr Three.js. The very best teacher.