Back to Projects
2025UI DesignCompleted

Auth UI

Clean login/register interface with glass-morphism design and interactive particle background.

View Source

A lightweight authentication interface featuring a sliding login/register card with smooth CSS transitions and an animated canvas-based particle network background that reacts to cursor movement. Built without frameworks — pure HTML, CSS, and JavaScript for easy understanding and modification.

Tech Stack

JavaScriptHTMLCSSCanvas API

Features

  • Sliding login/register page transition
  • Interactive particle network background using Canvas
  • Password visibility toggle
  • Glass-style card layout
  • Clean, minimal UI design
  • No frameworks or build tools required

Challenges

  • Creating smooth card-flip transitions without JavaScript animation libraries
  • Achieving consistent glassmorphism across browsers
  • Keeping the code framework-free for educational clarity

Solutions

  • Pure CSS transforms and transitions for the card flip effect
  • backdrop-filter with fallback backgrounds for cross-browser glassmorphism
  • Vanilla JS with clean separation into HTML, CSS, and JS files

What I Learned

  • Advanced CSS visual effects (glassmorphism, backdrop-filter)
  • Canvas-based animation and mouse interaction
  • Form design patterns and accessibility fundamentals
  • Clean project structure without frameworks