3D Glass Login with codeXsg

3D Glass Login

sandip gohel

sandip gohel

Web Developer specializing in the MERN Stack, with 3+ years of experience…

12 bookings across all services

Digital Product

About this product

🔮 Glass Login UI

  1. 🪟 Premium 3D glass panel. A real refractive glass slab built with Three.js. It has a thick prism-style bevelled edge, a frosted inner coat for a two-layer look, and chrome corner screws. You can switch between a sharp Square and a perfectly round Circle shape, and the panel spins and morphs when you change. ✨ A light streak sweeps across the glass, and a light follows your cursor to make glints on the edges.
  2. 🌄 Living nature scene. The wallpaper is a procedural mountain lake with a sunrise, misty ridges, pine forests and a reflection, with no image files. 🌙 A day/night toggle swaps it for a moonlit sky with stars. 🧚 Fireflies drift upward, and the background shifts slightly as you move the mouse. 🖱️ You can drag the glass to tilt it, and it springs back when you let go.
  3. ⌨️ Playful, polished form. Frosted white fields with black text keep it readable on transparent glass.
    • 🫧 Each keystroke makes the panel bounce slightly and plays a soft tick sound.
    • 🔐 A colour-changing password strength bar sits under the password field, and a lock icon shows or hides the password.
    • 👤 The avatar pops when you click into a field.
    • 🧲 The Login button follows your cursor a little and has a shine sweep on hover.
    • ❌ Empty fields turn red, and the panel shakes with a low buzz.
  4. 💥 Glass-shatter login finale. On login the panel squashes and spins a full turn. 🧊 240 translucent glass shards burst from the button with a synthesized broken-glass sound, and a "Welcome back, name ✨" message slides in. 🧹 The fields clear themselves afterwards. 🖱️ Clicking the background sprays small shards, and a 🔊/🔇 button mutes all sounds.

₹20