---
title: "Shoji Preloader — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Joshua Roberts · Loaders. Shoji Preloader ⛩️ Eliminate hydration flashes instantly and create an engaging, highly-customizable loading sequence to wow everyone…"
canonical: "https://framer.elliotli.dev/component/shoji-preloader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Shoji Preloader

# Shoji Preloader

Premium site preloader.

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

![Shoji Preloader preview image 1](https://framer.elliotli.dev/og/component/shoji-preloader/75a8c540e9591688/1600x1200.jpg)

## Summary

Shoji Preloader ⛩️ Eliminate hydration flashes instantly and create an engaging, highly-customizable loading sequence to wow everyone who visits your site before it even finishes…

## Description

## Shoji Preloader ⛩️

Eliminate hydration flashes instantly and create an engaging, highly-customizable loading sequence to wow everyone who visits your site before it even finishes loading.

### Best use cases:

Portfolio intro screens, immersive agency landing pages, heavy media-rich sites, e-commerce storefronts, and branded loading experiences.

### How to Use:

1.  Drag and drop the component directly onto your Framer canvas.
    
2.  Choose your media type (Lottie, Image, Video, or Text) and tweak the property customizations manually until the exit animation is perfectly dialed in.
    
3.  Preview and publish to see the zero-flash preloader in action on your live site.
    

### Highlights:

-   Zero-flash vanilla JS veil
    
-   Lottie, Video, Image, and Text support
    
-   Smart session & local caching
    
-   Exclusive canvas-only visual debugger
    
-   8 distinct exit styles (Shoji, Wipe, Iris, Flip, etc.)
    
-   Staggered text character and word animations
    
-   Independent directional border lines and fills
    
-   Accessibility built in (ARIA labels & focus trapping)
    
-   Prefers-reduced-motion tracking
    
-   Optional skip button with Esc key shortcut
    
-   Built-in progress bar
    
-   Comprehensive timing and delay controls
    
-   Performance optimized
    

_Crafted by:_ [_Joshua Roberts_](https://joshuaroberts.design/)

Use case examples for the Shoji Preloader component.![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-rhvtxbv3-9ladEFnIdIsLe5LBPh2iPi40HI4tmW)

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

-   All · #6459

## Details

- **Author**: Joshua Roberts
- **Price**: $15.00
- **Published**: 2026-05-27
- **Updated**: 2026-05-27
- **Added**: 2026-05-21
- **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