In 2024, Sparkk embarked on an ambitious project: to create a new website in-house that would reflect our expertise in innovation, our boundless creativity, and our universe heavily inspired by video games.
The site had to be both fun and corporate, offering dynamic, interactive navigation while remaining professional to attract our B2B clients.
We also wanted to showcase our skills in design and innovation through the presentation of our case studies and services, all within a visual environment that would blend 3D and interactivity.
Website Objectives
- Fun and Corporate: Strike a balance between a dynamic navigation experience and a professional brand image.
- Innovation and Creativity: Highlight our ability to create modern, interactive web experiences.
- Interactive Navigation: Make the site engaging with fun animations and interactions.
- Presenting Our Work and Services: Showcase our expertise through detailed case studies.
Creation Process
Interface Design in Figma
The project began with interface design using Figma, which allowed us to experiment with various ideas and arrive at a final design that met our goals. Figma enabled us to efficiently organize interactive elements while maintaining strong visual consistency.
Integration with Nuxt.js and Strapi.js
For the integration, we chose Nuxt.js, a powerful framework based on Vue.js, which allowed us to build a Single Page Application (SPA) with Server-Side Rendering (SSR) for optimal SEO. Additionally, we integrated Strapi.js as the headless CMS to manage and serve dynamic content efficiently. This combination ensured top performance, excellent search engine optimization, and seamless content management.
3D Asset Creation in Blender
The visual elements were brought to life in Blender, where we created exploded 3D forms and other assets to enhance immersion.
Python Script and Animation Management
A Python script was used to export the position data in JSON format from our 3D models. This data was then parsed in Nuxt.js, with transitions between the various shapes controlled either by scrolling or by simple tweens, creating a smooth, interactive navigation experience.
The cubes are dynamically created in Three.js.
Real-Time Light, Camera, and Post-Processing Adjustments
Using a real-time modification interface, we fine-tuned the lights, camera, and post-processing effects to optimize the visual rendering at every stage. Every detail was carefully considered to deliver an immersive experience.
Video Integration with Strapi and Advanced Interactions
Videos loaded via Strapi were embedded onto 3D surfaces, such as cubes, which are a key element of the site. We also developed a script that splits the videos into 16 parts for specific interactions on the arcade machine feature.
A the end, mouse interactions with the cubes were implemented, making the site more interactive and immersive for users, particularly with real-time transitions and animations.
Tools Used
- Blender – for creating and animating 3D assets.
- Nuxt.js – for front-end integration as a single-page application.
- Strapi – as the CMS to manage dynamic content.
- Three.js – for handling 3D objects in the browser.
- Lenis – for smooth animation and scroll management.
- GSAP – for interactive web animations.
- Figma – for visual interface design.