Logo Reveal Loader

Preview:

https://logo-reveal-loader.framer.website/

Logo Reveal Loader is a polished, customizable Framer component that shows a full-screen loading overlay and reveals your logo through a two-layer clip-path reveal, paired with a progress bar and animated text. It is responsive, brandable, and built to keep the page stable while the intro animation runs.

Key features

• Two-layer logo reveal: a faded base layer plus a clipped top layer that animates to reveal the logo.
• Dual text slots that alternate with subtle character motion for a tactile feel.
• Supports both SVG and raster logos, with an option to keep original SVG colors or use a single accent color.
• Full-screen overlay with progress bar, scroll lock, and pointer-event handling while active.
• SVG sanitization and caching for safer, faster loads.
  

Props quick reference

• text1 — Primary headline shown first (default "Hold tight")
• text2 — Secondary headline shown second (default "Hang in there")
• logo — URL or uploaded image file (svg, png, jpg, webp, gif)
• logoWidthEm — Logo width in em units (default 17.5)
• preserveSvgColors — Boolean, keep original SVG colors if true
• color — Accent color for logo and progress bar
• backgroundColor — Full-screen background color
• duration — Animation length in seconds
  

  

  
  

How it works (brief)

• Renders a fixed, full-viewport wrapper that prevents scrolling and intercepts pointer events while active.
• Inserts two logo elements into the DOM, centered and sized identically, with the top element initially clipped.
• Animates the clip-path on the top element to reveal the logo, while the progress bar scales and the two text lines animate in sequence.
• Cleans up inserted nodes, restores scroll, and disables pointer blocking when finished.
  

Creative ways to use it

• Brand splash for app or site entry, or as a themed launch screen for campaigns.
• Replace the logo with a product silhouette for a micro reveal on product pages.
• Use between route transitions as a quick visual bridge while content loads.
• Animate seasonal variations by toggling preserveSvgColors and swapping background color or text.
• A/B test different texts and durations to find the most engaging intro.
  

Accessibility and performance notes

• If the logo is purely decorative, mark it as such for screen readers or add an accessible label if it conveys important info.
• Consider adding a prefers-reduced-motion fallback to shorten or disable animations for users who opt out of motion.
• Keep duration reasonable, especially on slow networks, to avoid blocking the main content for too long.
• The component sanitizes SVGs and caches fetched SVGs for better performance, but test large SVG files for rendering cost.

Tip
Use short, punchy text and a moderate duration for the best perceived performance and brand impact.