Pulse Cursor: Premium Interactions Component by Viny Sales

Give your website a pulse. A highly optimized, custom SVG cursor that mimics a real electrocardiogram (ECG) trail. It smoothly follows the mouse, expands over clickable elements, and is incredibly lightweight. Perfect for health and tech websites.

About this Component

Bring Your Framer Site to Life with a Heartbeat! ❤️‍🔥

Stand out from the crowd with the PulseCursor. Designed entirely with native SVG elements and mathematical precision, this premium component dynamically draws an authentic electrocardiogram (ECG) wave as users move their mouse across your page.

Key Features:

• Ultra-High Performance: Bypasses heavy state updates. We manipulate the DOM directly via `requestAnimationFrame` so your site stays fast and 100% lag-free.

• Smart Hover States: The cursor automatically recognizes links and buttons, expanding into a sleek hollow circle when hovering over clickable elements.

• Mobile-Smart: Automatically disables itself on touch devices to ensure optimal performance and avoid mobile clutter.

• Fully Customizable: Tweak everything! Change the trail color, trail length, heartbeat amplitude, and dot sizes directly from the Framer properties panel.

• Canvas Safe: Includes a safe-mode for the Framer Editor, ensuring it never gets in your way while you design.

Perfect For:

- Medical clinics and healthcare professionals

- HealthTech and BioTech startups

- Creative portfolios looking for an edgy, tech-driven vibe

It’s completely plug-and-play. Drag it to your canvas, pick your brand colors, and watch your website come alive!

Property Controls Breakdown

Here is exactly what each setting in the Framer properties panel does:

Color: Defines the main color applied to the cursor dot, the trailing ECG line, and the expanded circle border during the hover state.
Trail Length: Controls the number of SVG line segments rendered behind the cursor, determining how long the heartbeat trail will be on the screen.
ECG Amplitude: A multiplier that sets the height and intensity of the heartbeat peaks along the trailing line.
Dot Size: Sets the base radius of the main cursor circle in its default resting or moving state.
Hover Size: Determines how large the cursor expands (becoming a hollow circle) when the user hovers over interactive elements like links or buttons.
Hide Default: A toggle that manipulates the document's global CSS to hide the operating system's native cursor when set to "Yes".