5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tbcd,

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

5a:[["$","$L5d",null,{"post":{"id":"019dce96-1134-7648-8204-7347cdff7d81","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"63236348-0a2a-46a1-a8b4-336d7528c9a7","name":"Viper Guy","slug":"viper-guy","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"RfEEnqkyRxFiDW30n5uO","resolved":true,"title":"CompassBackground","body":"$5e","bodyJson":null,"introduction":"Luxury Compass Background Motion UI","slug":"compassbackground","author":{"framerUserId":"63236348-0a2a-46a1-a8b4-336d7528c9a7","name":"Viper Guy","slug":"viper-guy","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/RfEEnqkyRxFiDW30n5uO/compassbackground-JygZBSzo6C6b0VPoVSciNtaYuqdD5O","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-10T18:08:41.834Z","updatedAt":"2026-05-25T03:01:01.107Z","publishedAt":"2026-04-27T10:57:14.548Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://olive-lemur-570661.framer.app/","price":"2","paymentUrl":"https://buy.polar.sh/polar_cl_tuHFPMV1olRKEVDGImCESaDZvj57YG74LaMga355nw2","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"i5qwReZf9999F3faXk16","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T10:57:14.548Z","updatedAt":"2026-04-27T10:57:14.548Z","reported":false}}],"$L5f"]

Suggested for you