Bisque — Crème Typewriter Counter Widget

Overview

Bisque is a compact, self-contained vanilla-JavaScript reading-metrics widget built with a warm crème design palette. Drop it onto any HTML page and instantly give your users a live word count, character count, reading-time estimator, and sentence counter — all in a single elegant card that feels hand-crafted rather than machine-generated. Whether you're building a writing tool, a blogging UI, a notes app, or simply want to showcase smart frontend engineering, Bisque delivers real functional value without a single npm install.

Who It's For

• Frontend developers who need a polished, drop-in text-metrics component for a writing or note-taking app
• Template authors who want a distinctive, styled widget to showcase in a demo
• Bloggers and indie makers building custom CMSs or lightweight editors who want live word-count feedback
• Students and TypeScript/JavaScript learners studying clean component architecture in vanilla JS

Key Features in Depth

Bisque is architected as a TypeScript-style class written in plain ES6+ JavaScript — fully typed with JSDoc annotations so it integrates cleanly into TypeScript projects with zero configuration. The widget mounts onto any <textarea> or plain contenteditable element via a one-line constructor call. It computes metrics reactively on every keystroke using a debounced listener so it never blocks the UI thread. A subtle typewriter cursor animation in the header, hand-tuned crème/amber color tokens, and featherweight CSS custom properties make it trivially easy to re-skin. The demo page ships with a full faux-prose passage pre-loaded so buyers see the widget in action the moment they open the file.

Metric cards animate their numbers with a smooth count-up tween on every update. A readability grade indicator (Flesch-Kincaid approximation) lights up in warm amber when the text is complex and in sage green when it reads easily. An inline copy-stats button lets users grab a formatted summary to their clipboard in one click.

What's Included

• index.html — fully self-contained demo page with embedded widget CSS and JS
• bisque-widget.js — standalone widget class, ready to import into any project
• README.md — installation guide, API reference, customisation tokens, and changelog

How to Customise / Get Started

1. Open index.html in any modern browser — no build step, no server needed.
2. To embed in your own project, copy bisque-widget.js and call new BisqueCounter('#my-textarea').
3. Override the six CSS custom properties (--bq-bg, --bq-ink, --bq-accent, etc.) to match your brand palette in seconds.
4. Pass an options object to the constructor to toggle individual metrics on or off, or set a custom words-per-minute reading speed.