Directional Cursor replaces the default pointer with a smooth, device‑aware custom cursor that rotates, scales, and follows movement with physics‑based motion. Easy to integrate.
Make it with Workshop
Build your own component with AI
Directional Cursor is a production-ready custom cursor for Framer that hides the browser cursor and replaces it with a motion-driven SVG. This cursor reacts dynamically to the direction and speed of mouse movement, giving it a natural, physics-based feel.
It includes both beginner-friendly and advanced control modes, device-aware visibility, and customizable spring physics to fine-tune the interaction experience for any brand or design style.
Add the "Directional Cursor" Code Component to your Framer page and position it at the top level of the canvas.
Set the component's position to absolute from the right-side panel, and set the top and left values of the absolute position to 0.
In the properties panel, choose whether to hide the browser’s default cursor and adjust the follow speed or spring physics to fit the desired experience.
If desired, paste your custom SVG code to personalize the cursor design. After that, preview and publish.
Note: If you want to add the custom cursor to the entire site, you need to add it to the 'Layout Template.' The custom cursor will then be applied across your entire site.
Directional Cursor offers a set of intuitive controls for both beginners and advanced users:
Device Visibility:
Hide on Mobile / Hide on Tablet: Toggle visibility for touch-first devices to optimize performance on mobile while maintaining the custom cursor on desktop.
Browser Cursor Behavior:
Keep Browser Cursor: Decide whether to hide the default cursor globally by injecting custom CSS.
Keep Text Cursor / Keep Pointer Cursor: Whitelist input fields, buttons, and links so they retain the correct browser cursor even when the default one is hidden.
Control Modes & Motion:
Control Mode (Beginner / Advanced):
Beginner mode exposes a simple Follow Speed slider.
Advanced mode unlocks detailed spring settings like damping, stiffness, and mass for expert-level control.
Follow Speed: Adjusts the speed of cursor follow with dynamic stiffness and damping for smoother or snappier movement.
Advanced Spring Settings: Customize damping, stiffness, mass, and rest delta directly for a tailored, physics-driven cursor behavior.
Cursor Appearance:
Cursor Size: Scale the cursor dynamically with a spring-driven transform.
Use Custom SVG / Custom SVG Code: Replace the default SVG with your custom design using full <svg> markup.
Physics‑based Directional Cursor:The cursor smoothly rotates, scales, and offsets based on real-time pointer velocity and direction, creating a tactile, responsive feel.
Device-aware and Responsive:Features toggles for mobile and tablet devices, ensuring the cursor is not active on touch-only screens.
Beginner & Advanced Control Modes:A user-friendly interface with a Follow Speed slider for designers and advanced controls for developers to fine-tune the interaction.
Smart CSS Cursor Management:Automatically hides the default browser cursor while maintaining appropriate text or pointer cursors in inputs, buttons, and links.
Custom SVG Support:Allows full visual customization of the cursor while still leveraging the built-in motion system.
Canvas‑Aware Rendering:Optimized for Framer canvas, ensuring no unnecessary rendering is done, while maintaining the cursor’s presence in both preview and live sites.
Portfolio:Best for personal portfolio sites that want to add something unique to their experience.
Landing Pages:Perfect for pages that need a branded or animated cursor to enhance visual identity or storytelling.
Interactive Product Sites and Campaigns:Ideal for sites where cursor motion is part of the user experience, such as playful, high-tech, or immersive interactions.
With Directional Cursor, you can create an interactive, branded experience that enhances the user journey with smooth, physics-driven motion that feels both dynamic and purposeful.
Whether you’re a beginner looking for simple customizability or an advanced developer wanting full control over the cursor’s behavior, this solution provides the flexibility to make your website stand out.
Made with ❤️ by Soyeb
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
If you have any questions, need a custom Framer component, want clarification, or run into any issues, you can always reach me out at creator.nitso@gmail.com. I’m here to help.
