Logo Reveal Loader

How to use this component?

1. Add the component to the top of your Layers panel so it sits above everything else.

2. Set the component width to 100% and height to 100vh.

3. Lock the component layer so you can safely work on items underneath without accidentally selecting the loader.

4. Test with the layer unlocked briefly to confirm visual alignment, then lock again for design work.

Tip: in Framer you can lock a layer by selecting it and clicking the padlock icon or right clicking the layer and choosing Lock.

Logo Reveal Loader is a premium, plug and play Framer component that creates a memorable intro for your site or app. It reveals your logo with a two-layer clip-path reveal, supported by a progress bar and refined text motion. The component is fully customizable, responsive, and built to preserve page stability while your intro animation runs.

Key benefits

• Clean brand reveal that boosts perceived polish and trust.

• Easy to configure for any brand with color, background, timing, and logo options.

• Works with SVG and raster logos with optional original SVG color preservation.

• Non-intrusive handling of scroll and pointer events while the loader is active.

• Sanitizes and caches SVGs for safer and faster repeat loads.

Props at a glance

• 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 — Keep original SVG colors when true

• color — Accent color for logo and progress bar

• backgroundColor — Full-screen background color

• duration — Animation length in seconds

Recommended defaults: duration 2 to 4 seconds, logoWidthEm 10 to 20 for most logos.

How it works

• Renders a fixed, full-viewport wrapper that locks scrolling and intercepts pointer events while active.

• Injects two identical logo layers, one faded and one clipped, to create a smooth reveal effect.

• Animates the top layer clip-path while the progress bar scales and the two text lines animate in sequence.

• Cleans up any injected nodes and restores interaction once the animation completes.

Creative use cases

• Brand splash for product launches and marketing campaigns.

• Transition screen between routes or during heavy data fetches.

• Product silhouette reveal for feature pages.

• Seasonal or campaign variants by toggling SVG colors and background.

• A/B test text and timing to improve engagement.