GlyphLens

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.