← Back to Works

Playful 3D Sign Up

A friendly and inviting authentication flow that leverages 3D elements and claymorphism to reduce friction.

Date November 2024
Stack
ReactSplineCSS Modules
Playful 3D Sign Up

Design Philosophy

Sign-up forms are often boring and purely functional. This project aims to change that perception by injecting personality and warmth into the authentication process. By using “Claymorphism”—a style characterized by soft shadows, rounded corners, and 3D-like depth—we created an interface that feels tactile and approachable.

The Tech

We integrated Spline, a web-based 3D design tool, to render the 3D character illustrations directly in the browser. This allows for interactive elements that respond to mouse movement, adding a layer of engagement.

Key Aspects

  • Claymorphism UI: Soft, inflated UI elements that invite interaction.
  • Interactive 3D: Real-time 3D assets that are lightweight and performant.
  • Micro-copy: Friendly and encouraging text to guide the user through the form.
Playful 3D Sign Up screen 2

Project Highlights

  • Performance score of 95+
  • Fully responsive design
  • SEO optimized structure