{
    "id": "bhaskar/neon-synthwave-grid-background",
    "kind": "plan",
    "title": "Neon synthwave grid background",
    "summary": "A retro synthwave scene: striped sun, mountain horizon, an endlessly scrolling perspective neon grid and a flickering neon title.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/neon-synthwave-grid-background/",
    "stack": [
        "Animation",
        "CSS",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "Retro-futurism in one CSS file. A striped sunset sun pulses over a mountain line while a perspective grid scrolls toward you forever. The title flickers like real neon and scanlines sit on top.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "Paste this prompt into your AI tool. It builds everything in one go, then the steps below show what to check.",
            "prompt": "Build a single HTML file with a synthwave scene filling the viewport. Page background: linear-gradient from #0a0020 through #2a0a4a to #ff3d81.\nElements, back to front:\n1. A circular sun (about 40vmin) with a yellow #ffe45e to pink #ff3d81 vertical gradient, strong pink glow, horizontal dark stripes that get thicker toward the bottom (use an ::after with a repeating-linear-gradient), and a slow 4s pulse scale.\n2. A dark mountain silhouette (inline SVG polygon, fill #14022b, pink 2px stroke) sitting on the horizon.\n3. A glowing pink horizon line at 50% height.\n4. A floor below the horizon with perspective: 360px, perspective-origin top, containing a tall element rotated rotateX(70deg) (origin top) with a cyan #00e5ff 2px grid (80px cells, drop-shadow glow). Animate background-position by 80px every 1.4s linear infinite so the grid rushes toward the viewer.\n5. Title block near the top: small cyan letter-spaced \"SYNTHWAVE // 1984\" and a huge italic monospace H1 \"NIGHT DRIVE\" with layered pink/purple text-shadow glow and an occasional neon flicker keyframe (opacity dips at 92-97%).\n6. A neon outlined cyan button \"▶ PRESS START\" at the bottom.\n7. A top overlay of faint CRT scanlines (repeating-linear-gradient).\nMonospace system font, no external files, reduced-motion safe. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Add horizon and mountains",
            "body": "Check: SVG ridge line and glowing horizon.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Build the perspective grid",
            "body": "Check: rotateX floor with scrolling cyan lines.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Add title, button and scanlines",
            "body": "Check: Flicker animation and CRT overlay.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/neon-synthwave-grid-background/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/neon-synthwave-grid-background/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}