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:T996,

Topographic Rings is an animated background component for Framer. Concentric organic rings morph and breathe using layered sine wave distortion and react to your cursor in real time. Drop it behind any section, set your colors, and it works.

Best for

Topographic Rings works anywhere you want a subtle, living background that adds depth without competing with your content: hero sections, SaaS landing pages, about sections, or any section where a static background feels flat.

Key features

Organic rings morph continuously using three layered sine waves
Slightly oval by default (vertical squash configurable) for a natural look
Three visual tiers with independent color and stroke width: accent, mid, and base rings
Optional mouse interaction: horizontal mouse movement shifts morph frequency, and vertical movement shifts amplitude
Full animation control: speed, per-layer frequency, and amplitude
Rings bleed beyond component bounds so they never look clipped at the edges
Static preview frame on the Framer canvas for easy art direction
Behaves like a standard Framer frame: fixed size or fill parent

How to use

Copy the component URL and paste it into your Framer project.
Place the component behind your content using Framer's layer order.
Set ring colors to match your design. Alpha channel controls opacity.
Adjust ring count, spacing, and animation speed to taste.
Toggle mouse interaction and tune the strength controls.
Enjoy!

Using the pre-made demos

A remix link for the demo page is included. Copy any instance directly into your project and customize from there.

Refunds and support

Due to the digital nature of this product, purchases cannot be refunded. Contact me at adipurdila@gmail.com or x.com/adipurdila before buying if you have questions.

Support includes: direct access to the author, help with features and settings, and assistance with reported bugs. Response time is up to 2 business days.

5a:[["$","$L5d",null,{"post":{"id":"019eea73-e3ed-771b-a06f-168f86f7e908","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c74393c2-214e-406b-9cc7-241dad16780a","name":"Adi Purdilă","slug":"adipurdila","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c74393c2-214e-406b-9cc7-241dad16780a/phyacdsd","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aJ3CP9ZKtl8E6oloP67k","resolved":true,"title":"Topographic Rings","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Topographic Rings","marks":[{"type":"bold"}]},{"type":"text","text":" is an animated background component for Framer. Concentric organic rings morph and breathe using layered sine wave distortion and react to your cursor in real time. Drop it behind any section, set your colors, and it works."}]},{"type":"customHeading","content":[{"type":"text","text":"Best for","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Topographic Rings works anywhere you want a subtle, living background that adds depth without competing with your content: hero sections, SaaS landing pages, about sections, or any section where a static background feels flat."}]},{"type":"customHeading","content":[{"type":"text","text":"Key features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Organic rings morph continuously using three layered sine waves"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slightly oval by default (vertical squash configurable) for a natural look"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three visual tiers with independent color and stroke width: accent, mid, and base rings"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional mouse interaction: horizontal mouse movement shifts morph frequency, and vertical movement shifts amplitude"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full animation control: speed, per-layer frequency, and amplitude"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rings bleed beyond component bounds so they never look clipped at the edges"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static preview frame on the Framer canvas for easy art direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Behaves like a standard Framer frame: fixed size or fill parent"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to use","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Copy the component URL and paste it into your Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Place the component behind your content using Framer's layer order."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set ring colors to match your design. Alpha channel controls opacity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust ring count, spacing, and animation speed to taste."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggle mouse interaction and tune the strength controls."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enjoy!"}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Using the pre-made demos","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"A remix link for the demo page is included. Copy any instance directly into your project and customize from there."}]},{"type":"customHeading","content":[{"type":"text","text":"Refunds and support","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Due to the digital nature of this product, purchases cannot be refunded. Contact me at "},{"type":"text","text":"adipurdila@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:adipurdila@gmail.com","target":"_blank"}}]},{"type":"text","text":" or "},{"type":"text","text":"x.com/adipurdila","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://x.com/adipurdila","target":"_blank"}}]},{"type":"text","text":" before buying if you have questions."}]},{"type":"paragraph","content":[{"type":"text","text":"Support includes: direct access to the author, help with features and settings, and assistance with reported bugs. Response time is up to 2 business days."}]}]},"introduction":"Animated organic background rings","slug":"topographic-rings","author":{"framerUserId":"c74393c2-214e-406b-9cc7-241dad16780a","name":"Adi Purdilă","slug":"adipurdila","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c74393c2-214e-406b-9cc7-241dad16780a/phyacdsd","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c74393c2-214e-406b-9cc7-241dad16780a/vqxws66h","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-21T13:52:04.022Z","updatedAt":"2026-06-21T13:52:04.022Z","publishedAt":"2026-06-21T13:52:04.017Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://topographic-rings-component.framer.website/","price":"10","paymentUrl":"https://framersmith.lemonsqueezy.com/checkout/buy/46bf1474-3a25-41ac-9e5e-afaf407e2a6a?logo=0&discount=0","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"h5N7n7MQbTD5DnAa6v9y","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-21T13:52:04.077Z","updatedAt":"2026-06-21T13:52:04.077Z","reported":false}}],"$L5f"]

Suggested for you