Thermal Cursor
Inverted thermal cursor that reveals content in reverse colors. Features smooth lag animation, hover scaling, optional border, and backdrop blur effects.
Make it with Workshop
Build your own component with AI
Inverted thermal cursor that reveals content in reverse colors. Features smooth lag animation, hover scaling, optional border, and backdrop blur effects.
Make it with Workshop
Build your own component with AI
Transform Your Website with a Stunning Thermal Cursor Effect
Elevate your Framer projects with this eye-catching thermal cursor that creates an inverted "window" effect, revealing content in reverse colors as you move across the page. Perfect for portfolios, creative agencies, tech startups, and cutting-edge web experiences that demand attention.
✨ Thermal Inversion Effect Watch as your cursor becomes a portal that inverts everything underneath it. This striking visual effect creates a "thermal view" of your content, transforming text, images, and backgrounds into their opposite colors. The smooth follow animation with customizable lag creates a premium, fluid user experience that captivates visitors and sets your site apart.
🎨 Fully Customizable
Size Control: Adjust normal and hover sizes independently (20-150px) to match your design
Border Design: Toggle border on/off, customize color and width for perfect visual definition
Smoothing Control: Fine-tune the lag/follow effect (0.05-1) for your preferred motion feel
Transition Speed: Adjust hover animation timing (100-800ms) for instant or gradual scaling
Backdrop Blur: Add optional blur effect (0-20px) inside the inverted window for dreamy, soft-focus aesthetics
⚡ Performance Optimized Built with React and TypeScript using requestAnimationFrame for buttery-smooth 60fps animations. Efficient event handling and MutationObserver seamlessly detect dynamic Framer content and interactive elements as they appear, ensuring your cursor responds to all clickable elements automatically.
📱 Smart Mobile Detection Automatically hides on mobile devices (optional) so your desktop experience stays premium while mobile users get the standard touch interface they expect. No awkward cursor effects on touch screens.
🎯 Works With Everything Automatically expands when hovering over:
Links and buttons
Framer interactive components
Form inputs and submit buttons
Custom interactive elements with button naming conventions
🔧 Easy Integration Simply drag and drop onto your Framer canvas. All customization happens through Framer's intuitive property controls—no code required. The component handles everything automatically, including hiding the default system cursor and restoring it on cleanup.
💼 Professional Quality Built following Framer Marketplace best practices with clean, maintainable code. Proper lifecycle management ensures smooth performance and no conflicts with other components. Uses modern CSS backdrop-filter for the inversion effect with WebKit fallbacks for maximum browser compatibility.
Perfect for:
Creative portfolios showcasing bold design
Tech and AI product sites
Design agency landing pages
Futuristic SaaS applications
Art and photography portfolios
Any project that demands a unique, memorable aesthetic
Make your website unforgettable with this mesmerizing thermal cursor effect that transforms ordinary browsing into an interactive visual experience.
IMPORTANT: Due to the nature of digital code components, all sales are final and non-refundable. Once purchased, you receive immediate access to the complete component code, which cannot be returned.
Before purchasing, please:
Review the component demo and documentation carefully
Check the feature list to ensure it meets your needs
Contact us at troy@merokeeventures.com with any pre-purchase questions
