DEV Community

Paweł Nosko
Paweł Nosko

Posted on

Liquid Alerts: WOW Alerts Meet Liquid Border

#javascript #css #design #ux

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.

Download WOW Alerts package:

https://pawelnosko.com/js-frontend-tools/wow-alerts-modern-css-alerts-that-actually-grab-attention

WOW Alerts preview — five variants in light and dark themes
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).

Download Liquid Border package:

https://pawelnosko.com/js-frontend-tools/liquid-border-revolutionary-jquery-plugin-with-organic-wavy-edges

Liquid Border preview — wavy edge on blocks and images
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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

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 });
  });
});
Enter fullscreen mode Exit fullscreen mode

8. Liquid Border API (quick reference) 

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

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

9. Tuning and common issues

Problem Fix
Alerts overlap Add liquid-alerts-integration.css and set --la-stack-gap (section 6).
Alert too narrow In integration CSS: .liquid-border-wrapper { width: 100% }.
Content hugs the waves Increase contentPadding (e.g. 12–16).
Waves overpower content Lower amplitude or organicIntensity.
Too much motion on mobile horizontalOnly: true, lower speed, or pause when prefers-reduced-motion.
Empty wrapper after close Call destroy before remove (section 7).
Layout stacks vertically (icon / text / close) display: grid on .liquid-border-target in integration CSS.
Close button flush to the right edge Small margin-right on .wow-alert__close in integration CSS.

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

Top comments (0)