Glass Flora Hero Section with Spline Animation

Glass Flora Hero Section with Spline Animation

This project explores a glass botanical concept used inside a hero section. At the center is a glass flower built in Spline and placed as the main visual element of the page. The flower rotates slowly and acts as the focal point while the surrounding layout introduces the concept of a premium botanical collection.

The design uses purple and white tones to emphasize the glass material and give the scene a calm and refined look.

The hero section itself is not interactive. The Spline scene runs as a visual background element while the rest of the layout stays static. This keeps the focus on the rotating flower and the overall aesthetic of the hero section.

Navigation and UI elements are present as part of the hero layout, but they do not interact with the 3D scene.

The flower rotates continuously at the center of the page. As it rotates, the reflections and material properties create subtle lighting changes across the surface, which makes the object feel alive even though the lighting itself is not animated.

The visual style focuses on premium glass materials. The flower has translucent surfaces, reflections, and smooth curves that give it a delicate botanical look. The purple and white color palette reinforces the premium and friendly feel of the design.

The glass flower was built entirely in Spline. The structure of the flower was created using the cloner feature, which helped build the repeating petal pattern.

The hero section layout was created in Google AI Studio, where the Spline scene was embedded as the main background visual.

The goal of the hero section is to make viewers feel that they are looking at something premium and carefully crafted. The rotating glass flower creates a calm visual moment that draws attention without overwhelming the page.

The part I am most proud of is the Spline project itself. Building the flower and shaping the glass material helped define the entire look and feeling of the hero section.

website: https://glass-flora.vercel.app/