How does the image-masked letter effect work technically?

The window-type effect uses an add_code child with background-clip: text and color: transparent to clip a full-bleed photograph to the shape of the letterforms. The image is the fill, the type is the window. The sample build uses Anton 900 at very large sizes because the bigger the letter counter, the more of the photograph is visible. The page background fills around the letters so the image only reads through the type shape.

Can I use my own photography for the masked letters?

Yes. The template ships with five scenic photographs (HELLO desert dune, WONDER night sky, WILD forest canopy, RAW concrete texture, MAKE ocean horizon) that mask cleanly because they have bold, even composition. For your own work, pick photos with strong large-scale forms and no obvious focal points - the image will be cropped to irregular letter shapes, so detail in the corners gets lost. High resolution helps too since the image fills 80% of pane width through the letter windows.

Does the brutalist aesthetic work for non-design-studio brands?

Yes. The studio name in the sample (MERIDIAN STUDIO) is the only studio-specific text - the structure works for any brand whose visual is the point: a music label, a travel brand, a photography practice, a fashion house, a real estate brokerage, or an agency. The single-word panes (HELLO, WONDER, WILD, RAW, MAKE) become a brand vocabulary that pairs with the masked photography.

Window Type - Image-Masked Letters Template

A 6-pane brutalist screamer template where the typography is the window and the photograph is the view. White background, Anton 900 at sizes that fill most of the pane, JetBrains Mono micro-meta in the corners, and full-bleed scenic photography clipped to the shape of single-word headlines. Built for design studios, photographers, agencies, travel brands, and music labels announcing a portfolio drop or a rebrand where the visual is the entire pitch.

#What Makes This Template Stand Out

The defining move is image-masked type. Every word pane uses CSS background-clip: text to clip a full-bleed photograph to the letterforms of a single word - HELLO masked with a desert dune, WONDER with a night sky, WILD with a forest canopy, RAW with a raw concrete texture, MAKE with an ocean horizon. The image only reads through the letters; the page background fills around them. The result is that the type becomes a window onto a world the studio is signaling.

The sign-off pane is the punchline. After five panes of windowed type where the letters are the photograph, the final pane (MERIDIAN.) drops the masking entirely and shows the studio wordmark as solid black Anton. It's the first time the viewer sees pure type, which makes the wordmark land as a resolution rather than just another slide. The contact info in JetBrains Mono below gives the deck a deliberate end.

Animation tone is slow and composed. Pane transitions enter from the right and exit to the left for a continuous rightward read, the masked images sit at parallax 2 with the page-color foreground at parallax 4, and the JetBrains Mono captions stay still while the type reveals. The image inside the letters can drift subtly during a pane's idle state, which gives the windowed type a faint "world behind the text" feel without being distracting. Pacing is slow at around 4 seconds per pane.

White background (#fafafa) with Anton 900 type clipped to full-bleed scenic photography
Five image-masked single-word panes (HELLO, WONDER, WILD, RAW, MAKE) plus a pure-type sign-off
JetBrains Mono micro-meta in every corner (pane number / theme word / studio name)
CSS background-clip: text masking via add_code for the windowed letterform effect
Right-to-left horizontal pane transitions for continuous editorial flow
6-pane portfolio-drop arc tuned for studios, agencies, photographers, and travel brands

#Who Should Use This Template

Design studios and agencies announcing a portfolio drop, a rebrand, or a new visual direction. The image-masked type signals taste without a single line of body copy.
Photographers and visual directors treating their photography as the brand voice. The window-type effect makes any photograph readable as type, which is the most direct statement of "this is what I see."
Travel and hospitality brands with destination photography. WONDER, WILD, and RAW filled with location imagery becomes a place-as-brand reveal that beats any travel-deck stock photo treatment.
Music labels and creative collectives with cover art or commissioned photography. The windowed letters work as a single-frame teaser for an album drop, a film release, or a collective announcement.

#Best Use Cases

#Studio Portfolio Drop

When a studio releases a new portfolio volume, the deck is the announcement. This template's 6-pane structure introduces the studio (HELLO), establishes the visual vocabulary (WONDER / WILD / RAW), pivots to a process beat (MAKE REAL THINGS), and lands on the wordmark and contact info. Export to MP4 for the LinkedIn drop, to HTML for the studio site, or to PDF for the press kit. The masked typography signals to clients that the studio sees type and image as one system.

#Rebrand Announcement

Rebrands need a deck that demonstrates the new visual system rather than describing it. This template demonstrates it - the windowed type IS the new system on every pane. Use the five word panes for five tonal words from the new brand vocabulary, fill each one with photography that lives in the new system, and let the sign-off pane reveal the new wordmark as solid black type. The contrast between masked and solid type lands the rebrand as a moment.

#Travel and Destination Brand Reveals

Destination brands struggle to make their photography feel like a brand rather than a stock library. This template fixes that by treating the photograph as the type itself. WONDER masked with a milky way over the Atacama, WILD masked with a Patagonia canopy, RAW masked with a basalt cliff - the destination becomes the brand voice through the type window. Export as MP4 for the campaign hero and as static panes for the IG grid drop.

#How to Customize This Template

Open PaneFlow and select "Window Type - Image-Masked Letters" from the template gallery
Replace the studio wordmark on the cover (HELLO) and the sign-off (MERIDIAN.) with your name or brand
Swap the five scenic photographs with your own high-resolution, bold-composition images
Update the four concept words (WONDER, WILD, RAW, MAKE) to your brand's tonal vocabulary
Edit the JetBrains Mono micro-meta in every corner (pane number / theme word / studio name)
Rewrite the MAKE REAL THINGS pane copy on pane 5 for your process or mission beat
Update the sign-off contact info, URL, and the STUDIO OF VISUAL DIRECTION descriptor
Export to MP4 for the portfolio drop announcement, HTML for the studio site, or PDF for the press kit

Triptych Film Cut - Three Words - three-beat film-cut typography in a similar brutalist register
Magazine Cover - Editorial Mix - editorial cover treatment with mixed display type
Diptych Split - Slab + Cutout - hard 50/50 manifesto split in the same display vocabulary
Photographer Minimalist Portfolio - elegant photo portfolio in a quieter register

PaneFlow for Designers - editorial portfolio and personal brand templates for design professionals
PaneFlow for Agencies - capabilities decks, case studies, and proposals built for creative and brand studios
PaneFlow vs Canva - how PaneFlow goes beyond Canva for animated typographic showcases

Start with Window Type - Image-Masked Letters

Open this template in PaneFlow, customize it to match your brand, and export as HTML, React, Vue, or video.

Use This Template Browse All Templates