Crème — Warm Cream Countdown & Event Timer Widget

Overview

Crème is a delightfully warm, cream-toned countdown timer widget built entirely in vanilla JavaScript with zero dependencies. It solves a common problem for web creators who want a visually sophisticated, easy-to-embed countdown component — without wrestling with heavy libraries or clashing blue-gradient defaults that look out of place on editorial, bakery, portfolio, wedding, or lifestyle sites.

Drop in one self-contained HTML file, set your target date, and get a polished, pixel-perfect timer that feels hand-crafted rather than generated.

Who It's For

• Freelancers building bespoke sites for boutique brands, wedding planners, or food businesses who need a refined countdown component.
• Front-end developers looking for a lightweight timer they can drop into any project in minutes.
• Designers who care about warm, editorial aesthetics and don't want a neon-blue plugin ruining their colour story.
• Small business owners running a product launch, pop-up shop, or seasonal event page.

Key Features in Depth

Crème uses a warm parchment palette (#FAF6EF base, #C9A97A gold accents) paired with Playfair Display headings and DM Sans body text. The four digit-blocks (Days, Hours, Minutes, Seconds) use a flip-card animation that smoothly rotates each card on change — giving a mechanical clock feel without any CSS framework overhead.

A live configuration panel on the demo page lets you change the event title and target date in real time, re-rendering the widget instantly so you can preview customisations before touching a line of code. The widget also handles the expired state gracefully — showing a warm "The moment has arrived ✦" message instead of negative numbers.

Responsive by design: at mobile widths the four blocks stack into a 2×2 grid, maintaining legibility and proportions without a media-query nightmare.

What's Included

• index.html — fully self-contained demo page with the widget and live config panel
• widget.js — standalone widget class you can import into any project
• README.md — setup, customisation guide and file list

How to Customise / Get Started

1. Open index.html in any browser — no build step, no npm install.
2. Edit the data-target attribute on <div id="creme-widget"> to your event date (ISO 8601).
3. Change the --creme-accent CSS variable at the top of the <style> block to match your brand colour.
4. Swap the Google Fonts import for any serif/sans pairing you prefer.
5. To embed in an existing site, copy widget.js and the small CSS block — then call new CremeTimer('#my-element', { target: '2026-01-01' }).