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, useMotionValueEvent to detect completion, 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:

"use client"

import { useEffect, useState } from "react"

function LoadingLineReveal() {
    return (
        <div className="container">
            <Gallery />
            <div className="black-overlay" />
            <div className="pink-overlay" />
            <StyleSheet />
        </div>
    )
}

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