Antarmuka yangbergerakseperti keynote.
Design system yang kalem untuk React + Tailwind: komponen, motion sekelas keynote, jendela ala desktop, plus skill supaya agen AI-mu tidak lagi kerja asal jadi.
24.675 baris aturan, checklist, template, dan contoh yang harus dihindari. Simpan satu di .claude/skills/, dan agenmu langsung bekerja dengan caramu.
Arahkan untuk mengintip · Klik untuk membuka · Pilih file untuk Quick Look
Geser garisnya. Lihat bedanya.
Isinya sama. Bedanya: ukuran dari skala golden ratio, leading yang lega, lebar baris 65ch, dan satu aksen saja.
Tools for teams of every size — powerful when you need them, quiet when you don’t.
Our platform helps teams of every size move faster with tools that are powerful, flexible and easy to use, built for the way modern companies work today and tomorrow and every day after that.
Jalan sendiri — semua yang kamu lihat itu komponen kit, bukan rekaman video.
Pilih tanggal, tulis alasan singkat.
--primary dan --ring. Coba klik — seisi halaman ikut berganti.Tipografi di kit ini diriset dan disusun dengan golden ratio. Ukuran dasarnya 16px, lalu dikali atau dibagi φ = 1,618 — atau setengah langkah, √φ, kalau satu langkah terasa terlalu jauh. Leading, measure, tracking, dan ketebalan huruf ikut aturan yang sama. Tidak ada angka yang asal tebak.
Tipografi yang baik tidak terasa. Pembaca tak pernah memikirkan leading atau measure — mereka hanya terus membaca, sedikit lebih lama dari niatnya, tanpa merasa lelah.
Tipografi yang baik tidak terasa. Pembaca tak pernah memikirkan leading atau measure — mereka hanya terus membaca, sedikit lebih lama dari niatnya, tanpa merasa lelah. Tipografi yang baik tidak terasa. Pembaca tak pernah memikirkan leading atau measure — mereka hanya terus membaca, sedikit lebih lama dari niatnya, tanpa merasa lelah.
skill-typography — 2.011 baris panduan untuk memilih, memadukan, menskalakan, memuat, dan memeriksa huruf.Gerakan khas video peluncuran produk — teks yang muncul dari balik mask, kamera yang membidik, kursor yang mengklik, kartu yang terangkat. Masing-masing satu file, tinggal salin. Semuanya cuma pakai transform dan patuh pada setelan reduced motion.
Ajukan lebih awal, cepat disetujui, sah dalam hitungan detik.
motion/karaoke-text.tsxDokumentasimotion/soft-cursor.tsxDokumentasimotion/flying-pill.tsxDokumentasimotion/element-lift.tsxDokumentasimotion/virtual-camera.tsxDokumentasimotion/count-up.tsxDokumentasi- 1Pengajuan
- 2Peninjauan
- 3Persetujuan
- 4Surat
motion/device-frame.tsxDokumentasimac/notification.tsxDokumentasiJendela lengkap dengan traffic lights, terminal yang mengetik sendiri, dock yang membesar saat disorot, pencarian ⌘K, dan notifikasi bening. Seret jendelanya ke mana saja — tutup satu, panggil lagi dari dock.
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--muted: 0 0% 96.1%;
--border: 0 0% 89.8%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
}Bukan mock-up. Video di bawah ini dibuat dari nol sampai jadi dengan skill-motion-video.
Video tutorial ala keynote tentang situs ini: rekaman layar asli, narasi yang sinkron per kata, kamera virtual, dan musik sintetis.
Portofolio, proyek, dan tulisan — “I build for the web — and I design.” Fullstack development, UI/UX, video, dan fotografi.
Studio kreatif di Pematangsiantar dan Medan — foto, video, dan website untuk brand yang berani, dikerjakan satu tim.
Kalem dari awal. Bergerak saat perlu.