---
name: heart-reaction-grid
description: Generate an offline like-button feedback demo with four content-card contexts, reversible likes, synchronized counts, filters, and a separate particle-animation preview. Use for appreciation controls in articles, portfolios, product updates, or discussions.
---

# Like button feedback

Generate a single HTML file demonstrating complete like/unlike state transitions. Four sample cards each start at zero. A click adds one local like and fills the heart; a second click removes it. Card counts, the total, button state, filters, and feedback stay synchronized.

    python3 scripts/generate.py -o index.html
    python3 scripts/generate.py -o index.html --label STUDIO --title 'Make every click count.' --accent '#ff527b' --stagger 420

Python 3.10+ and a modern browser are sufficient. No dependencies, remote assets, fonts, storage services, or network requests are needed.

## Parameters and language

- --title: 1–100 characters.
- --subtitle: 1–300 characters.
- --label: 1–24 characters.
- --accent: six-digit hex color.
- --stagger: integer 150–2000 milliseconds, controlling delay between phases of the separate animation preview.

Explicit text parameters remain literal in both languages. Without overrides, the interface defaults to Chinese. Open index.html?lang=en for English or index.html?lang=zh for Chinese. Static HTML declares English; initialization sets the runtime language from the query parameter. Colors and timing are validated. Text is escaped in HTML and embedded configuration.

## Behavior contract

Never like cards automatically. The separate motion preview presses, fills, and animates only its own decorative heart; it cannot change user likes, counts, or filters. It runs once, can be stopped, and cancels when the page is hidden or reduced-motion settings change. Reset likes clears the four user states, restores the All filter, and announces the reset.

Each like button uses aria-pressed and an action label containing its card and current count. Native buttons support Enter and Space. When a focused card disappears from a filtered view, move focus to another visible card or the active filter.

Read [references/design.md](references/design.md) before modifying state or playback. Counts are demonstration state in memory, not multi-user counts. Refreshing resets them. There is no backend synchronization, authentication, or persistence.

## Verify

Start with four unselected cards and a zero total. Like and unlike a card; confirm its count and the total change by one. Test filters, empty states, keyboard focus after removing a filtered card, and reset feedback. Run and stop the independent preview while some cards are liked: their states must remain unchanged. Verify both languages, custom text, reduced motion, and narrow layouts.