component
PhotoType
By Hamim Reza

Details
- Hamim RezaAuthor
- componentType
- 2026-07-18Published
- 2026-07-18Updated
- 2026-07-18Added
- TextCategories
Summary
PhotoType is a Framer code component that fills bold display text with any image, turning a headline into a photo-clipped statement piece.
Description
PhotoType is a Framer code component that fills bold display text with any image, turning a headline into a photo-clipped statement piece. Upload an image, type your text, and the photo shows through the letterforms instead of sitting behind them. No animation, no scroll dependency, just a clean static effect that renders instantly and stays lightweight. WHAT IT DOES PhotoType clips your background image to the exact shape of your text using native CSS text-clipping, so the image only appears within the letters. Text defaults to bold uppercase for maximum impact, ideal for hero headlines and brand names. KEY FEATURES Image fills text using native background-clip, no canvas or WebGL required Three image sizing modes: Cover, Contain, or Custom percentage scale 9-position image placement: center, top, bottom, left, right, and corners Custom scale control from 10% to 500% when using Custom sizing Full extended font controls: size, weight, letter spacing, line height, family Smart width behavior: auto-sizes to text or fills a fixed container cleanly Automatic word wrap when placed in fixed-width layouts Responsive image support built on Framer's native image system Zero third-party dependencies, single self-contained code component Instant render, no animation delay or scroll trigger needed WHY IT WORKS Most image-in-text effects rely on scroll animation or moving backgrounds. PhotoType is the static version done right: precise placement, real typography controls, and a lightweight render with no motion to wait for. PERFECT FOR Hero headlines, brand name reveals, portfolio intros, editorial titles, and any Framer site that wants a photo-textured headline without animation weight. WHAT'S INCLUDED A single drop-in Framer code component. Type your text, upload an image, and adjust size, position, and typography through property controls. No coding required.
Introduction
Photo-filled display text for Fram
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #4603