{
  "name": "Make Sprite With Claude",
  "url": "https://makespritewithclaude.pages.dev",
  "language": "id",
  "categories": {
    "rendering": {
      "title": "Teknik Rendering",
      "desc": "Dari render halus ke grid piksel, palet, dithering, texturing (termasuk air), buffer, sprite sheet, komposit sprite, parallax."
    },
    "efek": {
      "title": "Efek (VFX)",
      "desc": "Resep VFX, tracer, ledakan, lubang, api, hujan, fluida, gelembung, bola neutron, pulsar & black hole — semua prosedural."
    },
    "karakter": {
      "title": "Karakter Prosedural",
      "desc": "Menggambar karakter dari persamaan, bukan dari piksel manual."
    },
    "ai": {
      "title": "Panduan untuk AI",
      "desc": "Template prompt, aturan ketat, dan checklist agar hasil AI konsisten."
    }
  },
  "articles": [
    {
      "slug": "ai-prompt-playbook",
      "title": "Panduan prompt untuk AI — sprite pixel yang benar sejak percobaan pertama",
      "category": "ai",
      "summary": "Template spesifikasi, aturan ketat, urutan kerja, dan checklist verifikasi agar Claude atau AI lain menghasilkan sprite pixel prosedural yang tajam dan konsisten.",
      "html": "https://makespritewithclaude.pages.dev/articles/ai-prompt-playbook.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/ai-prompt-playbook.md",
      "code": []
    },
    {
      "slug": "hires-to-pixel",
      "title": "Render halus lalu turunkan ke grid piksel",
      "category": "rendering",
      "summary": "Teknik inti — gambar karakter sebagai vektor halus beresolusi tinggi, lalu ubah per sel menjadi piksel ber-shading dan ber-outline.",
      "html": "https://makespritewithclaude.pages.dev/articles/hires-to-pixel.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/hires-to-pixel.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/20-pixelize.js",
        "https://makespritewithclaude.pages.dev/src/code/21-stickman.js",
        "https://makespritewithclaude.pages.dev/src/code/30-demo-hires.js"
      ]
    },
    {
      "slug": "dither-palette",
      "title": "Palet terbatas dan ordered dithering",
      "category": "rendering",
      "summary": "Shading bola/benda dengan 5–6 warna dan matriks Bayer 4×4 sebagai ganti gradient, supaya tetap terlihat pixel art.",
      "html": "https://makespritewithclaude.pages.dev/articles/dither-palette.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/dither-palette.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/32-demo-dither.js",
        "https://makespritewithclaude.pages.dev/src/code/00-core.js"
      ]
    },
    {
      "slug": "pixel-buffer",
      "title": "Buffer piksel Uint32 dan aturan integer",
      "category": "rendering",
      "summary": "Cara menggambar ribuan piksel efek per frame dengan cepat dan tanpa blur, memakai buffer Uint32 dan satu putImageData.",
      "html": "https://makespritewithclaude.pages.dev/articles/pixel-buffer.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/pixel-buffer.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/10-buf.js"
      ]
    },
    {
      "slug": "sprite-sheet",
      "title": "Sprite sheet — grid, pivot, texturing, ekspor anti-halo",
      "category": "rendering",
      "summary": "Skema koordinat atlas, pivot bottom-center, kode canvas dan CSS, palet terbatas, kompresi PNG, image-rendering, dan cara menghindari halo putih.",
      "html": "https://makespritewithclaude.pages.dev/articles/sprite-sheet.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/sprite-sheet.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/31-demo-sheet.js"
      ]
    },
    {
      "slug": "sprite-composite",
      "title": "Komposit sprite bertahap — outline, bayangan jatuh, flash, tint sisi jauh",
      "category": "rendering",
      "summary": "Satu sprite berindeks diolah dari mask dalam urutan tetap — bayangan, outline, badan — lalu flash putih saat kena hit dan tint untuk bagian sisi jauh, semuanya di grid integer.",
      "html": "https://makespritewithclaude.pages.dev/articles/sprite-composite.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/sprite-composite.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/13-composite.js"
      ]
    },
    {
      "slug": "pixel-texturing",
      "title": "Texturing pixel art prosedural — ramp, klaster, tile, dan bake efisien",
      "category": "rendering",
      "summary": "Cara membuat tekstur (batu, rumput, kayu, bata, lava) yang tetap terasa piksel — ramp bergeser hue, noise yang bisa di-tile, dither hanya di batas klaster, lighting dari height-map — lalu di-bake sekali ke indeks palet agar murah.",
      "html": "https://makespritewithclaude.pages.dev/articles/pixel-texturing.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/pixel-texturing.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/15-texture.js",
        "https://makespritewithclaude.pages.dev/src/code/49-demo-texture.js"
      ]
    },
    {
      "slug": "water-texturing",
      "title": "Texturing air piksel — tint kedalaman, permukaan, caustic, dan tile top-down",
      "category": "rendering",
      "summary": "Air terdiri dari beberapa lapis sederhana yang ditumpuk — tint 4 tingkat, garis permukaan, anyaman caustic dari sinus, serpihan mengambang, dan tile top-down 2 lapis yang di-scroll — semuanya di grid integer dengan ramp biru dan dither Bayer.",
      "html": "https://makespritewithclaude.pages.dev/articles/water-texturing.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/water-texturing.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/16-water.js",
        "https://makespritewithclaude.pages.dev/src/code/51-demo-water.js"
      ]
    },
    {
      "slug": "parallax",
      "title": "Parallax berlapis — kedalaman dari faktor kecepatan",
      "category": "rendering",
      "summary": "Latar 3–5 lapisan siluet yang di-tile mulus, digeser dengan faktor kecepatan berbeda, di-snap ke piksel integer, dengan kabut yang dibakar ke palet lapisan, bukan alpha per frame.",
      "html": "https://makespritewithclaude.pages.dev/articles/parallax.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/parallax.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/14-parallax.js"
      ]
    },
    {
      "slug": "vfx-recipe",
      "title": "Resep VFX prosedural — dari ide ke efek piksel (pulsar, black hole, ledakan)",
      "category": "efek",
      "summary": "Kerangka satu pola untuk membuat efek apa pun — fase waktu, bentuk dari persamaan per piksel, intensitas → ramp + Bayer, partikel berekor, glow additive, layer belakang/depan, game feel — beserta peta efek ke artikel contoh.",
      "html": "https://makespritewithclaude.pages.dev/articles/vfx-recipe.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/vfx-recipe.md",
      "code": []
    },
    {
      "slug": "tracer-muzzle",
      "title": "Tracer peluru, muzzle flash, dan percikan tumbukan",
      "category": "efek",
      "summary": "Jejak peluru 3 tingkat (inti 1px, pasangan piksel, ekor gelap), kilatan moncong dari sinar acak, dan percikan berpantul.",
      "html": "https://makespritewithclaude.pages.dev/articles/tracer-muzzle.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/tracer-muzzle.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/40-demo-tracer.js"
      ]
    },
    {
      "slug": "glow",
      "title": "Glow — cahaya additive di buffer terpisah",
      "category": "efek",
      "summary": "Cara membuat cahaya (glow) pixel art yang halus tapi tetap tajam — buffer cahaya sendiri, profil (1−d)², pencampuran additive, dan kapan memakai dither sebagai gantinya.",
      "html": "https://makespritewithclaude.pages.dev/articles/glow.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/glow.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/12-light.js"
      ]
    },
    {
      "slug": "fluid-system",
      "title": "Sistem fluida piksel — permukaan berpegas, gelembung, air sel, benda apung",
      "category": "efek",
      "summary": "Tiga model fluida murah untuk piksel — permukaan 1D berpegas (kolam, percikan), gelembung dari ventilasi (naik, goyang, menyatu, pecah), dan air sel 2D (automata) — plus benda apung/tenggelam dan cara menggabungkannya dengan texturing air.",
      "html": "https://makespritewithclaude.pages.dev/articles/fluid-system.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/fluid-system.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/17-fluid.js",
        "https://makespritewithclaude.pages.dev/src/code/52-demo-fluid.js",
        "https://makespritewithclaude.pages.dev/src/code/53-demo-waterca.js"
      ]
    },
    {
      "slug": "explosion",
      "title": "Ledakan prosedural — roket dan neutron",
      "category": "efek",
      "summary": "Dua jenis ledakan berbeda — roket/launcher (kilat, cincin, puff bola api, asap besar, percikan) dan neutron (Cherenkov: gumpalan 5 disc, sinar, gelombang kejut) — plus cahaya glow dan getaran layar.",
      "html": "https://makespritewithclaude.pages.dev/articles/explosion.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/explosion.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/41-demo-blast.js"
      ]
    },
    {
      "slug": "crater-hole",
      "title": "Lubang, kawah, dan kerusakan per elemen",
      "category": "efek",
      "summary": "Sistem Sprite Fusion — halaman = grid sel milik elemen; tiap elemen punya kekerasan (hp) berbeda, retak bertahap, dan bisa copot; lubang bertepi tak beraturan dengan gosong, bayangan kedalaman, dan serpihan berwarna asli.",
      "html": "https://makespritewithclaude.pages.dev/articles/crater-hole.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/crater-hole.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/42-demo-crater.js"
      ]
    },
    {
      "slug": "fire",
      "title": "Api dan asap dari partikel disc berlapis",
      "category": "efek",
      "summary": "Ramp 9 warna, partikel membesar saat menua, inti bergeser ke atas, highlight kecil, glow additive, dan asap.",
      "html": "https://makespritewithclaude.pages.dev/articles/fire.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/fire.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/43-demo-fire.js"
      ]
    },
    {
      "slug": "rain",
      "title": "Hujan prosedural 3 lapis kedalaman",
      "category": "efek",
      "summary": "Tetes dua warna, tiga lapis kecepatan, kabut tanah ber-noise, percikan setengah elips, dan lapis depan yang menutupi karakter.",
      "html": "https://makespritewithclaude.pages.dev/articles/rain.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/rain.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/47-demo-rain.js"
      ]
    },
    {
      "slug": "neutron-psr",
      "title": "Bola neutron dan pulsar (PSR)",
      "category": "efek",
      "summary": "Proyektil bola neutron biru dengan jejak, ledakan Cherenkov, dan pulsar ber-sinar menyapu dengan garis medan dipol.",
      "html": "https://makespritewithclaude.pages.dev/articles/neutron-psr.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/neutron-psr.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/44-demo-neutron.js",
        "https://makespritewithclaude.pages.dev/src/code/45-demo-pulsar.js"
      ]
    },
    {
      "slug": "black-hole",
      "title": "Black hole prosedural — lensa gravitasi, cakram akresi, dan serpihan jatuh",
      "category": "efek",
      "summary": "Cara menggambar black hole piksel — lensa per piksel yang membelokkan latar, cakram elips berdoppler, halo di atas bayangan, tekstur spiral Kepler, partikel tersedot berputar, serta timeline lahir–hidup–runtuh.",
      "html": "https://makespritewithclaude.pages.dev/articles/black-hole.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/black-hole.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/50-demo-blackhole.js"
      ]
    },
    {
      "slug": "procedural-character",
      "title": "Karakter prosedural dari persamaan",
      "category": "karakter",
      "summary": "Setiap piksel menanyakan koordinat lokal badan; bentuk berasal dari persamaan elips/kapsul, wajah dari bitmap string, outline dari siluet.",
      "html": "https://makespritewithclaude.pages.dev/articles/procedural-character.html",
      "markdown": "https://makespritewithclaude.pages.dev/md/procedural-character.md",
      "code": [
        "https://makespritewithclaude.pages.dev/src/code/46-demo-char.js"
      ]
    }
  ]
}