---
title: "PhotoType — Free Framer component · Best of Framer"
description: "Free Framer component · by Hamim Reza · Text. PhotoType is a Framer code component that fills bold display text with any image, turning a headline into a photo-clipped statement piece."
canonical: "https://framer.elliotli.dev/component/phototype"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/PhotoType

# PhotoType

Photo-filled display text for Fram

[View on Framer](https://framer.com/marketplace/components/phototype/?via=elliot-li)

![PhotoType preview image 1](https://framer.elliotli.dev/og/component/phototype/70416d47fb6065e0/1600x1200.jpg)

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5703

## Details

- **Author**: Hamim Reza
- **Published**: 2026-07-18
- **Updated**: 2026-07-18
- **Added**: 2026-07-18
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing