Skip to content

component

GlyphLens

By Hamim Reza

Details

Summary

GlyphLens is an animated typography component for Framer where each letter springs into place, a colored highlight sweeps across the word, and hovering any individual letter…

Description

GlyphLens is an animated typography component for Framer where each letter springs into place, a colored highlight sweeps across the word, and hovering any individual letter reveals a unique image clipped inside that letter's shape, slowly panning. No other letter animation component does this: assign a different image to every character, and each one becomes its own small window, not a filled outline, not a font swap, an actual photo inside the letterform. WHAT IT DOES Type your text and assign up to one image per character. Letters spring in with staggered timing, then a colored sweep runs across the word once the entrance settles. Hover any letter and its image fades in, clipped to that character's shape, slowly panning. KEY FEATURES Per-letter image assignment, a genuinely different image for every character Spring-physics letter entrance with adjustable stagger Colored highlight sweep that runs across the word after entrance settles Slow background pan on hover for a living, non-static image reveal Adjustable entrance settle time, sweep stagger, and sweep duration Ignores extra images beyond your character count automatically Static-safe rendering for the Framer canvas and thumbnails Full typography control, size, weight, spacing, line height Independent base and sweep text colors Zero third-party dependencies beyond Framer Motion WHY IT WORKS Text hover effects on the marketplace fill, warp, shuffle, or morph letters, but none turn individual characters into image windows. GlyphLens makes a headline reward exploration, hover every letter and discover a different picture. PERFECT FOR Portfolio hero headlines, brand name reveals, agency landing pages, and any Framer site that wants a headline worth hovering over. WHAT'S INCLUDED A single drop-in code component. Type your text, assign images per letter, and tune entrance, sweep, and colors through property controls. Drop it in, add your images, and let every letter tell its own story.

Introduction

Per Letter Hover Image Reveal Text

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200122799/79/99/119/139/15
  • All · #2279