Loading overlay

Introduction

The Line reveal example creates a dramatic loading animation where a thin vertical line extends from the center of the screen, then expands horizontally to reveal content beneath.

This example combines several Motion APIs: useSpring for smooth progress, useTransform to map progress to clip-path coordinates, useMotionTemplate to compose values into a CSS polygon, and the animate function for the horizontal expansion.

Get started

The structure has a gallery behind two overlays - a black one and a pink one that will animate:

<template>
    <div class="container">
        <ul class="gallery-container">
            <!-- Gallery items -->
        </ul>
        <div class="black-overlay" />
        <div class="pink-overlay" />
    </div>
</template>

The pink overlay will have a clip-path that creates a vertical line revealing the content beneath.