Crémeux — Warm Cream Toast Notification Widget

Overview

Crémeux is a delightful, zero-dependency vanilla-JS toast notification widget wrapped in a warm crème-and-caramel design language. Unlike the usual dark-slate or bright-blue toasts shipped with utility frameworks, Crémeux brings an unmistakably warm, editorial feel — soft parchment backgrounds, hand-crafted ink-stroke icons, caramel accent colours and buttery transitions that feel intentional rather than clinical.

Drop a single <script> tag into any HTML page and you have a fully-functional, accessible notification system in seconds. No npm, no Webpack, no framework dependency — just clean vanilla JS that works everywhere modern browsers run.

Who It's For

• Frontend developers who want a polished toast component without pulling in a massive UI library.
• Indie makers and solo founders building lightweight web apps, portfolios or static sites where design coherence matters.
• Designers who code — the warm crème palette fits beautifully alongside editorial, natural, boutique-commerce and Scandinavian design systems.
• TypeScript / vanilla-JS projects that need a drop-in widget without JSX or component frameworks.

Key Features In Depth

Crémeux ships four semantically distinct toast variants — success, error, warning and info — each with its own warm-tinted background swatch and hand-drawn-style SVG icon that fits the crème aesthetic. Toasts stack elegantly from the bottom-right (configurable to any corner via a single data attribute), auto-dismiss after a customisable duration, and expose a manual close button so users always stay in control.

A progress bar baked into each toast counts down the auto-dismiss timer visually — a subtle but professional touch absent from most free toast libraries. Toasts can carry a title + body line, or just a single message line. The stacking system caps visible toasts and gracefully queues overflow so your UI never gets buried.

The interactive demo page lets you fire every variant, toggle corners, adjust duration and preview an action-button toast — giving buyers a complete playground before they integrate.

What's Included

• index.html — self-contained demo page with inline widget CSS/JS and a full interactive control panel.
• cremeux-toast.js — standalone widget source file ready to copy into any project.
• README.md — integration guide, API reference and customisation tips.

How to Customise / Get Started

1. Copy cremeux-toast.js into your project and add a <script src="cremeux-toast.js"></script> tag.
2. Call CremToast.show({ type: 'success', title: 'Saved!', message: 'Your changes were saved.' }) from anywhere.
3. Override the CSS custom properties (e.g. --crm-accent, --crm-bg) to remap the palette to your own brand in seconds.
4. Pass options like position, duration and action per-call or set global defaults via CremToast.configure().