Liquid / Wave Transition
A full page transition that begins as a small circle at the user's click coordinate, rapidly expanding outward like a liquid ripple to overtake the screen and reveal the new view.
Live Demo
Light View
Click anywhere to trigger the wave.
What It Is
A full page transition that begins as a small circle at the user's click coordinate, rapidly expanding outward like a liquid ripple to overtake the screen and reveal the new view.
✓When to Use
- Entering highly immersive states (e.g., full-screen image viewer, games)
- Navigating to an opposite-themed page (Light to Dark mode switch)
✕When NOT to Use
- Fast, utilitarian navigation (e.g., switching simple tabs)
Configuration Tips
- 01Animate a CSS clip-path: circle(0% at x y) expanding to circle(150% at x y) upon click.
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a full screen overlay transition using clip-path: circle() that animates from a pinpoint to covering the entire viewport dynamically.
Code Example (Tailwind CSS)
export function LiquidWaveTransitionDemo() {}Related Effects
Ripple Effect
A circular wave that expands from the point of contact when a user clicks or taps an element, providing immediate spatial feedback.
Shared Element Transition
An element (like an image or card) seamlessly animates from its position in a list view into its final position in a detail view, bridging the context between two states.