From static to real-time
The rebuild.
The original NextStep was a static design exercise — everything you see in the deliverables below was modeled in Blender by hand, laid out in Figma, and shipped as pictures of a product. The customizer flow was a UI mockup of an interaction, not the interaction itself.
The rebuild replaces that with a working one. The shoe model was generated with Tripo AI and assembled in Antigravity instead of hand-modeled in Blender, then wired into a live Three.js / WebGL scene — real-time orbit, raycasting-based hit detection on the shoe itself, and instant colorway and material swaps. It's the same brief, but the deliverable stopped being a picture of a customizer and became one.
Honest caveat: the Tripo-generated mesh hasn't been matured in Blender yet — that's the next pass. But the direction is already the point: less time spent presenting the product, more time spent shipping it.
Screen capture — live rotation, colorway swap, and real-time model update inside the deployed Three.js build
01
Brand Identity
Logo system, type scale, neon-on-black color language, iconography
02
The static concept.
Full e-commerce UI — hero with 3D-rendered product, product grid with colorways, interactive customizer (Color → Material → Fit), feature breakdown, lifestyle gallery, process steps, and waitlist CTA. Built entirely in Figma as a UI mockup, before the live Three.js configurator replaced it.
03
Email Newsletter
Marketing email with problem / solution narrative and product feature breakdown
04
Social Media Pitch
PAC framework doc (Problem → Agitation → Solution) with process flow and campaign visuals
05
3D Rendering
Shoe renders in Blender — multiple colorways, floating product hero, exploded-sole view
06
Brand Film
Horizontal brand video produced in Canva, uploaded to Vimeo
Brand film
Step into motion.
Horizontal brand film — produced in Canva, hosted on Vimeo
Web design
The static concept.
Full e-commerce UI — hero with 3D-rendered product, product grid with colorways, interactive customizer (Color → Material → Fit), feature breakdown, lifestyle gallery, process steps, and waitlist CTA. Built entirely in Figma as a UI mockup, before the live Three.js configurator replaced it.
Email marketing
Newsletter
Marketing email built on the problem / solution framework — opens with a bold hero, contrasts generic footwear against NextStep, and closes with a direct CTA. Locked to the same dark design system as the site.
Social media & campaign
The pitch.
PAC framework campaign doc — Problem, Agitation, Solution — paired with phone mockups showing the brand in-feed and a process flow from concept to delivery. Built as a social pitch and brand onboarding asset in one.
How it was built