About FloatCursor
FloatCursor
A premium cursor-follow image interaction component built to create immersive hover experiences with smooth motion, dynamic image reveals, and responsive cursor tracking. FloatCursor transforms static website sections into engaging interactive moments that feel playful, modern, and highly polished.
About this Component.
Visual & Experience.
Dynamic cursor-follow images:Images smoothly appear and intelligently follow the user's cursor movement, creating a natural floating interaction that feels responsive and immersive.
Elegant image reveals:Images animate in with soft transitions, subtle scaling, and opacity effects for a refined premium experience.
Layered motion effects:Combines position tracking, easing, and depth-based movement to create a more organic and fluid visual response.
Premium hover interactions:Transforms ordinary text, cards, links, and content sections into memorable interactive experiences that encourage exploration.
–––––––––––––––––––––––––––
Interaction
Real-time cursor tracking:Images dynamically follow cursor movement with smooth interpolation and natural motion behavior.
Hover-triggered activation:Images appear only when users interact with designated elements, keeping layouts clean and focused.
Smooth motion system:Uses easing and motion smoothing to eliminate abrupt movement and create a premium floating effect.
Intelligent hide behavior:Images gracefully fade away when users leave the interaction area.
Performance-optimized animations:Built with efficient rendering techniques to maintain smooth performance across devices.
Reduced motion support:Respects accessibility preferences while preserving a polished user experience.
–––––––––––––––––––––––––––
Customization
Fully customizable via the properties panel:
Image size controls
Follow speed adjustment
Cursor offset settings
Hover reveal animations
Scale & opacity controls
Rotation effects
Border radius customization
Shadow styling
Blend mode options
Multiple image support
Responsive behavior controls
Transition smoothing
–––––––––––––––––––––––––––
Responsive Behavior
Desktop:Full cursor-follow experience with smooth tracking, immersive motion, and dynamic image interactions.
Tablet:Optimized motion behavior with adjusted responsiveness for touch-enabled environments.
Mobile:Responsive fallbacks and adaptive interactions designed for smaller screens and touch devices.
Viewport optimized:Animations only activate when visible for improved performance and efficiency.
Editor-aware controls:Supports Framer canvas and editor environments for easier designing, testing, and previewing.
–––––––––––––––––––––––––––
Perfect for
SaaS landing pages
AI startup websites
Portfolio showcases
Creative agency websites
Product launches
Hero sections
Interactive case studies
Brand storytelling
Digital experiences
Modern marketing websites
–––––––––––––––––––––––––––
Why it Works
Makes static layouts feel alive
Creates memorable user interactions
Encourages exploration and engagement
Adds premium motion without complexity
Elevates perceived design quality
Blends seamlessly with modern websites
–––––––––––––––––––––––––––
Need a High-End Framer Website?
FloatCursor is just one piece.
At Blanq Studio, we design and build conversion-focused Framer websites for SaaS, AI, and modern brands — crafted to feel premium, interactive, and built to convert.
From high-performing landing pages to fully custom digital experiences, every detail is designed to help brands stand out online.
–––––––––––––––––––––––––––
Future Enhancement Idea
Add multi-image trails, magnetic cursor attraction, and advanced depth layering for even richer interactive experiences.
–––––––––––––––––––––––––––
Preview / Functionality
FloatCursor creates a seamless cursor-follow experience where images elegantly appear, float, and track user movement in real time. The result is a premium interaction that transforms ordinary content sections into engaging visual experiences that feel dynamic, modern, and memorable.
