Falert is a Funky Alert for web apps. It adds playfulness to the concept of alerts and toasts. It uses CSS transforms and drop-shadows to give the illusion that it’s floating above the page. It can be used to provide user feedback in web apps that don’t take things too seriously.

Features include:

see it in action

How to use it

If you’re using a bundler, first you’ll want to install from npm:

npm install @code_monk/falert

Then use it like so:

import {Falert} from "@code_monk/falert";

new Falert("Cool!", "You just launched a Falert", "notice");

Or, to install directly from CDN:

import {Falert} from "https://unpkg.com/@code_monk/falert@latest/dist/es2022/falert.js";

new Falert("WOA!", "This is rad", "warning");

Don’t forget to include the styles:

<link rel="stylesheet" href="https://unpkg.com/@code_monk/falert@latest/dist/assets/css/falert.css" />

How does it work?

Falert injects a DOM fragement that looks like this:

<div class="falert container flyin">
	<div class="falert body breathing">
		<h2>{{heading}}</h2>
		<p>{{message}}</p>
	</div>
</div>

which is styled to appear in the top-right hand corner of the page:

.falert.container {
	position: fixed;
	top: 35px;
	right: 55px;
	width: 450px;
	height: 100px;
	z-index: 9;
	background-color: transparent;
}

The element div.falert.container initially has a class flyin which causes the element to “fly in”. When that animation ends, the flyin class is dropped and the swaying class added, which subtly moves and rotates the div using css transforms:

.swaying {
	animation-name: swaying;
	animation-duration: 17s;
	animation-delay: 5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;	
}
@keyframes swaying {
	0%, 100% {
		transform: translate(0);
	}
	33% {
		transform: translate(-17px) rotate3d(0,0,1,-2deg);
	}
	66% {
		transform: translate(2px, 10px);
	}
}

In addition, a breathing class applies similar subtle animations to the child container div.falert.body. The two effects play at a different rates, so that the combined effect is that of a subtle and unpredictable bobbing and weaving:

speed animations up to illuminate combined effect

Options

You can pass any text into the heading parameter, any HTML into the message argument, and into type one of notice, fatal, or warning. Warning is the default.

Use the form to play with parameters.

Hacking

There are many ways Falert could be improved or tweaked. To get the development environment set up, do this:

git clone https://github.com/sean9999/falert.js
npm install # install dependencies
npm start # start dev server on localhost:1313

Your entrypoint is ./src/ts/falert.ts

To build for all targets:

npm run build:all

build artefacts end up in ./dist/<target>/falert.js for javascript and ./dist/assets/** for static files.

The dev server automatically rebuilds and reloads, thanks to the magick of Parcel.

If you think your tweak should be merged, send me a pull request!

Happy hacking.

_s.