← Back to Gallery
Liquid Split-Screen Wavy Loader
Live Preview
A high-impact split-screen loading interface that combines sophisticated serif typography with a liquid motion SVG gooey effect. The design utilizes a high-contrast monochromatic background split, bridged by a vibrant, multi-colored wavy dot loader that appears to melt and merge as it oscillates. It is built entirely with CSS animations and SVG filters for maximum performance and compatibility without JavaScript.
Features
- SVG Gooey Filter for organic liquid motion
- CSS-only staggered wave animation
- Split-screen responsive layout with high contrast panels
- Massive 'Playfair Display' typography with custom kerning
- Zero-dependency, no-JavaScript implementation
- Fluid scaling using CSS clamp() for mobile-to-desktop transitions
Uses
- Creative agency landing page pre-loaders
- Portfolio entry transitions
- High-end fashion or lifestyle brand splash screens
- Experimental web application wait states
Benefits
- Ultra-smooth performance via GPU-accelerated transforms
- Immediate visual impact with bold typography
- Accessible and lightweight (no heavy JS libraries)
- Easily customizable color palette and filter intensity
Techniques Used
SVG feGaussianBlur and feColorMatrix for the gooey effect, CSS Flexbox for the split-screen layout, staggered animation-delay for wave generation, and clamp() for responsive typography.
Frequently Asked Questions
How is the liquid gooey effect achieved without JavaScript?
The effect is created using an SVG filter that combines feGaussianBlur to soften the edges of the elements and feColorMatrix to increase the contrast of the alpha channel. This causes overlapping blurred areas to appear as if they are melting together into a single liquid mass.
How is the wave motion of the loader dots synchronized?
The oscillation is powered by CSS @keyframes targeting the transform property. Each dot element is assigned a staggered animation-delay, which creates a sequential wave-like movement across the container without requiring complex calculations.
Is the split-screen layout responsive for mobile devices?
Yes, the interface uses CSS Flexbox or Grid with viewport-relative units (vh and vw). This ensures the monochromatic background split and the central loading element remain perfectly aligned and scaled across various screen sizes.
What impact do SVG filters have on rendering performance?
Because the filters are processed by the browser's hardware-accelerated rendering engine, they are significantly more efficient than Canvas or JavaScript-based liquid simulations. This ensures high-impact visuals while maintaining a low memory footprint.
How can the colors of the vibrant wavy dots be customized?
The dots are styled using CSS background-color properties or CSS variables. Since they are standard HTML or SVG elements, you can apply solid colors, linear gradients, or even CSS transitions to change their appearance dynamically.