We needed something alive, organic, and hypnotic — something that would feel like it moves with a will of its own.
This is how Liquid Border was born — a jQuery plugin that adds fluid, wavy, almost living edges to any HTML elements: blocks, information cards, images, and sections.
See video:
Why Did I Create Liquid Border?
For many years, while building websites and expert content, I repeatedly faced the same problem. I wanted to highlight key information — the most important takeaways, quotes, warnings, or “must-read” sections — in a way that not only catches the eye but also keeps the user engaged longer.
Classic solutions (Bootstrap alerts, box-shadow, border-radius, gradient borders) were predictable and quickly became invisible to eyes accustomed to constant scrolling. I was looking for an effect that would be both subtle and magnetic. Something reminiscent of liquid, jelly, or water surface — a natural, organic movement that the human brain instinctively notices.
After many experiments with CSS animations, Canvas, and SVG, I decided to create a dedicated solution. Liquid Border is not just another “cool effect.” It is a tool designed with real user engagement in mind (time on page, scroll depth, conversion).
What Makes Liquid Border Different?
Most available border animation solutions rely on simple sine waves or repetitive patterns. Liquid Border goes one step further thanks to several key innovations:
- Organic “ripples” system — each wave has its own individually, randomly changing amplitude. This makes the effect never look artificial — the waves pulse, grow, and shrink in a way that resembles real liquid.
- Dual Sine Wave — instead of a single sine wave, I use a combination of two waves (65% + 35%) with different frequencies and phases. The result is much richer, more natural undulation.
- Intelligent edge scaling — the plugin automatically adjusts the number of waves to the length of each edge, maintaining visual consistency regardless of the element’s proportions.
- Two animation modes — full animation of all edges or horizontalOnly mode, where only the top and bottom wave while the sides remain straight (perfect for text cards).
- Advanced layout management — especially important for images and content blocks. The plugin automatically enlarges the element and adds negative margin so the waves have space, while protecting the original content.
Technical Challenges and Solutions
Creating smooth SVG clip-path animation while maintaining high performance was not easy. Key technical decisions:
- Using <clipPath> in SVG instead of CSS clip-path for greater control and better performance with complex paths.
- requestAnimationFrame with precise phase management.
- ResizeObserver for automatic response to element size changes.
- Separate SVGs for clip-path and optional visible stroke (borderWidth).
- Optimized sampling — resolution: 64 provides excellent smoothness while maintaining 60 fps performance.
The entire plugin is very lightweight: the JavaScript file weighs 18.5 kB, and the CSS file only 456 bytes.
Practical Applications
Liquid Border works excellently in many scenarios:
- Articles and expert content — highlighting important quotes, “Key Takeaways” blocks, and summaries.
- Landing pages — hero sections, benefits sections, CTA boxes.
- Portfolios and personal websites — highlighting projects or “About Me” sections.
- Dashboards and web applications — statistic cards, alerts, important notifications.
- E-commerce — highlighting promotions, bestsellers, and limited offers.
- Educational blogs — frames with definitions, code examples, and warnings.
The effect is subtle enough not to tire the eyes, yet distinct enough that users practically cannot ignore it.
Installation
The plugin consists of three files:
- liquid-border.css (456 bytes) – wrapper and positioning styles
- jquery.liquidBorder.js (18.5 kB) – main plugin code
- Demo file (index.html)
Basic installation:
HTML
<link rel="stylesheet" href="/liquid-border.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="/jquery.liquidBorder.js"></script>Basic Usage
JavaScript
// Simplest call
$('.important-section').liquidBorder();
// With configuration
$('.card').liquidBorder({
amplitude: 9,
frequency: 4,
speed: 0.35,
organicIntensity: 0.9,
contentPadding: 18
});
Full List of Configuration Options
| Option | Default | Range | Description |
|---|---|---|---|
| amplitude | 8 | 2–20 | Wave height in pixels |
| frequency | 3 | 2–6 | Number of waves on the longest edge |
| speed | 0.4 | 0.1–4 | Wave movement speed |
| organic | true | boolean | Enables organic pulsing |
| organicIntensity | 1 | 0–1 | Strength of random amplitude changes |
| organicSpeed | 2.2 | 0.2–3 | Speed of organic changes |
| contentPadding | 0 | 0+ | Additional padding for text blocks |
| horizontalOnly | false | boolean | Waves only on top and bottom |
| borderWidth | 0 | 0+ | Visible border thickness |
| borderColor | null | color | Border color (defaults to CSS) |
Advanced API
The plugin offers full control methods:
JavaScript
// Update parameters on the fly
$('.element').liquidBorder('update', {
amplitude: 12,
speed: 0.8
});
// Animation control
$('.element').liquidBorder('pause');
$('.element').liquidBorder('play');
// Complete effect removal
$('.element').liquidBorder('destroy');You can also initialize the plugin on multiple elements at once — jQuery collections are fully supported.
Performance and Compatibility
I tested the plugin on many devices and browsers. It runs smoothly even with dozens of elements simultaneously. On lower-end phones, I recommend reducing internal resolution or disabling organic on very large elements.
The plugin does not destructively interfere with the original layout thanks to clever use of negative margins and box-sizing.
Comparison with Other Solutions
Unlike:
- CSS-only wave generators (hard to maintain, poor performance),
- Canvas-based libraries (heavy),
- Ready-made CodePen animations (lack of control and repeatability),
Liquid Border offers production quality, easy integration, and deep configurability.
My Conclusions After Months of Use
Since implementing Liquid Border on my websites, I have noticed a visible increase in the time users spend on key sections. People simply look longer at content surrounded by this effect. It is not a 3-second “wow” effect — it is a subtle but highly effective attention magnet.
The effect works particularly well with educational and sales content, where building trust and emphasizing the most important messages matters.
Summary
Liquid Border is one of those projects that are born out of a real need. I don’t create effects “just because I can,” but tools that genuinely help content creators and designers in the battle for user attention.
If you create websites where it is important for the user to read specific fragments, notice a product, or offer — I highly recommend trying Liquid Border.
The effect is unique, the code is clean and well-documented, and the configuration options provide enormous creative freedom.
Want to see it in action? Check out the demo available with the plugin files.
The plugin is ready for use in commercial projects. You can modify, develop, and adapt it to your own needs.