Chart update transition
Copy this prompt into Claude, Cursor or Lovable.
Build a single-file HTML chart update transition, 1280x720, very dark teal background #0b1a1a, chart panel #10282a, teal gradient bars (#2dd4bf to #0f766e), text #dffaf2, muted #7fb3a8. System fonts, no libraries.
Header: H1 "Revenue by month", muted subtitle, and on the right a segmented control with two options 2025 and 2026 and a teal sliding thumb behind the active option.
Chart panel (480px tall): four faint horizontal gridlines, eight vertical bars (Jan to Aug) with 10px rounded tops sitting on a baseline with month labels under them, and a big "Total" number at the top left that counts with a CSS @property integer animation.
Define each bar with two CSS variables for its 2025 and 2026 height (--a and --b) and animate height between them.
Motion (8 second loop): bars grow from 0 to their 2025 heights (staggered by .04s), hold, then the thumb slides to 2026 and every bar animates to its --b height while Total counts from 284 to 421 ($k); hold, then switch back to 2025 near the end for a seamless loop.
Respect prefers-reduced-motion. Return only the complete HTML.Source, 12 lines
# Chart update transition Copy this prompt into Claude, Cursor or Lovable. ```text Build a single-file HTML chart update transition, 1280x720, very dark teal background #0b1a1a, chart panel #10282a, teal gradient bars (#2dd4bf to #0f766e), text #dffaf2, muted #7fb3a8. System fonts, no libraries. Header: H1 "Revenue by month", muted subtitle, and on the right a segmented control with two options 2025 and 2026 and a teal sliding thumb behind the active option. Chart panel (480px tall): four faint horizontal gridlines, eight vertical bars (Jan to Aug) with 10px rounded tops sitting on a baseline with month labels under them, and a big "Total" number at the top left that counts with a CSS @property integer animation. Define each bar with two CSS variables for its 2025 and 2026 height (--a and --b) and animate height between them. Motion (8 second loop): bars grow from 0 to their 2025 heights (staggered by .04s), hold, then the thumb slides to 2026 and every bar animates to its --b height while Total counts from 284 to 421 ($k); hold, then switch back to 2025 near the end for a seamless loop. Respect prefers-reduced-motion. Return only the complete HTML. ```