MeshGallery is an interactive image-gallery section where typography becomes the navigation surface.
Instead of thumbnails, arrows, or a standard carousel, the section turns a single word into a responsive field. As the cursor moves across the letters, the type reacts — characters near your cursor fade away to reveal the images behind them, while the background blends between image states in the same spatial radius. It feels less like clicking through slides and more like moving through a living visual index.
It works for selected work, campaigns, client studies, archives, moodboards, or portfolio sections. Change the word, drop in a set of images, and the component becomes a different visual system. A studio could use it for project previews. A designer could use it as a portfolio entry point. A brand could use it as a campaign surface.
As you move between images, you move between projects — so the project metadata updates live in the corner, briefly scrambling mid-transition and locking clean once an image comes into focus. A small live coordinate readout reinforces the feeling of a real, reactive instrument.
I used Framer Agent throughout the build to go from concept to working prototype: exploring interaction directions, generating and refining the component structure, stress-testing the layout, tuning the behavior, and evolving it from a simple hover effect into a smoother image-blending system with live metadata. The final piece combines custom code, variable typography, cursor-based proximity logic, layered image blending, and Framer’s visual canvas into one reusable interactive section.
The goal was a gallery that doesn’t look or behave like a gallery at first glance, but still works as one. A section title becomes an interface. A word becomes a lens. The images respond as if they’re hidden inside the typography.
Submitted with 30 seconds to spare holy *** lol.
MeshGallery is an interactive image-gallery section where typography becomes the navigation surface.
Instead of thumbnails, arrows, or a standard carousel, the section turns a single word into a responsive field. As the cursor moves across the letters, the type reacts — characters near your cursor fade away to reveal the images behind them, while the background blends between image states in the same spatial radius. It feels less like clicking through slides and more like moving through a living visual index.
It works for selected work, campaigns, client studies, archives, moodboards, or portfolio sections. Change the word, drop in a set of images, and the component becomes a different visual system. A studio could use it for project previews. A designer could use it as a portfolio entry point. A brand could use it as a campaign surface.
As you move between images, you move between projects — so the project metadata updates live in the corner, briefly scrambling mid-transition and locking clean once an image comes into focus. A small live coordinate readout reinforces the feeling of a real, reactive instrument.
I used Framer Agent throughout the build to go from concept to working prototype: exploring interaction directions, generating and refining the component structure, stress-testing the layout, tuning the behavior, and evolving it from a simple hover effect into a smoother image-blending system with live metadata. The final piece combines custom code, variable typography, cursor-based proximity logic, layered image blending, and Framer’s visual canvas into one reusable interactive section.
The goal was a gallery that doesn’t look or behave like a gallery at first glance, but still works as one. A section title becomes an interface. A word becomes a lens. The images respond as if they’re hidden inside the typography.
Submitted with 30 seconds to spare holy *** lol.
Rule & Form