navibiz.id Navibiz Motion

Navibiz motion library

Motion yang membuat website Anda diingat.

Website polos sekarang bisa dibuat siapa saja. Yang bergerak dengan rapi dan tetap ringan, itu yang diingat pelanggan. Lima puluh motion di halaman ini siap dipasang di website Anda lewat paket Motion.

  • 50motion siap pasang
  • 12bab, dari reveal sampai micro-interaction
  • Semuaaman untuk reduced motion
Mulai jelajahi Cara memesan

Bab 01 · 5 motion

Bab 1: Reveal

Cara konten masuk menentukan urutan orang membaca. Reveal yang baik menuntun mata, bukan sekadar menghias.

M01

Kinetic headline

Satu headline utama per halaman: huruf berputar masuk dari kedalaman, menyebar dari tengah.

  • Dimension
  • Easing
  • 0,7 KB
  • Aman untuk reduced motion

Reduced motion: Headline tampil utuh.

Contoh · Teras Kopi, kafe · Hero

Teras Kopi & Dapur · Malang

Kopi pelan untuk sore yang panjang.

Buka setiap hari, 08.00 sampai 23.00. Akustik setiap Sabtu malam.

Lihat menu

M02

Cascade reveal

Kartu layanan yang bangun dari halaman satu per satu, foto dan teksnya menyusul di ketukan masing-masing.

  • Offset & delay
  • Dimension
  • 0,8 KB
  • Aman untuk reduced motion

Reduced motion: Semua kartu langsung tampil di tempatnya.

Contoh · Studio Arsa, arsitek · Layanan

Layanan

Dari gambar pertama sampai kunci diserahkan.

  • Ruang tamu terang dengan sofa putih
    01
    Desain rumah tinggal

    Rumah baru di lahan Anda, dari konsep sampai gambar kerja untuk PBG.

  • Ruang dengan jendela kayu dan meja makan
    02
    Renovasi dan tumbuh

    Rumah yang sudah ada, ditata ulang tanpa harus dibongkar semua.

  • Interior dengan tanaman dan cahaya alami
    03
    Interior dan perabot

    Klinik, kantor, dan kafe yang dirancang sampai ke kursinya.

M03

Scroll highlight

Paragraf terpenting yang menyala kata demi kata mengikuti scroll, seperti sedang dibacakan.

  • Fade
Digerakkan oleh scroll Anda.
  • 0,4 KB
  • Aman untuk reduced motion

Reduced motion: Paragraf tampil terang penuh.

Contoh · Rimba Raya, eksportir kopi · Tentang kami

Tentang Rimba Raya

Kami membeli langsung dari 412 petani di dataran tinggi Gayo. Setiap karung yang kami kirim membawa nama kebunnya, tanggal petiknya, dan harga yang kami bayar untuknya. Pembeli kami tahu persis dari mana kopinya datang.

M04

Focus pull

Tagline atau kutipan yang muncul dari blur, seperti kamera menemukan fokus.

  • Fade
  • Zoom
  • 0,6 KB
  • Aman untuk reduced motion

Reduced motion: Kalimat tampil tajam.

Contoh · Laras Jahit, penjahit kebaya · Kutipan

Laras Jahit · sejak 2009

“Kebaya yang pas tidak terasa dijahit. Ia terasa tumbuh di badan.”

Laras Pratiwi, penjahit dan pendiri

M05

Crossfade testimonials

Testimoni pelanggan yang bergantian otomatis, baris demi baris, dan berhenti saat dibaca.

  • Fade
  • Offset & delay
Berganti sendiri; hover untuk menahan.
  • 1,0 KB
  • Aman untuk reduced motion

Reduced motion: Tidak berganti sendiri; titik di bawah langsung memilih ulasan.

Contoh · Teras Kopi, kafe · Ulasan

Kata mereka

★★★★★
Tempat paling tenang di Ijen untuk kerja sore. V60-nya tidak pernah meleset.
Dimas A. · Pelanggan sejak 2021

Bab 01 · Reveal selesai · 5 motion

Berikutnya 02 Masking

Bab 02 · 6 motion

Bab 2: Masking

Sembunyikan sebagian, lalu buka. Rasa penasaran itulah yang membuat orang terus scroll.

M06

Image mask reveal

Foto besar yang layak jadi panggung: terbuka seperti tirai sambil turun dari zoom.

  • Masking
  • Zoom
  • 0,7 KB
  • Aman untuk reduced motion

Reduced motion: Foto tampil tanpa tirai.

Contoh · Studio Arsa, arsitek · Proyek

Fasad rumah dua lantai dengan jendela besar
Dago, Bandung · 180 m² · 2025

Proyek

Rumah Tumbuh

Rumah dua lantai yang dirancang untuk ditambah satu kamar setiap sepuluh tahun, tanpa membongkar yang sudah ada.

M07 Berbeda di HP

Spotlight

Foto ruangan atau produk yang diajak dijelajahi: warnanya hanya menyala di bawah kursor.

  • Masking
Gerakkan kursor di atas foto. Tap foto untuk menyalakan warnanya.
  • 0,7 KB
  • Aman untuk reduced motion

Di HP: Di HP, tap menyalakan seluruh foto; lampu yang mengikuti kursor hanya ada di desktop.

Reduced motion: Hover memunculkan warna tanpa lampu yang bergerak.

Contoh · Teras Kopi, kafe · Lantai dua

Interior Teras Kopi: kursi beludru, lampu rotan, dan jendela kaca warna-warni Jelajahi ruangannya

Lantai dua Teras Kopi. Lampu rotan dari perajin Malang, jendela dari rumah lama di Ijen.

M08

Slice reveal

Foto andalan yang datang per irisan dari arah berlawanan, lalu menyatu seperti tirai bambu.

  • Masking
  • Offset & delay
  • 0,9 KB
  • Aman untuk reduced motion

Reduced motion: Foto tampil utuh.

Contoh · Studio Arsa, arsitek · Proyek

Teras villa dengan sofa kayu dan bantal tenun

Villa Ciwidey

Villa sewa · 2024

M09

Image in text

Nama brand raksasa yang diisi foto; fotonya bergeser di dalam huruf saat scroll.

  • Masking
  • Parallax
Digerakkan oleh scroll Anda.
  • 0,4 KB
  • Aman untuk reduced motion

Reduced motion: Foto diam di dalam huruf.

Contoh · Rimba Raya, eksportir kopi · Asal kopi

Arabika dari ketinggian 1.400 mdpl

GAYO

Kopi kami tumbuh di lereng yang sama selama tiga generasi.

M10

Circle wipe

Pindah suasana, misalnya siang ke malam, lewat lingkaran yang membesar mengikuti scroll.

  • Masking
  • Zoom
Digerakkan oleh scroll Anda.
  • 0,5 KB
  • Aman untuk reduced motion

Reduced motion: Dua suasana tampil berurutan.

Contoh · Teras Kopi, kafe · Pagi dan malam

Coklat panas di meja kayu

08.00 · Pagi di Teras

Kopi pertama, sinar pertama.

Interior Teras Kopi saat malam

19.30 · Malam di Teras

Akustik setiap Sabtu.

Meja dibuka sampai 23.00. Reservasi lewat WhatsApp.

M11

Shape morph mask

Foto dalam bentuk organik yang pelan-pelan jadi persegi saat sampai di tempatnya.

  • Masking
  • Transform & morph
Digerakkan oleh scroll Anda.
  • 0,5 KB
  • Aman untuk reduced motion

Reduced motion: Bentuk akhir, diam.

Contoh · Rimba Raya, eksportir kopi · Sortir tangan

Sortir tangan

Biji pilihan, dipilah satu per satu.

Setiap biji yang retak atau terlalu muda kami sisihkan sebelum masuk karung.

Bab 02 · Masking selesai · 6 motion

Berikutnya 03 Scroll

Bab 03 · 5 motion

Bab 3: Scroll

Scroll adalah satu-satunya gerakan yang pasti dilakukan setiap pengunjung. Jadikan ia alat bercerita.

M12

Sticky story

Proses tiga sampai lima langkah: section-nya diam, ceritanya yang berjalan.

  • Masking
  • Parallax
Digerakkan oleh scroll Anda.
  • 0,9 KB
  • Aman untuk reduced motion

Reduced motion: Langkah tersusun ke bawah, masing-masing dengan fotonya.

Contoh · Rimba Raya, eksportir kopi · Dari kebun ke cangkir

Dari kebun ke cangkir

01 / 04

Petik

Hanya buah yang sudah merah, dipetik dengan tangan, tiga kali dalam satu musim panen.

02 / 04

Pilah

Biji hijau dipilah di atas meja, satu per satu, sebelum masuk karung bernama kebunnya.

03 / 04

Seduh

Di kafe mitra kami di Malang, biji yang sama diseduh pelan dengan tangan.

04 / 04

Sajikan

Sampai ke cangkir Anda, lengkap dengan nama kebun dan petaninya di menu.

Buah kopi merah dan hijau di ranting
Segenggam biji kopi hijau
Kopi diseduh manual dengan ketel leher angsa
Secangkir cappuccino dengan latte art

M13

Stacking cards

Paket, layanan, atau tahapan yang menumpuk seperti kartu dibagikan.

  • Dimension
  • Zoom
Digerakkan oleh scroll Anda.
  • 0,7 KB
  • Aman untuk reduced motion

Reduced motion: Kartu tersusun ke bawah.

Contoh · Studio Arsa, arsitek · Tahapan proyek

01

Survei lahan

Kami datang, mengukur, dan memotret lahan Anda. Kontur, matahari, dan tetangga ikut dicatat.

Minggu 1
02

Konsep dan purwarupa

Dua arah desain lengkap dengan model 3D. Anda memilih, kami tajamkan.

Minggu 2 sampai 4
03

Gambar kerja dan PBG

Gambar detail untuk tukang, dan berkas perizinan bangunan sampai terbit.

Minggu 5 sampai 9
04

Pengawasan

Kunjungan rutin ke lokasi sampai kunci diserahkan.

Sampai selesai

M14

Horizontal scroll gallery

Portofolio dan proyek: scroll ke bawah, gallery bergerak ke samping.

  • Parallax
Digerakkan oleh scroll Anda.
  • 0,6 KB
  • Aman untuk reduced motion

Reduced motion: Deretan biasa yang digeser dengan jari atau trackpad.

Contoh · Studio Arsa, arsitek · Proyek pilihan

Proyek pilihan

Tujuh rumah, klinik, dan kantor di Bandung Raya.

01 / 07
Rumah Tumbuh
Rumah Tumbuh
Dago · 2025
Teras Dago
Teras Dago
Dago Atas · 2024
Villa Ciwidey
Villa Ciwidey
Ciwidey · 2024
Lumbung Lembang
Lumbung Lembang
Lembang · 2023
Klinik Setiabudi
Klinik Setiabudi
Setiabudi · 2023
Kantor Notaris Riau
Kantor Notaris Riau
Jl. Riau · 2022
Ruang Baca
Ruang Baca
Antapani · 2022

M15

Velocity skew

Grid foto yang condong mengikuti kecepatan scroll, lalu kembali tegak. Halaman terasa punya bobot.

  • Easing
  • Transform & morph
Digerakkan oleh scroll Anda. Scroll cepat, lalu berhenti.
  • 0,6 KB
  • Aman untuk reduced motion

Reduced motion: Grid diam.

Contoh · Studio Arsa, arsitek · Galeri

M16

Route line

Proses atau perjalanan pesanan: garisnya tergambar mengikuti scroll, titiknya menyala satu per satu.

  • Easing
Digerakkan oleh scroll Anda.
  • 0,8 KB
  • Aman untuk reduced motion

Reduced motion: Garis sudah tergambar dan semua titik menyala.

Contoh · Laras Jahit, penjahit kebaya · Cara memesan

Cara memesan kebaya

Empat belas hari, dari meteran sampai cermin.

  1. Ukur badan Hari 1
  2. Pilih kain Hari 1
  3. Dijahit Hari 2 sampai 9
  4. Fitting Hari 10
  5. Siap dipakai Hari 14

Bab 03 · Scroll selesai · 5 motion

Berikutnya 04 Depth

Bab 04 · 4 motion

Bab 4: Depth

Layar itu datar, website tidak harus. Kedalaman membuat foto dan produk terasa bisa dipegang.

M17

Parallax layers

Section bergambar yang perlu terasa dalam: suasana tempat, lanskap, ruang.

  • Parallax
  • Dimension
Digerakkan oleh scroll Anda.
  • 0,4 KB
  • Aman untuk reduced motion

Reduced motion: Lapisan diam di tempatnya.

Contoh · Studio Arsa, arsitek · Teras Dago

Teras kayu dengan kursi santai
Meja makan kayu di ruang terbuka

Proyek · 2024

Teras Dago

Teras kayu yang mengikuti kontur tebing, dengan pandangan ke lembah di sore hari.

M18

Perspective rise

Grid foto yang bangun dari posisi rebah, baris demi baris, saat masuk layar.

  • Dimension
  • Parallax
Digerakkan oleh scroll Anda.
  • 0,4 KB
  • Aman untuk reduced motion

Reduced motion: Grid tegak dan diam.

Contoh · Studio Arsa, arsitek · Interior pilihan

Interior pilihan

M19

Flip card

Kartu menu atau tim: depannya foto, belakangnya detail dan harga.

  • Dimension
Hover kartunya, atau klik untuk menahan. Tap kartunya untuk membalik.
  • 0,6 KB
  • Aman untuk reduced motion

Reduced motion: Sisi depan dan belakang berganti dengan fade.

Contoh · Teras Kopi, kafe · Menu andalan

Menu andalan

M20

3D ring carousel

Koleksi produk yang berdiri melingkar seperti rak pajang, diputar dengan drag atau tombol.

  • Dimension
  • Easing
Drag cincinnya, atau pakai tombol panah. Swipe untuk memutar.
  • 1,0 KB
  • Aman untuk reduced motion

Reduced motion: Deretan datar yang digeser ke samping.

Contoh · Teras Kopi, kafe · Rak menu

Rak menu

Cappuccino · Rp28.000
V60 Single Origin · Rp30.000
Coklat Teras · Rp26.000
Lemon Tea · Rp18.000
Mie Nyemek Jawa · Rp30.000
Kopi Seduh Manual · Rp32.000
Café Latte · Rp28.000
Ruang lantai dua

Bab 04 · Depth selesai · 4 motion

Berikutnya 05 Morph

Bab 05 · 3 motion

Bab 5: Morph

Satu bentuk berubah jadi bentuk lain tanpa putus, jadi pengunjung tidak pernah kehilangan konteks.

M21

Morph to form

Tombol "Minta penawaran" yang mekar jadi form kecil di tempatnya, tanpa pindah halaman.

  • Transform & morph
Klik Minta penawaran.
  • 1,0 KB
  • Aman untuk reduced motion

Reduced motion: Form langsung muncul dan hilang.

Contoh · Studio Arsa, arsitek · Minta penawaran

Konsultasi pertama gratis

Punya lahan? Ceritakan, kami hitung perkiraannya.

M22

Expand card

Kartu proyek yang membesar jadi halaman detail, lalu kembali tepat ke tempatnya.

  • Transform & morph
  • Zoom
Klik salah satu proyek.
  • 0,8 KB
  • Aman untuk reduced motion

Reduced motion: Detail langsung terbuka dan tertutup.

Contoh · Studio Arsa, arsitek · Proyek

Proyek

M23

Blob morph

Bentuk latar yang bernapas pelan di belakang headline atau foto.

  • Transform & morph
Bergerak terus, pelan, selama terlihat.
  • 0,6 KB
  • Aman untuk reduced motion

Reduced motion: Bentuk diam.

Contoh · Rimba Raya, eksportir kopi · Hero

Rimba Raya

Kopi dari tanah yang kami kenal.

Eksportir kopi dan rempah Nusantara, Medan.

Bab 05 · Morph selesai · 3 motion

Berikutnya 06 Zoom

Bab 06 · 2 motion

Bab 6: Zoom

Mendekat untuk detail, menjauh untuk gambaran besar. Kamera yang bergerak di dalam website.

M24

Zoom window

Pembuka cerita: jendela kecil di tengah headline membesar sampai fotonya memenuhi layar.

  • Zoom
  • Masking
Digerakkan oleh scroll Anda.
  • 0,5 KB
  • Aman untuk reduced motion

Reduced motion: Foto penuh dengan headline di atasnya.

Contoh · Rimba Raya, eksportir kopi · Pembuka cerita

Buah kopi merah dan hijau di ranting

Kebun kami, dari dekat.

Gayo, Aceh Tengah

412 petani · 1.400 mdpl · panen Mei sampai Agustus

M25

Loupe

Lensa pembesar untuk detail kain, tekstur, atau produk kecil.

  • Zoom
Gerakkan kursor di atas kain. Tahan dan geser jari di atas kain.
  • 0,8 KB
  • Aman untuk reduced motion

Reduced motion: Lensa muncul tanpa animasi membesar.

Contoh · Laras Jahit, penjahit kebaya · Detail kain

Kain pilihan

Parang prada, tulis tangan.

Lihat sendiri garis malam dan serat emasnya.

Kain batik parang dengan prada emas

Bab 06 · Zoom selesai · 2 motion

Berikutnya 07 Data

Bab 07 · 3 motion

Bab 7: Data

Angka yang bergerak dibaca, angka yang diam dilewati. Untuk bukti, bukan untuk pamer.

M26

Odometer counter

Angka bukti seperti jumlah klien atau rating: setiap digit berputar seperti meteran mekanis.

  • Offset & delay
  • Easing
  • 1,1 KB
  • Aman untuk reduced motion

Reduced motion: Angka akhir langsung tampil.

Contoh · Rimba Raya, eksportir kopi · Dalam angka

Rimba Raya dalam angka · 2025

petani mitra di Gayo dan Kerinci
412
meter di atas laut, kebun tertinggi
1.400
ton kopi hijau dikirim per tahun
38
nilai rata-rata dari pembeli, dari 5
4,8

M27

Animated chart

Grafik yang menggambar dirinya sendiri, lalu tetap hidup: tunjuk grafiknya, angkanya muncul.

  • Masking
  • Offset & delay
Hover di grafik untuk melihat angkanya. Tap atau geser di grafik untuk melihat angkanya.
  • 1,1 KB
  • Aman untuk reduced motion

Reduced motion: Grafik langsung lengkap; label tetap muncul saat ditunjuk.

Contoh · Teras Kopi, kafe · Pesanan per jam

Sabtu lalu

Pesanan per jam

Puncaknya pukul 17.00: 142 pesanan, sebagian besar lewat keranjang WhatsApp.

M28

Map pins

Lokasi cabang, proyek, atau area antar yang jatuh ke peta satu per satu.

  • Easing
  • Offset & delay
  • 0,7 KB
  • Aman untuk reduced motion

Reduced motion: Semua penanda sudah di peta.

Contoh · Studio Arsa, arsitek · Peta proyek

Peta proyek

Enam proyek, satu jam dari studio.

  • Lumbung Lembang
  • Teras Dago
  • Klinik Setiabudi
  • Rumah Tumbuh
  • Kantor Notaris Riau
  • Villa Ciwidey
Lumbung Lembang
Teras Dago
Klinik Setiabudi
Rumah Tumbuh
Kantor Notaris Riau
Villa Ciwidey

Bab 07 · Data selesai · 3 motion

Berikutnya 08 Gallery

Bab 08 · 5 motion

Bab 8: Gallery

Foto adalah alasan orang datang. Gallery yang hidup membuat mereka tinggal lebih lama.

M29

Elastic drag carousel

Menu atau produk yang dilempar dengan jari: kartu condong mengikuti kecepatan, lalu memantul tegak.

  • Transform & morph
  • Easing
Drag dan lempar kartunya, atau pakai tombol panah. Swipe dan lempar kartunya.
  • 1,5 KB
  • Aman untuk reduced motion

Reduced motion: Deretan biasa yang berhenti pas di setiap kartu.

Contoh · Teras Kopi, kafe · Menu

Menu

Kopi dan dapur

  • Cappuccino
    Cappuccino

    Dampit, susu segar

    Rp28.000
  • V60 Single Origin
    V60 Single Origin

    Dampit atau Tirtoyudo

    Rp30.000
  • Coklat Teras
    Coklat Teras

    Kakao Jember, panas atau dingin

    Rp26.000
  • Lemon Tea
    Lemon Tea

    Teh melati, lemon segar

    Rp18.000
  • Mie Nyemek Jawa
    Mie Nyemek Jawa

    Pedas sedang, telur bebek

    Rp30.000
  • Kopi Seduh Manual
    Kopi Seduh Manual

    Biji pilihan minggu ini

    Rp32.000

M30 Berbeda di HP

Drag canvas

Portofolio besar yang digeser ke segala arah, seperti meja penuh foto.

  • Parallax
  • Easing
Drag ke segala arah dan lempar. Swipe ke segala arah.
  • 1,0 KB
  • Aman untuk reduced motion

Di HP: Di HP, swipe di dalam kanvas menggeser kanvas, bukan halaman. Sisakan ruang untuk scroll di sekitarnya.

Reduced motion: Area yang di-scroll biasa ke dua arah.

Contoh · Studio Arsa, arsitek · Moodboard

Moodboard
2025

Rumah Tumbuh
Kantor Lounge
Material: beton ekspos

M31 Berbeda di HP

Hover scrub

Satu kartu, beberapa foto: geser kursor untuk melihat semua sisi produk.

  • Fade
Gerakkan kursor menyeberangi kartu. Geser jari menyeberangi kartu.
  • 0,6 KB
  • Aman untuk reduced motion

Di HP: Di HP pengunjung harus menggeser jari menyeberangi kartu, gerakan yang jarang dilakukan tanpa disuruh.

Reduced motion: Foto berganti tanpa fade.

Contoh · Teras Kopi, kafe · Produk

Lihat dari semua sisi

Cappuccino
Cappuccino
Rp28.000
Kopi seduh manual
Kopi seduh manual
Rp32.000

M32

Before/after slider

Renovasi, permak, perawatan: hasil yang paling meyakinkan kalau dibandingkan langsung.

  • Masking
Geser garis di tengah foto.
  • 0,8 KB
  • Aman untuk reduced motion

Reduced motion: Slider tetap bisa digeser, tanpa ayunan pembuka.

Contoh · Studio Arsa, arsitek · Ruang tamu

Gambar kerja ruang tamu
Ruang tamu setelah selesai dibangun

M33

Velocity marquee

Nama menu, klien, atau mitra yang berjalan, makin cepat saat scroll dan berbalik arah saat scroll ke atas.

  • Easing
Digerakkan oleh scroll Anda.
  • 1,0 KB
  • Aman untuk reduced motion

Reduced motion: Deretan diam yang tersusun rapi.

Contoh · Teras Kopi, kafe · Menu

  • Es Kopi Susu
  • V60 Dampit
  • Coklat Teras
  • Lemon Tea
  • Mie Nyemek
  • Kopi Tubruk

Bab 08 · Gallery selesai · 5 motion

Berikutnya 09 Cursor & touch

Bab 09 · 5 motion

Bab 9: Cursor & touch

Website yang menjawab gerak tangan terasa dibuat dengan teliti. Satu atau dua titik saja sudah cukup.

M34 Terbaik di desktop

Custom cursor

Kursor milik brand yang berubah bentuk dan memberi tahu apa yang terjadi kalau diklik.

  • Easing
  • Transform & morph
Gerakkan kursor ke foto, tombol, dan deretan bawah. Custom cursor hanya untuk mouse dan trackpad.
  • 0,9 KB
  • Aman untuk reduced motion

Di HP: HP tidak punya kursor, jadi motion ini tidak terlihat di sana.

Reduced motion: Kursor biasa.

Contoh · Studio Arsa, arsitek · Studi kasus

Interior kantor dengan sofa dan dinding warna-warni

Proyek · 2024

Kantor Lounge, Braga

Kantor yang terasa seperti ruang tamu, untuk tim kreatif tiga puluh orang.

Lihat studi kasus

M35

Hotspot tags

Foto yang bisa dijelajahi: titik-titiknya bernapas bergantian, dan setiap titik membuka tag berisi material, produk, atau harga.

  • Zoom
  • Offset & delay
Arahkan kursor ke titik di foto. Tap titik di foto.
  • 1,5 KB
  • Aman untuk reduced motion

Reduced motion: Titik diam; tag muncul tanpa animasi.

Contoh · Studio Arsa, arsitek · Detail proyek

Rumah Dago · Ruang keluarga

Material yang kami pilih untuk ruangan ini

Ruang keluarga dengan dinding beton, kabinet hitam, dan karpet rami

M36 Terbaik di desktop

Hover image list

Daftar proyek yang tetap ringkas; fotonya melayang mengikuti kursor saat namanya ditunjuk.

  • Fade
  • Easing
Hover di nama proyek. Di layar sentuh, foto tampil di setiap baris.
  • 1,0 KB
  • Aman untuk reduced motion

Di HP: Di HP foto tampil diam di setiap baris; foto yang mengikuti kursor hanya ada di desktop.

Reduced motion: Foto muncul diam di samping baris.

Contoh · Studio Arsa, arsitek · Semua proyek

Semua proyek

M37 Terbaik di desktop

Magnetic button

Satu tombol terpenting di halaman: tertarik ke kursor, memantul saat dilepas.

  • Easing
Dekatkan kursor ke tombol, lalu menjauh. Di layar sentuh tombol ini diam; magnetnya untuk kursor.
  • 0,7 KB
  • Aman untuk reduced motion

Di HP: Di HP tombolnya diam; efek magnet hanya untuk kursor.

Reduced motion: Tombol biasa.

Contoh · Studio Arsa, arsitek · Ajakan

Konsultasi pertama gratis

Punya lahan, atau rumah yang sudah sempit? Mari bicara.

Jadwalkan konsultasi

M38 Terbaik di desktop

3D tilt card

Satu benda yang layak dipegang: kartu anggota, voucher, paket unggulan.

  • Dimension
Gerakkan kursor di atas kartu. Di layar sentuh kartu ini diam; tilt-nya untuk kursor.
  • 0,7 KB
  • Aman untuk reduced motion

Di HP: Di HP kartunya diam; efek tilt hanya untuk kursor.

Reduced motion: Kartu datar tanpa kilau.

Contoh · Teras Kopi, kafe · Kartu anggota

Teman Teras

Kopi ke-9, kami yang traktir.

Kartu anggota digital: tunjukkan di kasir, cap bertambah di setiap pembelian.

Teras Kopi & Dapur No. 0412
Rara Anindya Anggota sejak 2025

Bab 09 · Cursor & touch selesai · 5 motion

Berikutnya 10 Transition

Bab 10 · 3 motion

Bab 10: Transition

Perpindahan yang mulus membuat beberapa halaman terasa seperti satu tempat.

M39

Tile transition

Pindah halaman lewat petak yang menyebar dari titik klik, lalu surut dengan gelombang yang sama.

  • Offset & delay
  • Masking
Klik Layanan atau Harga di contoh.
  • 0,9 KB
  • Aman untuk reduced motion

Reduced motion: Halaman langsung berganti.

Contoh · Laras Jahit, penjahit kebaya · Tiga halaman

Kain batik parang

Rumah jahit · Sleman

Kebaya yang dijahit untuk Anda.

Ukur badan, pilih kain, fitting, selesai dalam empat belas hari.

M40

Curtain transition

Website beberapa halaman yang ingin terasa seperti satu tempat.

  • Masking
Klik Menu atau Cerita di contoh.
  • 1,2 KB
  • Aman untuk reduced motion

Reduced motion: Halaman langsung berganti.

Contoh · Teras Kopi, kafe · Tiga halaman

Interior kafe dengan meja kayu

Selamat datang

Teras untuk sore yang tidak terburu-buru.

Jl. Ijen Nirwana Raya No. 7, Malang. Buka setiap hari.

M41

Fullscreen menu

Menu di HP yang mekar dari tombolnya, terasa bagian dari desain.

  • Masking
  • Offset & delay
Tap tombol menu di pojok kanan atas.
  • 0,9 KB
  • Aman untuk reduced motion

Reduced motion: Menu langsung terbuka dan tertutup.

Contoh · Laras Jahit, penjahit kebaya · Tampilan HP

Di HP

Menu yang terasa bagian dari desain.

Tujuh dari sepuluh pengunjung website UMKM datang dari HP. Di sanalah menu paling sering disentuh.

Kain batik parang

Rumah jahit · Sleman

Kebaya yang dijahit untuk Anda, bukan untuk manekin.

Bab 10 · Transition selesai · 3 motion

Berikutnya 11 Typography

Bab 11 · 4 motion

Bab 11: Typography

Huruf juga bisa bergerak: untuk kata yang ingin diingat, dan informasi yang ingin dibaca cepat.

M42 Berbeda di HP

Variable type wave

Kata besar yang huruf-hurufnya menebal seperti gelombang di bawah kursor.

  • Easing
  • Transform & morph
Gerakkan kursor menyeberangi kata. Geser jari di atas kata.
  • 0,7 KB
  • Aman untuk reduced motion

Di HP: Di HP gelombangnya muncul hanya saat jari menggeser kata, jadi efeknya jarang terlihat.

Reduced motion: Kata diam di ketebalan normal.

Contoh · Rimba Raya, eksportir kopi · Varietas

Varietas

Arabika

Tumbuh di atas 1.200 mdpl, dipetik merah, dijemur di atas para-para.

M43

Rotating word

Satu kalimat, kata kuncinya berganti: rumah, kafe, klinik, kantor.

  • Offset & delay
  • Masking
  • 0,9 KB
  • Aman untuk reduced motion

Reduced motion: Semua kata tampil, dipisah garis miring.

Contoh · Studio Arsa, arsitek · Hero

Studio Arsa · Bandung

Kami merancang rumah yang tumbuh bersama pemiliknya.

M44

Scroll-driven headline

Beberapa kata yang ingin diingat, sebesar dinding, bergeser mengikuti scroll.

  • Parallax
Digerakkan oleh scroll Anda.
  • 0,4 KB
  • Aman untuk reduced motion

Reduced motion: Baris diam.

Contoh · Rimba Raya, eksportir kopi · Komoditas

Kopi Gayo · Kayu Manis Kerinci · Pala Banda · Cengkih Ternate · Kopi Gayo · Kayu Manis Kerinci · Pala Banda · Cengkih Ternate ·

Dari kebun ke kontainer, dengan nama petaninya · Dari kebun ke kontainer, dengan nama petaninya ·

M45

Text scramble

Jadwal, jam buka, status: informasi singkat yang terurai seperti papan keberangkatan.

  • Fade
  • 0,8 KB
  • Aman untuk reduced motion

Reduced motion: Teks langsung tampil.

Contoh · Teras Kopi, kafe · Acara minggu ini

Acara minggu ini

Diperbarui setiap Senin
Jadwal acara Teras Kopi minggu ini
Hari Jam Acara Kursi
SAB 19.30 AKUSTIK SORE BUKA
MIN 10.00 KELAS SEDUH V60 4 KURSI
RAB 16.00 CUPPING GRATIS BUKA
JUM 20.00 MALAM PUISI PENUH

Bab 11 · Typography selesai · 4 motion

Berikutnya 12 Micro-interaction

Bab 12 · 5 motion

Bab 12: Micro-interaction

Respons kecil di setiap klik. Tidak terlihat, tapi langsung terasa kalau tidak ada.

M46

Add-to-cart fly

Foto produk terbang ke ikon keranjang saat ditambahkan. Pengunjung melihat pesanannya masuk.

  • Easing
  • Zoom
Tekan + Keranjang.
  • 1,1 KB
  • Aman untuk reduced motion

Reduced motion: Jumlah di keranjang berubah, tombol mengonfirmasi.

Contoh · Teras Kopi, kafe · Toko

0
  • Es Kopi Susu Teras
    Es Kopi Susu Teras
    Rp24.000
  • Mie Nyemek Jawa
    Mie Nyemek Jawa
    Rp30.000
  • Lemon Tea
    Lemon Tea
    Rp18.000

M47

Icon morph

Ikon yang berubah bentuk saat diklik: menu jadi tutup, play jadi pause, plus jadi centang.

  • Transform & morph
Klik setiap ikon.
  • 0,7 KB
  • Aman untuk reduced motion

Reduced motion: Ikon langsung berganti.

Contoh · Teras Kopi, kafe · Ikon aplikasi

Teras Kopi · aplikasi pesan

M48

Morphing accordion

FAQ dan rincian paket: sorotannya pindah dan meregang ke pertanyaan yang dibuka.

  • Transform & morph
Buka pertanyaan lain.
  • 0,8 KB
  • Aman untuk reduced motion

Reduced motion: Buka tutup bawaan browser.

Contoh · Laras Jahit, penjahit kebaya · FAQ

Tanya jawab

Sebelum memesan

Berapa lama menjahit satu kebaya?

Empat belas hari kerja sejak ukur badan, termasuk satu kali fitting di hari kesepuluh.

Untuk acara mendesak ada layanan kilat tujuh hari.

Boleh membawa kain sendiri?

Boleh. Kami periksa panjang dan jenis kainnya saat ukur badan.

Kami kabari kalau perlu tambahan untuk furing atau payet.

Bagaimana kalau ukurannya kurang pas?

Perbaikan ukuran gratis sampai tiga puluh hari setelah kebaya diambil, selama belum dicuci.

Bisa ukur badan di rumah?

Bisa untuk Sleman dan Kota Yogyakarta, dengan biaya kunjungan Rp35.000.

M49

Stateful submit

Tombol kirim yang memberi tahu prosesnya: melipat, berputar, lalu centang.

  • Transform & morph
Tekan Kirim jadwal.
  • 1,2 KB
  • Aman untuk reduced motion

Reduced motion: Tulisan tombol dan pesan status berganti.

Contoh · Laras Jahit, penjahit kebaya · Jadwal ukur

Jadwal ukur badan

Pilih hari, kami siapkan meterannya.

Data hanya dipakai untuk menghubungi Anda soal jadwal ini.

M50

Toast notification

Konfirmasi kecil: masuk keranjang, tersalin, tersimpan.

  • Easing
  • Offset & delay
Tekan + Keranjang.
  • 1,2 KB
  • Aman untuk reduced motion

Reduced motion: Notifikasi muncul dan hilang tanpa bergeser.

Contoh · Teras Kopi, kafe · Keranjang WhatsApp

Pesan dari meja atau dari rumah

  • Es Kopi Susu Teras
    Es Kopi Susu Teras
    Rp24.000
  • Coklat Teras
    Coklat Teras
    Rp26.000
  • Mie Nyemek Jawa
    Mie Nyemek Jawa
    Rp30.000

Bab 12 · Micro-interaction selesai · 5 motion

Berikutnya Cara memesan

Cara memesan

Pilih motion-nya. Kami yang memasang.

  1. 01

    Tandai yang Anda suka

    Tekan Pilih di setiap motion yang cocok. Pilihan tersimpan di tombol Pilihan, di kanan atas.

  2. 02

    Kirim kodenya

    Kode seperti M01 dan M14 ikut ke pesan Anda, lalu tertulis di penawaran dan SPK. Yang dipesan persis yang dipasang.

  3. 03

    Lihat prototype-nya dulu

    Sebelum membangun, kami kirim prototype motion dengan isi usaha Anda. Paket Web Profil Motion dan Web Dinamis Motion.

Tanya lewat WhatsApp (tab baru)

Akhir rute library

Yang Anda bayangkan tidak ada di sini?

Itu pekerjaan Signature: motion yang dirancang khusus untuk Anda, dari WebGL dan 3D sampai interaksi yang hanya ada di website Anda. Bawa referensi dari mana saja; kami rancang, buat prototype-nya, lalu bangun.

Konsultasi Signature (tab baru) Lihat karya Signature (tab baru)

Motion pilihan Anda

Belum ada motion yang dipilih. Tekan Pilih di motion yang Anda suka, lalu kembali ke sini.

    Untuk website jenis apa?

    Kami balas dengan perkiraan harga dan jadwal. Sebelum membangun, Anda melihat prototype motion-nya dulu.

    Kirim pilihan lewat WhatsApp (tab baru)

    Daftar bab

    1. 01 Reveal
    2. 02 Masking
    3. 03 Scroll
    4. 04 Depth
    5. 05 Morph
    6. 06 Zoom
    7. 07 Data
    8. 08 Gallery
    9. 09 Cursor & touch
    10. 10 Transition
    11. 11 Typography
    12. 12 Micro-interaction
    13. →Signature