{
    "id": "bhaskar/chart-update-transition",
    "kind": "plan",
    "title": "Chart update transition",
    "summary": "A dark teal bar chart that morphs between 2025 and 2026 when a segmented control switches, with the total counting to the new figure.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/chart-update-transition/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "Eight gradient bars grow in, then a sliding 2025/2026 switch moves across and every bar animates to its new height while the Total counts from $284k to $421k, then back. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "The AI builds the chart and the switch.",
            "prompt": "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.\nHeader: 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.\nChart 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.\nDefine each bar with two CSS variables for its 2025 and 2026 height (--a and --b) and animate height between them.\nMotion (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.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the morph",
            "body": "Bars should change height smoothly when the thumb slides.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the total",
            "body": "It should count 284 to 421 and back.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Drive the heights from your data when the range changes.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/chart-update-transition/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/chart-update-transition/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}