Crème — Elegant Vanilla JS Toast & Notification Widget

Overview

Crème is a lightweight, zero-dependency vanilla JavaScript notification widget dressed in a warm, biscuit-and-cream colour palette. Forget the usual blue-shadow alert boxes — Crème delivers buttery smooth toast messages, inline banners and a compact notification drawer that feel genuinely handcrafted. Whether you need a quick success pop, a gentle warning ribbon or a persistent info drawer, Crème handles all four notification archetypes with a single, readable API call.

The widget ships as a self-contained crème.js + crème.css pair with a beautifully styled interactive demo page. Drop two files into any project, call one function, and get polished feedback UI in minutes — no npm, no bundler, no framework tax.

Who It's For

• Indie developers who want a finished notification system without a dependency chain.
• Frontend freelancers adding client-facing polish to CMS themes, landing pages or vanilla JS apps.
• Designers who prototype in browser and need real interaction feedback that looks good in screenshots.
• TypeScript / JS projects that load widgets via CDN or script tags — the API is clean enough to wrap with a TS type file in minutes.

Key Features in Depth

Four notification types — success, error, warning and info — each with a distinct warm icon glyph, border accent and background tint, all staying within the creme/walnut/terracotta palette so nothing clashes with your page.

Toast stack management keeps up to five toasts visible at once, auto-dismissing the oldest when the cap is reached. Toasts animate in from the top-right with a buttery cubic-bezier slide and fade out gracefully. Auto-dismiss timers are configurable per-call; pass duration: 0 for a persistent toast the user must manually close.

Inline banner mode lets you inject a full-width ribbon directly into a target container — useful for form-level feedback, page-level alerts or onboarding prompts. Banners support an optional action button with a custom label and callback.

Notification drawer collects all fired notifications into a slide-in side panel. A floating bell icon with an unread badge opens the drawer; clearing all items shows a polished empty state illustration made entirely in CSS.

Progress bar on each toast visually counts down the auto-dismiss timer, giving users a clear sense of time remaining. The bar is CSS-animated and pauses on hover.

What's Included

• index.html — fully interactive demo page with live controls for every notification type and mode.
• crème.js — the standalone widget script (~130 lines, fully commented).
• crème.css — widget stylesheet with CSS custom properties for easy theming (~120 lines).
• README.md — integration guide, API reference and customisation notes.

How to Get Started

1. Copy crème.js and crème.css into your project. 2. Add the two <link> and <script> tags to your HTML. 3. Call Creme.toast({ type: 'success', message: 'Saved!' }) from any script. That's it. Override the CSS custom properties in :root to swap palette, border-radius or font in under a minute. TypeScript users can paste the five-line type declaration from the README and enjoy full autocomplete.