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.
