2023
work Project
Frontend Development
X-Native
Next.js
React
Framer Motion
TailwindCSS
Rive
TypeScript
Redux
X-Native
An X-ploration on highly interactive websites
Landing Screen

X-Native is a campaign to promote a social media app that we were building. Users can take a few quizzes and determine their spiritual creatures to be set as the profile image in the app. The profile image is generated dynamically with Stable Diffusion hosted on Runpod, where the prompts are created based on the quiz answer. Users are also given the option to mint the profile as an NFT at a small fee.

I'm responsible for both the smart contract and the front-end part of the experience, Framer motion is heavily used throughout the whole application, providing a smooth scrolling experience and parallax effects. The hero section is built with Rive, an interactive animation creator that supports wasm runtime for the web, with the short development period we have, it efficiently achieved the desired spaceport animations. The drawings and design are done by our talented designers Jojo and Lika.

This project took around 1 month to complete, with an additional 2 weeks for backend integration and developing the Twitter social campaign features, during which I worked closely with our backend engineer Justwan to ensure a seamless generate experience, where user progress is updated in real-time and stored in stages allowing continuity. The website is a desktop-only experience, a dedicated mobile version was also developed but only available within the app.

Quiz Screen
Three images will be generated for the user to pick from
Three images will be generated for the user to pick from
Optional mint dialog
Optional mint dialog
Thank you for reading! This portfolio is still under work, content is being updated daily.
© 2024 Henry Zhang