LogoMotion

LogoMotion – Animated Logo Preloader for Modern WebsitesThe LogoMotion component creates a sleek animated preloader that showcases your logo as your site loads. With smooth motion, optional rotation, and fade-out effect, it ensures your brand leaves a lasting first impression.

Features:

• Animated logo entrance and exit with smooth easing

• Optional infinite logo rotation

• Fully customizable background color

• Adjustable logo width and height

• Automatic fade-out after loading (3s duration)

• Built-in with Framer Motion for fluid animations

How it works:

Place LogoMotion as the first element inside your main Frame. Then adjust the following:

• Width: 100%

• Height: 100vh

• Z-index: 10 (max)

• Position: Fixed (Top = 0, Left = 0)

• Pointer events: none (in Style panel)

• Finally, lock the component to avoid accidental edits.

Once set, drop in your logo, adjust its size, background, and rotation. The animation runs automatically on page load and fades out after 3 seconds.

Perfect for:

• Branding-focused websites

• SaaS and startup landing pages

• Portfolios and creative studios

• Any project that needs a polished loading experience