Warna Perlawanan — Brave Pink × Hero Green
Proyek web ini berawal dari gerakan sosial tentang warna simbolis diakibatkan demo 25 Agustus 2025 Hero Green dan Brave Pink. lalu terfikir, bagaimana kalau warna ini bisa diwujudkan menjadi filter visual yang mudah diakses semua orang, tanpa perlu aplikasi tambahan, cukup lewat browser?
Dari situ lahirlah Warna Perlawanan sebuah web campaign untuk yang siapa pun dapat mengunggah foto lalu otomatis diubah menjadi duotone filter dengan kombinasi hijau dan pink sebagai identitas visual. Semua pemrosesan dilakukan di sisi client dengan Canvas API, sehingga privasi tetap terjaga.
Fitur Utama
- Preset Instan: Poster, Lembut, Dramatis, Grunge Poster (random texture), Halftone
- Efek Tambahan: Grain, Vignette, Soft Glow
- Grunge Overlay: Menggunakan 24 tekstur PNG yang dipreload dengan
createImageBitmapuntuk performa cepat - Halftone Dots: Grid titik dengan opsi ukuran, opacity, dan invert untuk nuansa retro
- UI Responsif: Panel kontrol sederhana dengan advanced settings yang bisa di-expand
Tantangan utamanya adalah memastikan filter ini tetap ringan dijalankan di berbagai perangkat, terutama smartphone.
Engine Duotone dirancang dengan alur grayscale → auto-contrast → mapping dua warna. Pada tahap pengembangan, pendekatan grunge procedural terbukti terlalu berat untuk performa, sehingga diganti dengan grunge overlay berbasis tekstur yang dipreload untuk mempercepat render.
Dari sisi antarmuka, proyek ini menggunakan Next.js + Tailwind, dengan panel kontrol sederhana: mapping, palet, preset, serta advanced settings yang dapat ditampilkan bila pengguna memerlukan kontrol lebih detail.
Proyek ini memperlihatkan bagaimana teknologi image processing berbasis web dapat mendukung pesan visual dalam kampanye sosial sekaligus menjadi eksperimen pengembangan UI/UX yang responsif dan ringan.
🔗 Live Demo: https://warna-perlawanan.vercel.app/
📂 Source Code:https://github.com/mihdan15/campaign-web