Interactive Footer 6
Water-reactive footer & wordmark
About this component
About
Interactive Footer 6 turns a website’s last section into an experience: a large, editable wordmark reflected in responsive water. Move across the surface to leave a wake; click or tap to send out a ring. Ripples bend the reflection, light the letters, and settle into a calm, moonlit scene. An entry ripple and gentle ambient motion bring the footer to life.
Four navigation columns sit above the water, with linked copyright and creator credit below. Link hover adds a fine animated underline and color shift. Desktop, Tablet, and Phone layouts bring this interactive Framer footer to wide portfolios and compact mobile screens.
What you can customize
Edit the wordmark, four column headings, and all 16 link labels. Give each link, the copyright, and the credit its own destination and New Tab setting. Adjust background, wordmark, link, hover, water, and glow colors. Tune reflection, wave strength, ambient motion, glow, and moonlight. Pointer interaction can be turned off while ambient water stays on.
Refine the layout and typography in native Framer layers. The water effect lives in a nested WebGL component, while the wordmark stays real text. Keyboard focus is visible and reduced-motion preferences are respected.
Great for (examples)
Bring a distinctive finish to:
Designer portfolios and personal websites
Creative studios and branding agencies
Architecture and photography portfolios
Luxury, fashion, and editorial brands
Hospitality and travel websites
Digital product and SaaS landing pages
Motion design and interactive experiences
Dark, atmospheric Framer websites
Need help?
Questions or feedback? Reach me at matthias@lmvision.de or on X @Matthias_Oel.
Need a matching component?
Carry the reflective finish from header to footer:
