3D Interactive Assets and Animation for Omnia1 Analytics Website

Project Information

Omnia 1 Analytics a digital analytics & growth marketing agency based in Brooklyn, New York. They exist to drive profitable growth via analytics, SEO, and proactive performance marketing for E-commerce brands.

Our creative director / Web Designer

Ian

Project Team

I

an Stirton

Kongkrisch (Teng) L

Ayaka Fuji

My role

Spline 3D Modeling Creation

Spline Interactive Scene Creation

Spline 3D animation

Clients

Omnia1 Analytics

Website :

https://omnia-1.webflow.io/

Concept

Omnia 1 Analytics is a digital analytics and growth marketing agency.

They use SEO and analytics tools to help clients increase conversions and leads, providing strategic digital marketing solutions.

We are passionate about creating creative scenes to visualize their services and value.

Modeling

All 3D objects in the scene were modeled using Spline. Each icon was carefully crafted by hand using paths to create the logo shapes, as importing SVG data into Spline did not render the shapes correctly. I used the exclude feature on Spline to create the 3D logos.

Scroll Interaction

We implemented a scene in the hero section of the website that features various marketing tools being transported on a conveyor belt, with corresponding digital platforms and social media outputs displayed through a 3D projector.

I added a scroll interaction so that as you scroll, the camera angle changes and zooms in on the dashboard screen.

To ensure this 3D scene looks beautiful and functions smoothly on all devices, we worked closely with the developer to repeatedly adjust the camera positioning for responsive design.

This responsive interaction was made possible with the help of Teng, a wonderful developer.

Loop Animation

The glass tiles and icons on the conveyor belt are animated to pass through the central scanner at regular intervals. The scanned icons are set to change color.

Additionally, I created a loop animation for the projector on the side.

As each icon is scanned, the screen of the associated social media platform appears in sync with the scanning.

3D Assets

- Glassy Tiles

We started by exploring various 3D icon styles. Under the excellent direction of Creative Director Ian, I proposed multiple designs.

Ultimately, we chose glass material with green tiles that matched the overall brand tone of the website.

Spline excels in 3D representations of glass and reflections, making this 3D design an exciting experience for me.

To make the glass texture, hard materials, and floor reflections stand out more beautifully, we focused on creating the materials and adjusting the lighting.

-Scanning Monitor

We created a scan bar below the central dashboard screen. To represent laser-like beams, I adjusted the colors and lighting environment of the scene.

- Output Projector

The output projector has an animation where spotlights turn on at regular intervals in sync with the loop animation on the projector displaying the SNS platform.

To reduce the scene's data load, I minimized the number of lights and placed circular shapes of the same color as the spotlights below the projector to create a contrast of light.

- Conveyor Belt

The conveyor belt uses the Spline's instancing feature to represent the belt's bumps and reduce the scene's data load. At both ends, I've installed light bars that change color in a beautiful gradient.

Side Parts

The Omnia1 logo is applied to the metal side parts. To ensure this asset matches the entire scene, we meticulously adjusted the metallic material details.

- Each service's icons

The website also uses other 3D assets. For example, in the section introducing services, the corresponding icon rises according to the service selected by the user.

To create more contrast, I proposed an animation where the colors change between the default state and the active state.

Final Output

The responsive live demo is available from the link below. This test scene is set to mouse down interaction instead of scroll.

This is another demo scene that includes icons for each service. For this test scene, you can type 【1,2,3,4】on your keyboard to see the interactions.