A few years ago, I was contacted by the team at RocketSaas, a company whose name and logo revolve around a rocket theme. They wanted me to create a 3D animation for the homepage of their website, which would serve as a cover animation. The challenge was to blend their branding with the service icons, creating a looping animation that would capture the user’s attention while also leaving space for text.

Reflect their rocket-themed branding.

Visually represent their services through 3D icons.

Be looped seamlessly, so it could play continuously without disrupting the flow of the website.

Leave enough space for text and slogans, which would be dynamically added via code.

Concept and Storyboarding: To begin, I brainstormed ideas on how to incorporate the rocket and service icons in a way that would feel both natural and visually engaging. The rocket needed to be central, so I imagined it launching from a platform with a cylindrical base. This platform would have a hole in the center from which the service icons would emerge. I created some static renders to show how the rocket would interact with the icons and shared it with the RocketSaas team for feedback.

3D Modeling and Animation: Once the concept was approved, I moved on to creating the 3D rocket model. I placed the rocket on a platform, which had a cylindrical base with a hole in the middle. When the rocket ignites, smoke rises from the hole in the platform. The icons representing their services then emerge from this hole and form a circular shape, symbolizing the company’s diverse offerings. The rocket lifts off vertically, and as it ascends, the icons rearrange themselves into a circle.

Given that the animation had to be looped seamlessly, I decided to divide it into two parts:

The first part, an intro animation, shows the rocket’s ignition and launch, followed by the formation of the circular arrangement of icons.

The second part, the loop animation, depicts the rocket hovering above the icons and gently moving up and down, creating a continuous, soothing effect

I made sure that the transition from the intro animation to the loop was smooth, ensuring that the animation would never feel jarring when it repeated. Additionally, I carefully considered the space left for text, ensuring that it wouldn’t overlap with the animation but could still be easily integrated into the layout.

After completing the initial version of the animation, I collaborated closely with the RocketSaas team to refine the design. Together, we made a few adjustments to enhance the visual appeal. We decided to change the rocket's color from orange to white, which better aligned with RocketSaas’ updated brand aesthetic and gave the animation a cleaner, more professional look. We also tweaked the icons to ensure they were consistent with the company’s latest visual identity. Once these final changes were made, everything came together seamlessly, and the animation was ready for implementation.

Increased website engagement: The animation helped create a more dynamic and interactive homepage, contributing to a noticeable improvement in the overall user experience.

Brand consistency: By incorporating the rocket theme and service icons, the animation reinforced RocketSaas' brand identity, blending professionalism with a creative, modern edge.

Client satisfaction: The RocketSaas team was extremely satisfied with the final result, noting that the animation contributed significantly to a more interactive and visually appealing homepage.

You can view the animation live on the RocketSaas homepage by following this link: RocketSaas Homepage.