Loader Logo Reveal
A fullscreen loading screen that reveals your logo with a smooth clip-path fill animation, powered by GSAP. A dimmed silhouette of your logo is shown first, then gradually fills in from a configurable direction — creating an elegant "loading complete" moment before the background slides away to reveal your page.
Features
Paste any SVG logo directly into the component
4 fill directions: left, right, top, bottom
3 background variants: solid color, gradient, or frosted glass blur
Configurable animation duration, logo size (S/M/L), logo color, and dim opacity
Optional scroll trigger — start the animation only when the element enters the viewport
Loop mode with adjustable delay for demos or presentations
Accessible: respects prefers-reduced-motion, includes screen reader labels and ARIA attributes
Auto-play toggle and canvas preview toggle for easy design-time editing
How to use
Drop the component onto your page (it renders as a fixed fullscreen overlay by default)
Paste your SVG code into the "Custom Logo SVG" field
Pick a variant, set your colors, and adjust the duration
Turn off "Show Preview" when you want to work on the content underneath
Sanna Granqvist
