Pelangi Huruf Generator

Teks pelangi yang siap tempel — untuk bio, forum, Discord, dan HTML

Ketik → warnai → salin.
Tanpa akun. Tanpa server. 100% di browser.

Buka generator · Laporkan isu

---

_{Material Design 3 · Theme Builder seed #006A6A · i18n ID / EN}

---

Mengapa ini?

Generator teks warna biasanya berhenti di HTML jelek atau palet tetap.
Pelangi Huruf dirancang seperti produk kecil yang serius:

Langsung terasa	Output update saat mengetik — font, palet, pola, animasi ikut sinkron
Siap multi-platform	Salin sebagai HTML, BBCode, Discord ANSI, atau CSS snippet
Desain yang dipikirkan	Material Web resmi + token Theme Builder, bukan “mirip M3”
Milikmu	Palet kustom, favorit di localStorage, seed warna UI sendiri

---

Fitur

Warna & tipografi

• 13 skema siap pakai + palet kustom (2–12 warna) dengan favorit tersimpan
• 18 font — dari Arial sampai JetBrains Mono & VT323
• Gaya: normal · tebal · miring · garis bawah · ukuran 10–50px

Pola & gerak

• Arah warna: kiri→kanan, kanan→kiri, atas→bawah, zigzag, gelombang
• Toggle animasi gradien (background-clip bergerak)
• Mode per karakter atau dikelompok

Export & kualitas

• Salin dalam format: HTML · BBCode · Discord ANSI · CSS
• Simpan HTML siap dibuka di browser
• Peringatan kontras (WCAG) agar teks tetap terbaca di light/dark

Personalisasi

• Tema gelap / terang
• Layout ponsel
• Bahasa Indonesia / English
• Seed tema Material di Pengaturan — ganti DNA warna seluruh UI

---

Coba dalam 30 detik

1. Buka demo live
2. Ketik teks di kolom input
3. Pilih palet & pola
4. Salin atau Simpan HTML

Tip: aktifkan Animasi gradien di Pengaturan untuk teks yang “bergerak”.

---

Jalankan lokal

git clone https://github.com/jundy779/rainbow-text-generator.git
cd rainbow-text-generator
npm install
npm run build
npx serve -l 5173

Buka http://localhost:5173 — wajib via HTTP (bukan file://) karena ES modules.

Perintah	Fungsi
npm run build	Sync versi → generate theme → bundle Material + app
npm run sync	Samakan badge/footer dari package.json
npm run generate:theme	Regenerasi assets/theme.css dari seed
npm run build:bundles	Rollup Material Web + logika app

---

Stack

index.html                 ← entry GitHub Pages
assets/
  theme.css                ← token warna Theme Builder
  typography.css           ← type scale M3
  material.bundle.js       ← @material/web (tanpa CDN runtime)
  app.bundle.js            ← generator + i18n + MCU seed
src/app/                   ← sumber logika
scripts/                   ← sync-version, generate-theme, QA shot

Lapisan	Teknologi
UI	Material Web
Warna sistem	@material/material-color-utilities
Bundle	Rollup
Runtime	Vanilla JS — zero backend

Seed default: #006A6A (teal Fusionify). Ganti di Pengaturan atau lewat scripts/generate-theme.js.

---

Struktur singkat

rainbow-text-generator/
├── index.html
├── assets/          # CSS + bundles produksi
├── src/app/         # i18n, pola, export, kontras, theme-seed
├── scripts/         # build helpers
├── docs/            # preview & draft konten
└── package.json     # sumber versi tunggal (v3.3.x)

Setelah mengubah versi di package.json, jalankan npm run build agar badge, footer, theme, dan bundle tetap selaras.

---

Lisensi & kredit

MIT License — © Fusionify Digital / Muhammad Jundy Rabbani

Dibangun dengan Material Design 3.
Pakai dengan bijak — generator ini tidak bertanggung jawab atas penyalahgunaan.

---

Buat teks yang tidak biasa.

_{Pelangi Huruf Generator · v3.3}