{"id":28151496,"url":"https://github.com/lordev/sp-01-model","last_synced_at":"2025-08-30T20:36:07.246Z","repository":{"id":253440118,"uuid":"839380422","full_name":"Lordev/sp-01-model","owner":"Lordev","description":"Website for a the SP 01 headset, with customization and modern design. ","archived":false,"fork":false,"pushed_at":"2024-08-07T18:19:16.000Z","size":31990,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-16T18:52:13.435Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sp-01-model.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lordev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-07T13:47:29.000Z","updated_at":"2024-08-16T18:52:18.142Z","dependencies_parsed_at":"2024-08-16T19:09:16.547Z","dependency_job_id":null,"html_url":"https://github.com/Lordev/sp-01-model","commit_stats":null,"previous_names":["lordev/sp-01-model"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lordev%2Fsp-01-model","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lordev%2Fsp-01-model/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lordev%2Fsp-01-model/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lordev%2Fsp-01-model/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lordev","download_url":"https://codeload.github.com/Lordev/sp-01-model/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270686,"owners_count":22042862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-15T04:12:29.187Z","updated_at":"2025-08-30T20:36:07.229Z","avatar_url":"https://github.com/Lordev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎧 SP 01 Model\n\nAn interactive 3D headphone customizer featuring the SP 01 model. This project showcases real-time customization, smooth animations, and responsive design, making it a perfect example of a modern e-commerce product demo.\n\n## 📦 Technologies\n\n- `Next.js`\n- `React`\n- `TypeScript`\n- `React Three Fiber`\n- `React Three Drei`\n- `Framer Motion`\n- `Three.js`\n- `Zustand`\n- `Tailwind CSS`\n\n## 🚀 Features\n\n- Real-time 3D customization with smooth color transitions.\n- Fixed front view with subtle mouse interaction for basic depth.\n- Product info overlay and a shopping-cart placeholder for future e-commerce integration.\n- Mobile-optimized 3D experience.\n\n## 📍 The Process\n\nI started with quick Figma prototypes to explore layout and interaction. From those designs I built the UI and the 3D view with Next.js and React Three Fiber, iterating quickly on the look and feel until the experience felt right. \n\nDuring development I ran into a couple of notable challenges: parts of the headphone initially shared the same material, so changing one color affected others, and coordinating smooth transitions across routes required consistent state.\n\nI addressed these by giving each headphone part its own material instance and by using a lightweight global store (Zustand) to synchronize animations and UI state. \n\nI kept the scope intentionally small for an MVP focus on core customization, smooth easing, and responsive layout and applied a few performance tweaks (preloading the GLB and dynamic scaling) to keep the demo snappy on mobile and desktop.\n\nBy the end the project became a compact, interactive 3D customizer that demonstrates real-time customization, smooth transitions, and responsive design.\n\n## ⚡ Performance Considerations\n\nThe headphones model is the heaviest asset. I preloaded the GLB to reduce load delays and implemented dynamic scaling for efficient rendering on different viewports. These simple optimizations keep the MVP responsive on mobile and desktop.\n\n## 🧠 Key Learnings\n\n- Using Zustand for lightweight global state.\n- Handling 3D transitions and easing with React Three Fiber.\n- Balancing real-time interactivity with simple performance optimizations.\n\n## 🔮 Potential Enhancements\n\nIdeas for future exploration (MVP-level scope kept small):\n\n- Add more headphone models or accessories.\n- Hook up the shop button to a backend or store.\n- Offer additional material presets for more visual options.\n- Improve camera controls (zoom/rotate) for a richer preview.\n\n## 🚦 Running the Project\n\n1. Clone the repository\n2. Install dependencies: `npm install`\n3. Run development server: `npm run dev`\n4. Open `http://localhost:3000` in your browser\n\n## 🎞️ Preview\n\nHere’s a quick demo of the project in action:\n\nhttps://github.com/user-attachments/assets/55b904c6-2c0f-4e3e-819a-df63feb9c876\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flordev%2Fsp-01-model","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flordev%2Fsp-01-model","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flordev%2Fsp-01-model/lists"}