About CompassBackground
This component is a high-end interactive background system designed for modern websites that demand both visual elegance and smooth motion behavior. Built using React and Framer Motion, it blends mathematical precision with fluid animation to create a unique, premium user experience.
Ideal for:
Landing pages
Portfolio websites
SaaS hero sections
Creative agency designs
Core Features
1. Fully Responsive Layout
Designed with a 100% flexible container to support Framer’s Fill mode
Inner compass scales proportionally using maxWidth: 90%
Prevents clipping or overflow on smaller devices
Looks perfect across desktop, tablet, and mobile
2. Dynamic Geometry System
All visual elements are mathematically generated
Controlled via a single compassSize property:
Tick marks spacing
Needle length
Gemstone size
Ensures consistent proportions at any size
3. Interactive Motion Engine
Built using:
useMotionValue
useSpring
Creates smooth, physics-based animations
Compass needle:
Reacts to cursor movement
Feels natural and responsive
Adds depth and interactivity to static layouts
4. Advanced Customization (Framer Controls)
Easily customizable directly inside Framer—no coding required:
Background color
Gradient overlays
Vignette intensity
Texture density
Compass size
Needle behavior
Cardinal direction labels (toggle on/off)
Perfect for designers who want full creative control without dev work
5. High-Performance Rendering
Optimized SVG with viewBox scaling
Ensures:
Sharp visuals on all screen sizes
Minimal performance impact
Lightweight and efficient for production use
Use Cases
Premium landing pages
Hero sections with motion
Portfolio showcases
Tech / SaaS branding
Luxury or minimal UI design systems
Why This Component Stands Out
Combines design + interaction + math-based precision
Built specifically for Framer workflows
Requires zero external dependencies
Delivers a high-end, polished feel instantly
