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.
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.
Hamim Reza
