Figma Cursor: Premium Interactions Component by Aviral Lakhanpaul

A Figma-inspired custom cursor with a smooth chip that follows your movement. Lightweight, fully responsive, and highly customizable — adds instant polish to any website.

Perfect for portfolios, agency sites, and product pages.

Figma Cursor enhances user experience with fluid motion and subtle micro-interactions — no code.

Features

Inspired by Figma’s iconic live cursor look
Built with smooth motion physics for a natural follow feel
Fully responsive and lightweight — optimised for performance
Works on any layout or page setup
Adds a premium interactive feel that instantly elevates your UI

Customisations

Cursor - size, colour, border properties, and shadow properties
Responsive Toggle — enable adaptive behaviour across devices
Chip - text, font, colour, background colour, padding, radius, alignment, offset, stiffness and damping

Usage

Copy and paste the component into your project.
Place it in your primary breakpoint.
Change Type to Fixed and pin it to the top of the page.
Set Width to Relative 100% and Height to Viewport 100vh.
Done! You now have a Figma-style cursor with a smart floating chip.

NOTE: Keep the z-index of the component to a higher value (>1), but lower than the interactable elements in your web page, otherwise the cursor will not be able to detect them.