This is my earbuds promotional website named 'Air Pulse' for the interactive media design course.
I designed and modeled a pair of modern pink earbuds named Air Pulse and their charging case in Cinema 4D.
The goal of this assignment was to integrate the 3D AR model into a responsive website and make it interactive using hotspots and GSAP animations.
- Integrate a 3D AR object into a web page.
- Create interactive hotspots that show images and information.
- Animate elements using the GreenSock library.
- Store and display data using JavaScript objects or arrays.
- Use SASS for styling and follow good coding practices with an IIFE in JavaScript.
- Use media queries.
- Maintain a proper GitHub workflow and commit regularly.
- Add the GSAP scroll trigger animations to the page.
- 3D AR Earbuds Model created in Cinema 4D.
- Animated Hotspots that display text and images about the product.
- Dynamic Info Boxes using data stored in a JavaScript object.
- Smooth GSAP Animations for transitions and interactions.
- Responsive Design for mobile, tablet, and desktop.
- SASS Components for organized and maintainable styling.
- X-Ray viewer to show the inner components of the earpods.
- Custom Video Player for the commerical of the earbuds.
- Promotional Images are also included in the website.
- Size Adjustments is a big feature of this website, aas it changes the structure, according to the screen size.
- Cinema 4D
- HTML5
- SASS (CSS3)
- JavaScript (ES6)
- GreenSock (GSAP)
- Model Viewer
- Git & GitHub
- plyr.io
The earbuds are modern and pink, representing a stylish, minimal, and trendy aesthetic.
The website follows a soft, modern theme with smooth animations to make the product feel premium and futuristic.
And uses Greensock animation for smooth scroll and sroll trigger animations.
All files and commits are pushed and merged to the master branch.
The repository includes a detailed commit history showing the development process.
the work was done on multiple branches
- Main
- dev.PP.styling - As the name suggests it is used for styling.
- dev.PP.model - Used for integrating the AR model.
- dev.PP.images - Used for putting the images to the webisite.
- dev.PP.Greensock - Used for adding the smooth scroll animation (But didn't worked out)
- dev.PP.script - Used for the main.js stuff.
- dev.PP.readme - Used for updating the readme file.
- dev.PP.code - For experimenting with the grid.css for website structure.
- dev.PP.GSAP - Used for the smooth scroll animation.
- dev.PP.ScrollTrigger - Used for the scroll trigger animations on the page.
- dev.PP.finishing - to give a finishing touch to the website.
The challeges that I faced during this assignment was:-
- Reduce the file size of the Earbud's AR model. It was initially of 250 mb.
- Aligning the text to the centre while using the Grid.css.
- Adding the smooth scroll animation to the website.
- Adding the scroll trigger animation to the website.
Assignment: Earbuds Promotional Website
Student: Pranav Pranav
Profs.: Marco De Luca and Justin Brunner
Date of Submission: Week 11
