PhotoType

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.