What It Does
Crystal Onboarding is a highly interactive, premium onboarding experience designed to make the crucial first steps of a new hire feel less like filling out forms and more like an engaging, personalized journey.
The Problem It Solves
Standard enterprise onboarding is often a cold, transactional process of clicking checkboxes. This project reimagines the experience into a visually stunning, dynamic flow that reduces anxiety and builds anticipation for the first day.
How It Works
The application uses React Three Fiber to render a 3D crystal that visually evolves as the user progresses through the onboarding phases. Depending on their choices (hardware, work style, birth year, skills), the crystal changes its color, energy lines, and subtle zodiac glow, ultimately revealing their unique professional “avatar.”
Key Features
- Dynamic 3D Visualization: A beautiful wireframe crystal that responds to user input.
- Vogue Aesthetic: A premium, dark-themed, minimalist UI that centers on elegant interaction.
- Gamified Progression: Breaking down hardware setup, account creation, and team introductions into bitesize, rewarding steps.
- Instant Colleague Connection: Built-in interactive cards to send the first “hello” messages to key team members.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend Framework | Next.js / React |
| Styling | Tailwind CSS |
| 3D Rendering | React Three Fiber / Three.js |
| State Management | Zustand |
| Animations | Framer Motion |
| Deployment | Webpack Static Export (GitHub Pages) |