TOKENAI Design Kit
Kinetic Typography: tipografi adalah objek utama — dan ia bergerak. Judul raksasa memakai font variabel Archivo yang melebar dan menebal saat disorot (sumbu wdth & wght dianimasikan), headline marquee berjalan tanpa henti dengan kata outline berselang-seling, baris teks meluncur masuk dari sisi bergantian saat scroll (murni CSS), tautan digarisbawahi garis yang tumbuh, dan huruf bisa menari satu per satu. Kanvasnya kertas hangat dengan tinta hitam pekat seperti lembar type specimen, plus aksen indigo elektrik dan jingga. Kit satu-tema — terang secara bawaan, karena huruf hitam paling hidup di atas kertas. Lihat juga contoh halaman nyata lewat bilah navigasi di atas — hero landing-nya mengikuti gerakan mouse Anda.
Archivo variabel (heading & body — sumbu wght 100–900 & wdth 62–125 ikut dikirim, jadi animasi variabelnya hidup) · Martian Mono (kode, kicker & kbd) · sorot heading di bawah untuk melihat hurufnya melebar
Aa — Huruf yang bergerak
Aa — Huruf yang bergerak
Aa — Huruf yang bergerak
Aa — Huruf yang bergerak
Aa — Huruf yang bergerak
Aa — Huruf yang bergerak
Aa — Huruf yang bergerak
Aa — Huruf yang bergerak
Aa — Huruf yang bergerak
#4B3CFA#3527E0#111013#FF5C33#F4F2EC#FFFFFF#E9E6DC#111013#6B6870#C9C5B6#1F8A4C#B4770B#D2372E#4B3CFAKertas hangat + tinta hitam pekat; indigo elektrik untuk aksi, jingga untuk kata yang disorot.
--tk-space-xs--tk-space-sm--tk-space-md--tk-space-lg--tk-space-xl--tk-space-2xl--tk-space-3xl--tk-radius-sm--tk-radius--tk-radius-lg--tk-radius-full--tk-shadow-sm--tk-shadow--tk-shadow-lgBayangan tinta lembut — permukaan tetap terasa seperti kertas di atas meja.
Iconify, set carbon (IBM Carbon) — tulis <iconify-icon icon="carbon:nama">; ratusan ribu ikon lain tersedia dengan set berbeda bila perlu.
Spesimen — Sorot judul di bawah
Kosakata gerak huruf: heading melebar saat disorot (bawaan semua .tk-display/.tk-h1/.tk-h2), teks outline berongga (.tk-outline-text, varian -primary) yang terisi saat disorot, headline marquee (.tk-type-marquee — jeda saat disorot), baris yang meluncur masuk saat scroll (.tk-kinetic-line, varian -alt dari kanan; browser lama tetap menampilkan konten), kata menari per huruf (.tk-wave-text), dan kicker mono bergaris (.tk-kicker).
Sorot tombol: hurufnya merenggang dan melebar — teksnya sendiri yang beranimasi.
Search bar — ikon dan pintasan menyatu di dalam field
Select custom (ditampilkan terbuka) — satu pilihan · dengan pencarian · multi dengan checkbox & aksi. Listbox digambar kit, bukan popup bawaan browser.
Dropdown aksi (ditampilkan terbuka; aslinya terbuka saat trigger diklik)
Semua kontrol digambar sendiri; opsi menu ikut bergeser sedikit ke kanan saat disorot — gerak kecil di mana-mana.
Kartu auth dirakit murni dari komponen form kit — bagian dari paket Komponen. Halaman penuhnya (web & ponsel lewat saklar perangkat) ada di examples/login.html dan examples/register.html.
Selamat datang kembali! Silakan masuk untuk melanjutkan.
Belum punya akun? Daftar gratis
Gratis 14 hari — tanpa kartu kredit.
Sudah punya akun? Masuk
Total Pengguna
12.540
+12,5% dari bulan laluJane Doe
UI/UX Designer
Sorot kartu: judul di dalamnya ikut melebar — kartunya diam, hurufnya yang bergerak.
Tautan navbar digarisbawahi garis yang tumbuh; item sidebar bergeser ke kanan saat disorot.
Tab merenggang hurufnya saat disorot; segmented dengan segmen aktif tinta pekat.
Badge memakai huruf mono uppercase seperti anotasi di lembar spesimen.
Grid 12 / 3 / 2 kolom pada lebar konten --tk-container
Spesimen 01 — Hero
Satu kalimat pendukung yang menjelaskan nilai produk ini bagi penggunanya.
Penjelasan singkat manfaat fitur ini.
Bergabung dengan ribuan pengguna lain.
Advanced filter — pencarian, dua select custom, tombol filter berpenanda jumlah, chip filter aktif
| Nama | Peran | Status | Aksi | |
|---|---|---|---|---|
| Jane Smith | jane@contoh.com | Designer | Aktif | |
| John Doe | john@contoh.com | Developer | Nonaktif |
|
Kolom Aksi rata kanan: ikon langsung (lihat · edit · hapus) untuk aksi sedikit, atau menu … (klik untuk membuka) bila aksinya banyak.
Chart.js — pustaka chart tunggal untuk semua kit. Warna dibaca dari token kit saat digambar; indigo, tinta, dan jingga di atas kertas.
Pengunjung
Pendapatan
Sumber Trafik
Progress bar bergaris diagonal indigo — seperti pita cetak yang sedang berjalan.
Belum ada data
Data yang Anda cari belum tersedia di sini.