---
title: "Foyer — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Jane · Loaders. Foyer is a composition."
canonical: "https://framer.elliotli.dev/component/foyer"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Foyer

# Foyer

A choreographed page loader

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

![Foyer preview image 1](https://framer.elliotli.dev/og/component/foyer/398564ee5f2cb511/1600x1200.jpg)

## Summary

Foyer is a composition.

## Description

**What makes it different**

Most loaders are utilities. Foyer is a composition. The \* ( img ) % layout is built around a pair of custom-drawn parenthesis glyphs that start collapsed at center and spring outward on load framing your images like an editorial masthead. Nothing else on the marketplace looks like it.

Features

**Animation**

-   Three-phase entrance: glyphs spring closed → parens open → image and counter fade in
    
-   Asterisk spins continuously with a slow, ambient rotation
    
-   Parens spring outward from center using a natural physics spring
    
-   Image container floats on a gentle, looping bob
    
-   Smooth fade-out exit when loading completes
    

**Images**

-   Up to 8 image slots — upload as many or as few as you need
    
-   Smart cycling: timing adapts automatically to how many images you upload. 4 images? Each gets longer on screen. 8 images? They move faster. Every image always gets equal time.
    
-   Images crossfade inside a fixed container — no jump, no resize, no repeat
    
-   Stops cleanly at the last image — no looping back to the first
    

**Customisation**

-   Symbol Size — scales the \* and ( ) glyphs together proportionally
    
-   Image W / Image H — independent width and height control for the image frame
    
-   Counter Font — full font panel: family, weight, size, line height (powered by Framer's native font control)
    
-   Counter Color — dedicated colour picker for the percentage counter
    
-   Background — any colour, with automatic light/dark text switching
    

**Editor experience**

-   Canvas-safe: renders a static, non-blocking preview in the Framer editor
    
-   Clicks pass through the preview — edit layers behind it without hiding the component
    
-   No fixed overlay on canvas — fully compatible with Framer's editor workflow
    

**How to use**

1.  Drag **Foyer** onto your page (place it on the layout template so it runs once per session, not on every navigation)Position it as absolute, top:0, right: 0 , bottom: 0 , left: 0 ,
    
2.  Set your background colour
    
3.  Upload 1–8 images
    
4.  Adjust symbol size and image dimensions to taste
    
5.  Publish Foyer handles all timing and animation automatically
    

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

-   All · #2415

## Details

- **Author**: Jane
- **Price**: $10.00
- **Published**: 2026-05-31
- **Updated**: 2026-10-15
- **Added**: 2026-05-24
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story