The latest articles on DEV Community by Diyae eddine Afif (@diyae_eddineafif_e18756b). https://dev.to/diyae_eddineafif_e18756b https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4162510%2Fbe5e8446-7938-47fd-b14f-98e2e8837f49.png https://dev.to/diyae_eddineafif_e18756b en Diyae eddine Afif Sun, 04 Oct 2026 21:56:47 +0000 https://dev.to/diyae_eddineafif_e18756b/how-i-built-a-3d-animated-saas-landing-page-with-react-three-fiber-gsap-1f3b https://dev.to/diyae_eddineafif_e18756b/how-i-built-a-3d-animated-saas-landing-page-with-react-three-fiber-gsap-1f3b <p>Hey everyone! 👋</p> <p>I'm super excited to share my very first web project/digital product: <strong>Nuvia</strong> — a modern, dark-mode 3D SaaS Landing Page template.</p> <p>Building interactive 3D elements for the web while maintaining high performance and responsiveness can be tricky. I built Nuvia to offer a smooth, production-ready starting point for SaaS startups and creators.</p> <h3> 🛠️ Tech Stack Used </h3> <ul> <li> <strong>React / Next.js</strong>: Component architecture.</li> <li> <strong>React Three Fiber (R3F) &amp; Three.js</strong>: Interactive 3D shader mesh.</li> <li> <strong>GSAP (GreenSock)</strong>: Smooth scroll animations &amp; micro-interactions.</li> <li> <strong>Tailwind CSS</strong>: Modern dark-theme styling.</li> </ul> <h3> 🚀 Live Demo &amp; Gumroad Link </h3> <p>Check out the live interactive demo here:<br> 👉 <strong>Live Demo:</strong> nuvia-delta.vercel.app</p> <p>If you want to support or use the template for your next project:<br> 🛒 <strong>Gumroad:</strong> <a href="https://diyaeeddine.gumroad.com/l/xkpxoa?wanted=true" rel="noopener noreferrer">https://diyaeeddine.gumroad.com/l/xkpxoa?wanted=true</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fjagozuj5jk8tei7r0n8y.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fjagozuj5jk8tei7r0n8y.png" alt=" " width="800" height="397"></a></p> <h3> 💬 Feedback Welcome! </h3> <p>Since this is my first project launch, I would love to get your thoughts! How does the 3D performance feel on your device? Any suggestions for improvements? </p> <p>Thanks for reading! Happy coding! 🚀</p> react threejs webdev showdev