Créme — Warm Toast Notification Widget

Overview

Créme is a delightfully crafted, zero-dependency vanilla JavaScript toast notification widget dressed in a warm crème, biscuit and caramel colour palette. It solves the universal UX problem of communicating short-lived feedback messages — success confirmations, error alerts, informational hints and warnings — without reaching for a heavy UI library. Drop one script tag in your page, call Creme.show(), and beautiful notifications glide in from the corner of the screen in milliseconds.

Who It's For

Créme is ideal for indie hackers building small web apps, frontend developers who want a polished notification layer for a static site, TypeScript-adjacent projects that just need a typed-friendly plain-JS widget, and designers who are tired of the generic blue/grey toasts shipped by every major UI framework. If you value aesthetic consistency and warm, editorial-feeling UI, Créme is built for you.

Key Features in Depth

• Four semantic variants — success (sage green accent), error (dusty rose), warning (amber), and info (warm taupe) — each styled to harmonise with the crème base rather than clash with it.
• Configurable position — choose from top-right, top-left, bottom-right or bottom-left via a single config option; the stack direction reverses automatically.
• Smooth slide + fade animation — toasts slide in from the edge and fade out gracefully using CSS transitions with no GSAP or animation library required.
• Auto-dismiss with progress bar — an animated crème-tone progress ribbon counts down the display duration so users always know how long a message will linger.
• Manual dismiss button — every toast carries an × close button for immediate user control.
• Stacking queue — multiple toasts stack neatly, maintaining readable spacing and never overlapping content.
• Fully self-contained — the entire widget (styles + logic) lives in one JS file; the demo page shows every variant with live interactive controls.

What's Included

• index.html — interactive demo page with live trigger buttons, position switcher and duration slider, all styled in the crème design system.
• creme-toast.js — the standalone widget file you copy into any project (≈ 130 lines, zero dependencies).
• README.md — integration guide, API reference and customisation notes.

How to Customise / Get Started

1. Copy creme-toast.js into your project and add a single <script> tag. 2. Call Creme.show({ message: 'Saved!', type: 'success' }) anywhere in your JavaScript. 3. Override the six CSS custom properties (--cr-bg, --cr-radius, etc.) at the :root level to retheme in seconds. 4. Pass a position key in the config object to reposition the stack without touching CSS.