Crème — Animated Typing Prompt Widget

Overview

Crème is a delightfully crafted, self-contained vanilla-JS typing-prompt widget wrapped in a warm crème and terracotta design theme. Drop it onto any page and instantly gain a polished, animated text-cycling component — ideal for hero headlines, onboarding banners, product taglines, or portfolio introductions. No framework, no build step, no dependencies beyond a single HTML file.

Unlike generic typewriter scripts, Crème ships with a fully themed demo page that shows the widget in real-world context: a soft editorial layout with thoughtful spacing, handcrafted CSS variables, and subtle motion that feels considered — not machine-made.

Who It's For

• Freelance developers who need a quick, beautiful animated-headline component to drop into client sites.
• Landing page builders who want a typewriter effect without pulling in a heavy library.
• Portfolio authors looking for a warm, editorial cycling headline for their personal site.
• TypeScript learners who want a clean, well-commented vanilla-JS reference component they can port or study.

Key Features in Depth

The core CremeTypist class accepts a target element, an array of phrases, and a small options object — making it genuinely reusable across projects. It handles type-forward, pause, backspace, and inter-phrase delay phases independently, so the rhythm feels human. A blinking cursor (CSS-only, zero JS overhead) sits beside the text and respects the prefers-reduced-motion media query, pausing all animation for accessibility.

The demo page wraps the widget in a warm crème (#FAF5EE) editorial layout with a terracotta accent (#C0614A), oat card backgrounds, and a restrained serif/sans pairing. Every spacing decision uses a 4-point base rhythm, and the layout is fully responsive from 320 px upward. Interactive controls — speed slider, phrase list editor, start/stop toggle — let buyers explore the widget live without touching the source.

What's Included

• index.html — fully self-contained demo page with embedded CSS, the widget class, and live controls
• README.md — integration guide, API reference, customisation steps

How to Customise / Get Started

1. Open index.html in any browser — no server needed.
2. Edit the phrases array near the top of the <script> block to swap in your own cycling text.
3. Adjust CSS custom properties (--creme-bg, --accent, --font-serif) to match your brand palette.
4. Copy the CremeTypist class into your own project and call new CremeTypist(el, phrases, options).