Hana Tutorial: Design a Clean Interactive Icon from Scratch

Quick Overview

The tutorial demonstrates how to create a clean, frosted glass-style interactive icon in Hype/Spline by building the base shape, adding subtle stroke and shadow effects, applying a noise glass texture, creating a two-state interaction (Base State and State) controlled by a mouse hover event using a Spring animation, and finally duplicating the assets to complete a full icon set.

Key Points: The core object starts as a 144x144 orange square with a 32 corner radius, given a subtle white stroke (1 thickness, 10% opacity, positioned inside). A Drop Shadow effect is added with specific settings (Offset X=0, Y=4, Blur=64, Color=#1A1A1F, Opacity=15%) to create a soft lift effect. A second Drop Shadow effect is added with different blur/opacity settings (Blur=12, Opacity=6%) for a subtle highlight. A Noise Glass effect is applied to the orange background element with Blur=25, Amplitude=6, Scale=100 to create the frosted texture. The icon's avatar shape (person icon) is constructed from a circle (37x37) and a rounded rectangle (73x37, corners 80/80/16/16) colored white with a 1 thickness stroke (10% opacity, inside position). A Mouse Hover event is set up on the main group to transition the Orange BG layer from Base State to State (using a Spring animation with Mass=1, Damping=10, Velocity=0) and the Text layer from Base State to State (using a Spring animation with Y Offset=-2, Blur=64, Opacity=15%). The completed interactive icon is then duplicated and customized for 'Messages' (blue) and 'Settings' (green) icons to form a complete set.

Context: This tutorial guides the user through creating a modern, frosted glass (or glassmorphism) style interactive icon using the design tool Spline, focusing on layering shapes, applying complex visual effects like Noise Glass and multiple shadows, and setting up hover interactions using state transitions powered by physics-based Spring animations.

Detailed Analysis

The tutorial begins by creating the base orange square (144x144, corner radius 32) for the Contacts icon, applying a subtle white stroke (1 thickness, 10% opacity, inside) for definition. Next, two Drop Shadow effects are layered onto this base: the first for ambient lighting (Offset Y=4, Blur=64, Opacity=15%) and the second for a subtle highlight (Blur=12, Opacity=6%). The signature frosted glass look is achieved by adding a Noise Glass effect to the orange background layer, configuring it with Blur=25, Amplitude=6, and Scale=100. The avatar silhouette—the person icon—is built separately using a white circle placed atop a custom rounded rectangle (73x37, specific corner radii: 80, 80, 16, 16). This avatar group is then given 3D rotation values (X=15, Y=-25, Z=8) for subtle depth. Finally, interactivity is added using two transitions triggered by a 'Mouse Hover' event on the main icon group: one transition targets the Orange BG layer to move from Base State to State using a Spring animation, and another targets the Text layer to transition from Base State to State (also using Spring). The tutorial concludes by duplicating this setup and customizing the colors (blue for Messages, green for Settings) to create a complete set of interactive icons.