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.
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.
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
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!
A remix link for the demo page is included. Copy any instance directly into your project and customize from there.
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.
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.
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.
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
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!
A remix link for the demo page is included. Copy any instance directly into your project and customize from there.
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.
