twc-009 / Studi oleh Syafril · bukan proyek klien

Tidal Glass: Tidal Glass

Lihat empat render patung orisinal melalui panel kaca bening. Cari dan simpan studi, ganti preset bening/buram/asap, lalu atur difusi dan tint. Salin atau unduh CSS materialnya.

Tangkapan layar desktop asli demo Tidal Glass.

Sekilas desain

Tipografi judul
Syne
Tipografi isi
DM Sans
Coba interaksi ini
Galeri dengan pencarian dan pilihan tersimpan lokal
Laut#102d36
Gletser#f0f6ed
Kabut#91bdc4
Ambar#e5c18b
Skema komposisi yang diimplementasikan.

YANG TERSEDIA / LANGKAH BERIKUTNYA

Pahami yang Anda pilih.

Pameran digital, penjelajah material, dan koleksi visual.

Berfungsi pada demo ini

  • Galeri dengan pencarian dan pilihan tersimpan lokal
  • Kaca bening, buram, dan asap dengan tampilan solid cadangan
  • Salin dan unduh CSS material

Alat ini mencakup ruang kerja yang berfungsi dan buku komponen sendiri. Kontrolnya mengolah status lokal.

Integrasi produksi untuk didiskusikan

  • Data galeri nyata, koleksi persisten, dan hak aset perlu diintegrasikan untuk pameran produksi.

Ekspor dibuat di browser Anda. Tidak terhubung dengan akun, penyimpanan awan, atau layanan eksternal.

1 halaman terimplementasi pada tema ini

Lihat indeks halaman visual

Batasan untuk direncanakan

Patung berupa gambar hasil render, bukan 3D langsung. Pilihan tersimpan hanya berada di halaman terbuka; dukungan browser menentukan blur dan konteks yang tidak mendukung tetap memakai panel solid.

Penyerahan & penyesuaian

Cakupan halaman, aset merek, konten, serah terima, hosting, biaya, dan dukungan dibahas lewat konsultasi sebelum pengerjaan dimulai. Demo menjadi referensi untuk percakapan tersebut.

Siapkan brief untuk arah ini

Gagasannya

Patung tetap terlihat di luar panel dan berdifusi saat berada di belakangnya. Pantulan tipis, bayangan berlapis, dan tint kecil membuat kaca menjadi material yang terlihat.

Bahasa visual

Patung optik selebar layar, bayangan laut, teks gletser, dan sorotan ambar. Panel bening memiliki tepi reflektif dan tint tipis; galeri memperlihatkan latarnya.

Tipografi

Syne, yang dirancang untuk sebuah pusat seni di Paris, memberi judul galeri suara lebar yang mengalir. DM Sans untuk teks, dan metadata mono kecil mempertahankan karya sebagai fokus.

Tata letak & komposisi

Komposisi berpusat pada objek: pengantar ringkas dan meja material berdampingan dengan jendela galeri bening. Empat thumbnail kecil memberi ruang untuk melihat patung melalui panel. Jendela mendahului alat material pada seluler.

Gerak & interaksi

Gerak latar mati secara bawaan, dapat diaktifkan secara eksplisit, dan dihentikan oleh pengurangan gerak. Pilihan studi mengubah render latar orisinal dan mempertahankan semua kontrol material.

Di balik layar

Kaca CSS berlapis orisinal menggunakan tint 12–48%, difusi, kecerahan latar terkontrol, dan tampilan opak cadangan. Material tampilan dan ekspor berbagi kontrak. Patung dirender offline dengan Three.js dan disajikan sebagai WebP responsif; galeri tidak memuat engine 3D. Tidak ada kode atau tekstur Glass3D yang disalin.

Dirancang untuk semua

Kecerahan latar dibatasi agar teks pada permukaan bening tetap terbaca pada setiap pengaturan tint. Preset, pencarian, filter, status tersimpan, dan range berlabel; mode solid serta pengurangan gerak tetap tersedia.

Di dalam pengalaman

  • Galeri dengan pencarian dan pilihan tersimpan lokal
  • Kaca bening, buram, dan asap dengan tampilan solid cadangan
  • Salin dan unduh CSS material
  • Buku komponen independen

Cocok untuk

  • Pameran digital, penjelajah material, dan koleksi visual.

Di berbagai layar

Tangkapan layar desktop asli demo Tidal Glass.
Tangkapan layar desktop asli demo Tidal Glass.
Tangkapan layar ponsel asli demo Tidal Glass.
Tangkapan layar ponsel asli demo Tidal Glass.

Sudut pandang lain