Command Palette

Search for a command to run...

Loading component...

Components paid Drawing cursor effect

Drawing cursor effect

Interactive drawing cursor effect with canvas-based line drawing. Features a custom cursor that draws lines as you move the mouse, creating a unique drawing experience with customizable stroke properties.

Dependencies

framer-motion

Interaction Type

Try moving your mouse around
Watch the drawing trail appear

CLI UNAVAILABLE

pro component, try copying the source code from top right corner

How to use

import { DrawingCursorEffect } from "@/components/v1/skiper59";

const CustomDrawingEffect = () => {
  return (
    <DrawingCursorEffect
      type="drawAlways"
      strokeColor="#ffffff"
      strokeWidth={2}
      followEffect={true}
      customCursor={true}
      className="h-screen w-full"
    >
      <div className="p-8 text-center text-white">
        <h1 className="text-4xl font-bold">Drawing Trail Effect</h1>
        <p className="mt-2">Move cursor to see the effect.</p>
      </div>
    </DrawingCursorEffect>
  );
};
Props
Description

children

Content to display over canvas

type

Drawing mode type

strokeColor

Drawing line color

strokeWidth

Drawing line width

followEffect

Enable fade-out effect

customCursor

Show custom cursor

className

Additional CSS classes

Types

interface DrawingCursorEffectProps {
  children?: React.ReactNode;
  strokeColor?: string;
  strokeWidth?: number;
  type: "drawOnHold" | "drawAlways";
  followEffect?: boolean;
  customCursor?: boolean;
  className?: string;
}
x;

Attribution

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext