5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Te8e,

Venetian Preloader

Description

Venetian Preloader is a sleek, customizable loading animation component that adds cinematic polish to your website or app. Inspired by the look and motion of Venetian blinds, it reveals or conceals your page content through smooth, staggered transitions — perfect for preloading states, page transitions, or immersive brand intros.

This component gives creators full control over direction, animation timing, blind styling, and visual effects — allowing you to tailor the pre-loader to fit any aesthetic or brand identity seamlessly.

Adjustable Properties

Orientation (Horizontal | Vertical)Choose how the blinds move — horizontally or vertically — to control the motion direction of the animation.
Direction (Forward | Reverse)Defines whether the blinds open or close during the animation. Useful for controlling entry vs. exit transitions.
Blind Count (integer)Sets the number of blinds displayed during the animation. Increasing this creates finer divisions for a more detailed effect.
Preload Delay (seconds)Determines how long the pre-loader remains visible before the animation begins. Ideal for syncing with page or asset loading times.
Duration (seconds)Controls the overall speed of the animation. Shorter durations create snappier transitions; longer ones feel more cinematic.
Stagger Delay (seconds)Adds a delay between each blind’s animation start, producing a cascading, rhythmic reveal motion.
Background (hex color)Sets the background color of the loading screen. Supports both light and dark themes.
Blind Color (hex color)Defines the color of the animated blinds. Customizable to match brand palettes or project color schemes.
Show Logo (Show | Hide)Toggles the visibility of an optional logo element during the preload sequence — perfect for subtle brand reinforcement.
Enable Sound (On | Off)Lets you add a light sound effect to the pre-loader, enhancing immersion during page load or transition.
Lets you pick the kind of easing transition you want.
Sound Type (Default | Custom)Choose between the built-in default sound or integrate a custom audio file for a personalized touch.

Use Cases

Landing page pre-loaders
Page transition animations
Creative intros for studios or portfolios
Product or showcase page loading states

Design Philosophy

The Venetian Preloader merges functional motion with cinematic presentation, creating anticipation and focus before your main content appears. Every parameter is designed to offer flexibility — from minimal and fast to bold and theatrical — all while maintaining smooth performance inside Framer.

Technical Details

Fully responsive and optimized for Framer pages
Uses React motion-based animation for fluid transitions
Lightweight and performance-conscious
All properties are available in the component property panel for no-code customization
Supports Framer’s animation timeline and interactions

5a:[["$","$L5d",null,{"post":{"id":"019aa042-1f9e-7f95-8038-e949b8f7943e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10379f85-c7d1-4841-b067-b649b5c6c755","name":"7th Muse","slug":"7thmuse","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/285293/avatar-wtvHUulziIYUl9h0fW7ylrQZwq5iau.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"dylXKYBDCpiWhl2irQHv","resolved":true,"title":"Venetian Preloader","body":"$5e","bodyJson":null,"introduction":"An interactive pre-loader component.","slug":"venetian-preloader","author":{"framerUserId":"10379f85-c7d1-4841-b067-b649b5c6c755","name":"7th Muse","slug":"7thmuse","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/285293/avatar-wtvHUulziIYUl9h0fW7ylrQZwq5iau.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dylXKYBDCpiWhl2irQHv/venetian-preloader-wxK3guzggl5eflRaKRQ0Ct2NfUdyfq","metadata":{"tint":{"h":180,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-10T00:04:24.747Z","updatedAt":"2026-03-31T16:42:58.841Z","publishedAt":"2025-11-20T07:54:39.390Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/VenetianPreloader-dN3B.js@NaVonFS85COaAGLfpjgK","previewUrl":"https://venetian-blind-component.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"NaVonFS85COaAGLfpjgK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":29,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-20T07:54:39.390Z","updatedAt":"2025-11-20T07:54:39.390Z","reported":false}}],"$L5f"]

Suggested for you