Crèmerie — Warm Cream Vanilla-JS Toast & Notification Widget

Overview

Crèmerie is a delightfully warm, cream-toned toast and notification widget for modern web projects. Forget the cold blue or harsh red system alerts — Crèmerie wraps every message in a luscious palette of warm whites, soft honeys, and gentle terracotta accents that feel welcoming without sacrificing clarity. The single-file drop-in (no build step, no dependencies) slots into any plain HTML, TypeScript-built, or framework-agnostic front-end in under a minute.

The problem it solves is immediate: most open-source toast libraries are either visually generic, opinionated about your CSS framework, or require npm. Crèmerie is none of those — it is one self-contained creamerie.js script with an embedded stylesheet, plus a polished demo page that shows every state right out of the box.

Who It's For

• Indie hackers and solo developers who want beautiful, plug-and-play notifications
• TypeScript/vanilla-JS projects looking for a lightweight (~5 KB) notification solution
• Designers prototyping warm or earthy-toned UI systems
• Agency developers who need a client-safe, dependency-free component they can brand quickly
• Anyone tired of the generic grey/blue toast libraries that clash with bespoke designs

Key Features in Depth

Four semantic flavours — success (warm sage), info (honey amber), warning (soft peach), and error (dusty rose) — each carefully colour-matched to the cream base so nothing looks jarring. Every toast carries a distinctive left-accent border and a subtle cream-tinted icon drawn in pure CSS, keeping the package asset-free.

Configurable position: toasts can stack at any of the four corners of the viewport. A smooth slide-up + fade entrance and a matching fade-out exit run on CSS transitions so animation stays GPU-accelerated. Auto-dismiss timing is controllable per-call (default 4 s, 0 = persistent). A manual close button sits unobtrusively in the upper-right corner of each card.

Progress bar: a thin cream-tinted progress line drains across the bottom of each toast during its lifetime, giving users a satisfying visual cue about when the message will disappear — a small touch that makes the widget feel premium.

Pause-on-hover: the timer and progress bar freeze whenever the user's cursor enters a toast, ensuring no important message disappears before it is read.

What's Included

• index.html — full interactive demo with a warm cream UI, live trigger buttons for every type and position, and configuration controls
• creamerie.js — the self-contained widget (inlined CSS + vanilla JS, ES2017, no dependencies)
• README.md — concise usage guide, API reference, and customisation tips

How to Customise / Get Started

1. Copy creamerie.js into your project and add a single <script> tag — that is the entire installation. 2. Call Creamerie.show({ type, title, message, duration, position }) anywhere in your JS. 3. Override the handful of CSS custom properties (--cr-bg, --cr-accent, etc.) documented in the README to match your brand palette in seconds. The demo page doubles as a live sandbox to test changes before committing them.