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:T8f9,

Logo Animation Pro

The ultimate cinematic intro sequence for high-end Framer websites.

Logo Animation Pro is a production-ready "gatekeeper" component designed to create a sophisticated first impression. It acts as a professional loader that masks your website content with a solid background and a choreographed logo reveal before seamlessly transitioning into your live site.

🛠 How to Use

1. Placement: Drag the component onto your homepage. Since it is coded with position: fixed, it will automatically cover the entire viewport regardless of its layer position.

2. Configuration: Upload your logo and select a Preset that fits your brand. Adjust the Background Color to mask your site content effectively. Recommended to use Transparent PNG or SVG.

3. Refinement: Fine-tune the timing. A Hold Time of 1.5s is generally the "sweet spot" for brand recognition before the site is revealed.

4. Position: Add the component in your layout template to show across all pages on your website. The component is not visible even if it's showing on the editor, the component layer won't show in the live website. Keeping the layout absolute in the layout template is recommended.

Questions & Support

Free lifetime updates & email support. Questions? Reach out via email integrystudio@gmail.com or on LinkedIn.

Setting Up

Need help setting up your website or integrating this component?

Reach out, and we’ll help get it running perfectly in your Framer project.

Demo

5a:[["$","$L5d",null,{"post":{"id":"019d7814-8fc2-7770-bdfe-f14db695b392","title":null,"body":"

Price Drop Alert!

Grab it now.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Price Drop Alert! "}]},{"type":"paragraph","content":[{"type":"text","text":"Grab it now."}]}]},"author":{"framerUserId":"189902f2-577b-409b-a96e-d63b629fc3b4","name":"Integry","slug":"integrystudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/96437/avatar-MfTznqKeqttkCeqaHZ3PNQowNQRZ0W.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mJrz2PQgczbsT8zo2xHo","resolved":true,"title":"Logo Pre-loader","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Logo Animation Pro"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"The ultimate cinematic intro sequence for high-end Framer websites.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Logo Animation Pro","marks":[{"type":"bold"}]},{"type":"text","text":" is a production-ready \"gatekeeper\" component designed to create a sophisticated first impression. It acts as a professional loader that masks your website content with a solid background and a choreographed logo reveal before seamlessly transitioning into your live site."}]},{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-b1bfrktf-yUJGIDCUThQvMl4boWU2jLbc4qYTc0","link":null,"caption":"","uploadId":null}},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"hammer_and_wrench","emoji":"🛠"}},{"type":"text","text":" How to Use"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"1. Placement:","marks":[{"type":"bold"}]},{"type":"text","text":" Drag the component onto your homepage. Since it is coded with position: fixed, it will automatically cover the entire viewport regardless of its layer position."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Configuration:","marks":[{"type":"bold"}]},{"type":"text","text":" Upload your logo and select a "},{"type":"text","text":"Preset","marks":[{"type":"bold"}]},{"type":"text","text":" that fits your brand. Adjust the "},{"type":"text","text":"Background Color","marks":[{"type":"bold"}]},{"type":"text","text":" to mask your site content effectively. Recommended to use Transparent PNG or SVG."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Refinement:","marks":[{"type":"bold"}]},{"type":"text","text":" Fine-tune the timing. A "},{"type":"text","text":"Hold Time","marks":[{"type":"bold"}]},{"type":"text","text":" of "},{"type":"text","text":"1.5s","marks":[{"type":"bold"}]},{"type":"text","text":" is generally the \"sweet spot\" for brand recognition before the site is revealed."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Position:","marks":[{"type":"bold"}]},{"type":"text","text":" Add the component in your layout template to show across all pages on your website. The component is not visible even if it's showing on the editor, the component layer won't show in the live website. Keeping the layout absolute in the layout template is recommended."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions & Support"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Free lifetime updates & email support. Questions? Reach out via email "},{"type":"text","text":"integrystudio@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:integrystudio@gmail.com","class":null,"target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" or on "},{"type":"text","text":"LinkedIn","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.linkedin.com/company/integrystudio","class":null,"target":"_blank"}},{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"customHeading","content":[{"type":"text","text":"Setting Up"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up your website or integrating this component?"}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out, and we’ll help get it running perfectly in your Framer project."}]},{"type":"paragraph","content":[{"type":"text","text":"Demo","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://integry.framer.ai/logopreloader","class":null,"target":"_blank"}},{"type":"bold"}]}]}]},"introduction":"High-end cinematic intro","slug":"logo-pre-loader","author":{"framerUserId":"189902f2-577b-409b-a96e-d63b629fc3b4","name":"Integry","slug":"integrystudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/96437/avatar-MfTznqKeqttkCeqaHZ3PNQowNQRZ0W.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/mJrz2PQgczbsT8zo2xHo/logo-pre-loader-IlCnPdtqH7xKE6vt68FKVYeVRiuEVf","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-25T15:16:36.482Z","updatedAt":"2026-09-11T21:51:40.053Z","publishedAt":"2026-04-10T15:48:26.690Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://logopreloader.framer.ai/","price":"4","paymentUrl":"https://buy.polar.sh/polar_cl_1WZImKJ5NzByTXcSZ4PVCbdABO05G5FINowBq4RYtGk","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"FfUQl0iCD5XDz0OkgCaA","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-11T21:51:41.024Z","createdAt":"2026-04-10T15:48:26.690Z","updatedAt":"2026-09-11T21:51:41.024Z","reported":false}}],"$L5f"]

Suggested for you