Liquid Alerts merges two lab plugins: premium WOW Alerts (pure CSS) and Liquid Border (jQuery + SVG clip-path). You get rich backgrounds, hover shine, drifting glow — plus a living, organic edge that ripples like liquid.

This post covers where to download the pieces, how to wire them together, and how to tune the waves.

Live demo: https://pawelnosko.com/demos/liquid_alerts/

Watch the Liquid Alerts demo video

1. Where to get the components

Liquid Alerts does not replace the original plugins — it combines them. You need both packages. Grab them from the lab repos or, if you are reading this on my blog, from the links below.

WOW Alerts (CSS)

Success / error / warning / info / neutral banners, light and dark themes, enter animations, hover shine, dismiss button.

WOW Alerts — five variants, light and dark.

Files in the WOW Alerts package:

• css/wow-alerts.css — alert styles
• index.html — demo without Liquid Border (optional reference)

Liquid Border (jQuery)

Applies an animated SVG clip-path to a block or image. Waves can be organic (random height pulsing), and side edges can stay straight (horizontalOnly).

Liquid Border — wavy edge on blocks and images.

Files in the Liquid Border package:

• js/jquery.liquidBorder.js — plugin
• css/liquid-border.css — wrapper and SVG layers
• index.html — demo with sliders (optional)

Ready-made merge: Liquid Alerts

In the Liquid Alerts folder both kits are already merged. File layout:

liquid_alerts/
├── index.html
├── css/
│   ├── wow-alerts.css
│   ├── liquid-border.css
│   └── liquid-alerts-integration.css
└── js/
    └── jquery.liquidBorder.js

2. Requirements

• jQuery 3.x (CDN is fine)
• A browser with clip-path and ResizeObserver
• Modern CSS (color-mix() in WOW Alerts)

3. Include the assets

<link rel="stylesheet" href="css/wow-alerts.css">
<link rel="stylesheet" href="css/liquid-border.css">
<link rel="stylesheet" href="css/liquid-alerts-integration.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/jquery.liquidBorder.js"></script>

4. HTML markup

Structure comes straight from WOW Alerts. A theme wrapper holds the stack; each alert is icon + body + optional close.

<div class="wow-alerts wow-theme-dark">
  <div class="wow-alert wow-alert--success" role="alert">
    <div class="wow-alert__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
    </div>
    <div class="wow-alert__body">
      <span class="wow-alert__title">Success</span>
      <p class="wow-alert__message">Payment received.</p>
    </div>
    <button type="button" class="wow-alert__close" aria-label="Dismiss alert">×</button>
  </div>
</div>

Classes worth knowing:

• wow-theme-light / wow-theme-dark — theme on the container
• wow-alert--success, --error, --warning, --info, --neutral
• wow-alert--compact — smaller variant

5. Initialize Liquid Border on alerts

Call .liquidBorder() on each .wow-alert after the markup is in the DOM (e.g. after cloning from <template>).

$('.wow-alert').liquidBorder({
  amplitude: 6,
  frequency: 4,
  speed: 0.45,
  organic: true,
  organicIntensity: 0.85,
  organicSpeed: 2.2,
  contentPadding: 10,
  horizontalOnly: true,
  borderWidth: 0
});

Why these values?

• amplitude: 6 — alerts are horizontal; a smaller amplitude looks clean, not like a floating blob.
• horizontalOnly: true — waves on top and bottom only; straight sides fit banner layout.
• contentPadding: 10 — extra inner space beyond wave clearance (2× amplitude + padding).
• borderWidth: 0 — clip only; the CSS alert border still shows inside the clip.

6. CSS integration (liquid-alerts-integration.css)

Do not edit wow-alerts.css, liquid-border.css, or jquery.liquidBorder.js. Put layout fixes in css/liquid-alerts-integration.css, loaded after the libraries.

Liquid Border wraps each alert in .liquid-border-wrapper and applies negative margins on .wow-alert (wave padding compensation). The default WOW Alerts gap is not enough — alerts overlap visually. The bridge file clears stack gap and adds margin-bottom on wrappers via --la-stack-gap.

It also restores display: grid on .liquid-border-target (Liquid Border sets display: block, which breaks the icon | message | close row).

function stackGapPx(settings) {
  const maxAmp = settings.amplitude * (1 + settings.organicIntensity);
  const totalPad = maxAmp * 2 + (settings.contentPadding || 0);
  return Math.ceil(totalPad + 20);
}

document.querySelectorAll('.wow-alerts').forEach((stack) => {
  stack.style.setProperty('--la-stack-gap', stackGapPx(settings) + 'px');
});

Recompute this when amplitude or contentPadding changes, together with liquidBorder('update').

7. Dismissing an alert

Pause the wave animation, run the CSS dismiss animation, then destroy the plugin instance:

document.querySelectorAll('.wow-alert__close').forEach((btn) => {
  btn.addEventListener('click', () => {
    const alert = btn.closest('.wow-alert');
    const $alert = $(alert);
    $alert.liquidBorder('pause');
    alert.classList.add('is-dismissing');
    alert.addEventListener('animationend', () => {
      $alert.liquidBorder('destroy');
      alert.remove();
    }, { once: true });
  });
});

8. Liquid Border API (quick reference)

$('.wow-alert').liquidBorder('update', { amplitude: 8 });
$('.wow-alert').liquidBorder('pause');
$('.wow-alert').liquidBorder('play');
$('.wow-alert').liquidBorder('destroy');

On the live demo, sliders call update on all alerts at once — handy for finding settings you like.

9. Tuning and common issues

10. Summary

1. Download WOW Alerts and Liquid Border (links in section 1).
2. Link both stylesheets, liquid-alerts-integration.css, jQuery, and jquery.liquidBorder.js.
3. Paste WOW Alerts markup with the right theme and variant.
4. Run .liquidBorder() on each .wow-alert with horizontalOnly and contentPadding.
5. Set --la-stack-gap after init (integration CSS + JS).

Liquid edge plus WOW interior (gradient fill, shine, drifting orb) feels more kinetic than CSS alone — without giving up simple markup and accessibility (role="alert", button labels).

Try it: Liquid Alerts demo