NFTotem is a Web3 app that transforms any crypto wallet into a personalized 3D “totem,” where each cube represents one of your NFT collections. It turns on-chain complexity into a clear, explorable identity with delightful motion and social‑ready visuals.

End-to-end Product Designer and Developer. I owned UX, UI, motion, and frontend implementation, collaborating with Ilya Kazakov on concept and launch.

Discovery: Mapped wallet data flows, defined identity model (collections → cubes), and narrowed to essential interactions.

UX & UI: Designed zero-blocking actions, smart network prompts, and fast background checks to keep users moving.

Motion Design: Built a cohesive motion language—logo promo loop, animated totem assembly, rank reveal—for a polished experience and shareable moments.

Frontend & WebGL: Implemented in Next.js + TypeScript with Tailwind and shadcn/ui; created custom WebGL shaders for performant 3D rendering.

Web3 Integration: Used ethers.js with Alchemy/Etherscan for multi-chain support (Ethereum, Base, Ronin), ENS resolution, and delegated wallets.

Challenge: On-chain data is noisy and slow. Solution: Streamlined parsing and background checks, surfaced only relevant signals, and optimized preload paths for quick results.

Challenge: Visualizing diverse collections without clutter. Solution: A modular cube system with consistent rules for scale, color, and motion to keep identity legible.

Challenge: Social sharing at speed. Solution: Generated OG images and stills directly from the totem state for instant, quality sharing.

Fast Ethereum wallet connection with instant visualization of collections.

Simplified input via ENS: human-readable names instead of 0x[40HEX], available to 2M+ users.

Share-ready outputs: auto‑generated OG images and stills directly from the totem state.

Next.js, TypeScript, Tailwind, shadcn/ui; ethers.js + Alchemy/Etherscan + Delegate; custom WebGL shaders; Figma, v0, Cursor.

Totem Assembly: From wallet parse to animated, stacked identity—each cube represents a collection.

Logo Animation: The NFTOTEM “O” reimagined as cycling totem blocks, coded directly in the app.

Progress Wallets Reveal: Glitch ASCII character cycling during wallet verification (primary and delegated), creating a clear, engaging progress moment.