51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.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/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.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/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/1v3f42-oqro9g.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/146b7x-3yl4nl.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js"],"S"] 52:T8d8,

Transform any section of your site into a captivating interactive experience with the Wet Glass Ripple Overlay. This component layers a beautiful, fully customizable frosted glass effect over your content, which comes to life with a stunning liquid ripple that follows the user's cursor.

As the user hovers, the glass appears to ripple and move away, clearing a circular area to reveal the sharp, focused content underneath. It's a "wow" effect that encourages interaction and adds a premium, dynamic feel to any design.

Key Features ✨

Interactive Wet Glass: A beautiful frosted glass effect that blurs any background image, video, or content placed behind it.

Liquid Ripple on Hover: A realistic water displacement animation follows the user's cursor (or finger on mobile), creating an illusion of moving liquid across the screen.

Spotlight Reveal: The ripple effect clears a "hole" in the overlay, revealing the content underneath in perfect clarity, drawing the user's focus.

Highly Performant: Built with advanced Framer Motion hooks for a smooth animation that feels responsive and natural.

Mobile & Tablet Ready: The effect works seamlessly on touch devices, responding to a user's drag gesture.

How to Use 🚀

Drag the Wet Glass Overlay component from your Assets panel into any existing Frame or Section.

With the overlay selected, go to the Layout section in the right-hand panel and set its Width and Height to Fill.

Ensure the overlay is the top layer within its container so it can cover all the content you want to reveal.

That's it! The effect is now active over your content.

Customization Options 🎨

Fine-tune every aspect of the effect directly from the properties panel:

Glass Tint Color: Change the color and transparency of the overlay to match your site's branding. Use light colors for a frosted look or dark colors for a moody effect.

Reveal Size: Control the size of the clear circle that reveals your content.

Glass Blur: Adjust the intensity of the blur, from a subtle haze to a completely frosted look.

Ripple Intensity: Change the strength of the water distortion effect, from a gentle wave to a dramatic ripple.

53:T1039,

Empower your Framer website with the ultimate interactive Mortgage Calculator.

Designed specifically for the Framer platform, this powerful Code Component provides your visitors with more than just a basic payment estimate. It delivers a comprehensive breakdown of monthly costs and, critically, an intelligent Early Payoff Calculator that can help them visualize significant long-term savings. Perfect for real estate agents, mortgage brokers, financial advisors, or anyone building a property-related website.

✨ Why Choose This Mortgage Calculator for Your Framer Project?

Seamless Framer Integration:
- Drag-and-Drop Ready: Instantly add to any Framer page. No complex coding or external dependencies required – it's built to just work, beautifully.
- Native Framer Code Component: Optimized for peak performance and a smooth, intuitive editing experience directly within your Framer canvas.
Truly Responsive & Adaptive Design:
- Pixel-Perfect on Every Device: Crafted with precise media query breakpoints at 1100px (desktop), 768px (tablet), and 480px (mobile), ensuring your calculator looks impeccable and functions flawlessly on any screen size, from wide monitors to the smallest smartphones. Your users will always have a great experience.
Comprehensive Financial Insights:
- Detailed Monthly Payment Breakdown: Clearly itemizes Principal & Interest, estimated Property Taxes, Home Insurance, and HOA Fees, giving users a complete picture of their housing costs.
- Essential Loan Summary: Provides an easy-to-understand overview of the Down Payment, Total Loan Amount, and the crucial Total Interest Paid over the loan's lifetime.
⭐ Advanced Early Payoff Calculator (Unique Selling Proposition):
- Interactive Savings Simulation: This standout feature allows users to input additional payments (monthly, bi-weekly, or yearly) and instantly see how much they can reduce their loan term and save in total interest. A powerful tool for financial planning and engagement.
- Clear Results: Displays the new payoff timeline and the exact interest amount saved.
Effortless Customization, No Code Required:
- Dynamic Default Values: Easily set initial Home Price, Down Payment Percentage, Interest Rate, Loan Term (10, 15, 20, 30 years), Annual Property Tax, Annual Home Insurance, Monthly HOA Fee, and even the default Extra Payment amount and frequency. All adjustable directly from Framer's Properties Panel.
- Brand-Ready Styling: Maintain your brand's aesthetic with intuitive color controls. Adjust the Primary Color, Secondary Color, Background Color, Card Background, Border Color, Text Color, Heading Color, Total Payment Background, and Total Payment Text Color, all without touching a line of code.

🎯 Ideal For:

Real Estate Professionals: Enhance property listings, lead generation pages, and agent portfolios.
Mortgage Brokers & Lenders: Provide transparent loan estimates and engage potential clients.
Financial Advisors & Bloggers: Offer valuable tools for financial literacy and planning.
Property Developers: Showcase affordability for new constructions.
Any Framer User: Looking for a robust, beautiful, and easy-to-implement financial tool.

Give your users the powerful financial insights they need, seamlessly integrated into your Framer site. Add the Responsive Mortgage & Early Payoff Calculator today and provide unparalleled value!

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-e93e0fd2-c7b9-4910-b6f0-6a510e966174-all:/unified/creator/e93e0fd2-c7b9-4910-b6f0-6a510e966174/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:e93e0fd2-c7b9-4910-b6f0-6a510e966174:/unified/posts/?creator=e93e0fd2-c7b9-4910-b6f0-6a510e966174&with=reposts":[{"data":[{"id":"0199c5d6-10a5-70df-89dd-20a7ef951f82","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e93e0fd2-c7b9-4910-b6f0-6a510e966174","name":"Barroso Digital","slug":"barroso-digital-bw3vmh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/940651/avatar-gvj14fNpSQhS1ujN59ZjglBhH4DILt.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"NKlkmU5Hi9fd89QVAKhH","resolved":true,"title":"WetGlassOverlay","body":"$52","bodyJson":null,"introduction":"Premium liquid glass hover effect","slug":"wetglassoverlay","author":{"framerUserId":"e93e0fd2-c7b9-4910-b6f0-6a510e966174","name":"Barroso Digital","slug":"barroso-digital-bw3vmh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/940651/avatar-gvj14fNpSQhS1ujN59ZjglBhH4DILt.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/NKlkmU5Hi9fd89QVAKhH/wetglassoverlay-EHEktVIXAlChVbF3OydTO65GFYHpeA","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T21:20:59.666Z","updatedAt":"2026-04-14T14:47:51.787Z","publishedAt":"2025-10-08T21:59:24.581Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://wetglassoverlay.framer.website/","price":"3","paymentUrl":"https://barrosodigital.lemonsqueezy.com/checkout/buy/f9c1b9fd-fadd-443b-af9c-ed26e89b20a4","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"wJWg6QRoPh0p0yjPVSZ1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-08T21:59:24.581Z","updatedAt":"2025-10-08T21:59:24.581Z"},{"id":"0199957d-c5ba-727d-9c94-25c88ec8e428","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e93e0fd2-c7b9-4910-b6f0-6a510e966174","name":"Barroso Digital","slug":"barroso-digital-bw3vmh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/940651/avatar-gvj14fNpSQhS1ujN59ZjglBhH4DILt.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"v91YmlK0kInbM1Aw9Pzj","resolved":true,"title":"BeforeAfterImgSlider","body":"

Effortlessly compare two images with this fully responsive and highly customizable Before/After Slider component. It's perfect for showcasing transformations, redesigns, or photo edits.

This component is designed to solve common issues with transparent images by allowing you to set a unique, solid background color behind each image, preventing any visual bleed-through.

Take full control over the slider's appearance. You can adjust the slider line width, the color of the line and arrows, and the circular handle's background color to perfectly match your brand. Add optional \"Before\" and \"After\" text labels and customize their color and font size for maximum clarity. You can also set the slider's initial starting position and adjust the component's border radius.

It’s fully interactive, supporting both mouse dragging on desktop and touch gestures on mobile devices, ensuring a smooth experience for all users.

","bodyJson":null,"introduction":"High-end image comparison tool","slug":"beforeafterimgslider","author":{"framerUserId":"e93e0fd2-c7b9-4910-b6f0-6a510e966174","name":"Barroso Digital","slug":"barroso-digital-bw3vmh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/940651/avatar-gvj14fNpSQhS1ujN59ZjglBhH4DILt.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/gKCt4jnC7Mi3AXpNJ0Rm/beforenafterimgslide-HeBh0xCli4bkuFsfW3b3BN74HqIfKk","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-19T17:57:24.942Z","updatedAt":"2026-04-14T14:50:03.338Z","publishedAt":"2025-09-29T12:41:11.866Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://beforeafterimgslider.framer.website/","price":"3","paymentUrl":"https://barrosodigital.lemonsqueezy.com/checkout/buy/917c28c0-f6e0-4544-9f04-e47851bfa14e","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"nhVMPb8C1zda2VxM6aqE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-29T12:41:11.866Z","updatedAt":"2025-09-29T12:41:11.866Z"},{"id":"019971fd-5853-7063-bd1b-fa2c0475d016","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e93e0fd2-c7b9-4910-b6f0-6a510e966174","name":"Barroso Digital","slug":"barroso-digital-bw3vmh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/940651/avatar-gvj14fNpSQhS1ujN59ZjglBhH4DILt.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OLjx7THpuRd6Ab6aePrp","resolved":true,"title":"MortgageCalculator","body":"$53","bodyJson":null,"introduction":"All-in-one mortgage calculator","slug":"mortgagecalculator","author":{"framerUserId":"e93e0fd2-c7b9-4910-b6f0-6a510e966174","name":"Barroso Digital","slug":"barroso-digital-bw3vmh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/940651/avatar-gvj14fNpSQhS1ujN59ZjglBhH4DILt.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OLjx7THpuRd6Ab6aePrp/mortgagecalculator-RLkd5S8AxA1Xf7kY6owKzP26CEM220","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-10T19:34:42.251Z","updatedAt":"2026-04-14T14:44:23.064Z","publishedAt":"2025-09-22T15:14:12.691Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://mortgagecalculator.framer.website/","price":"5","paymentUrl":"https://barrosodigital.lemonsqueezy.com/checkout/buy/1a5a03c9-c5f9-43ef-a8ae-9625f9d16ba7","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"GYewDAeDNYb15jFFPHWT","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-22T15:14:12.691Z","updatedAt":"2025-09-22T15:14:12.691Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]