{
    "id": "bhaskar/halftone-pop-background",
    "kind": "component",
    "title": "Halftone Pop Background",
    "summary": "A cream backdrop with peach halftone dot patches in staggered rectangles.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/halftone-pop-background/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "Radial-gradient dot grids masked into offset rectangles over a warm cream base, giving a printed halftone feel.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Backgrounds",
        "html": "<div class='bg'><b class='a'></b><b class='b'></b><b class='c'></b><span>Your content</span></div>",
        "css": ".bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#1c1c1c;background:#fff3ea}.bg b{position:absolute;background-image:radial-gradient(#f3a98a 1.2px,transparent 1.6px);background-size:6px 6px;opacity:.65}.bg .a{left:42%;top:0;right:0;height:55%}.bg .b{left:0;top:55%;width:55%;bottom:0;background-image:radial-gradient(#a9d7b5 1.2px,transparent 1.6px)}.bg .c{left:48%;top:55%;right:12%;bottom:12%;background-image:radial-gradient(#f7c88a 1.2px,transparent 1.6px)}.bg span{position:relative}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}