# Hana Tutorial: Design a Clean Interactive Icon from Scratch Source: https://www.youtube.com/watch?v=pzZjGKa2WRA Recap page: https://rapidrecap.app/video/pzZjGKa2WRA Generated: 2025-12-12T18:40:45.658+00:00 --- ## 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. ![Screenshot at 00:05: The initial setup phase where the user selects the Noise Glass effect from the Effects panel to begin texturing the base orange square shape.](https://ss.rapidrecap.app/screens/pzZjGKa2WRA/00-00-05.png) **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. ### Base Shape Creation - Orange square (144x144, Corner 32) - Subtle white stroke (Thickness 1, Opacity 10%, Inside) - Applied two Drop Shadows for depth and highlight. ### Frosted Glass Effect - Noise Glass effect applied to the orange background - Noise Blur set to 25, Amplitude to 6, Scale to 100. ### Avatar Construction - Composed of a white circle layered over a custom rectangle (73x37, Corners 80/80/16/16) - Avatar group received 3D rotation (X=15, Y=-25, Z=8). ### Text Styling - Text layer set to 'Contacts' - Color changed to black - Font size adjusted to 34. ### Interaction Setup (Mouse Hover) - Event set to Mouse Hover on the main group - Two transition actions added: one for Orange BG and one for Text. ### Transition Animation - Both transitions use the 'Spring' animation type - Orange BG transitions from Base State to State - Text transitions from Base State to State. ### Final Output - The process is repeated for 'Messages' (blue) and 'Settings' (green) icons, resulting in a cohesive, interactive icon set. ![Screenshot at 00:05: Selecting the Noise Glass effect from the list of available modifiers in the right sidebar.](https://ss.rapidrecap.app/screens/pzZjGKa2WRA/00-00-05.png) ![Screenshot at 00:28: Setting the corner radius of the orange base shape to 32 to achieve the rounded square look.](https://ss.rapidrecap.app/screens/pzZjGKa2WRA/00-00-28.png) ![Screenshot at 00:45: Editing the first Drop Shadow effect, setting the Y Offset to 4 and Blur to 64.](https://ss.rapidrecap.app/screens/pzZjGKa2WRA/00-00-45.png) ![Screenshot at 01:01: Adding the Inner Shadow effect to the icon group to simulate internal lighting/depth.](https://ss.rapidrecap.app/screens/pzZjGKa2WRA/00-01-01.png) ![Screenshot at 02:28: Adjusting individual corner radii for the rectangular component of the avatar icon \(Top Left 80, Top Right 80, Bottom Left 16, Bottom Right 16\).](https://ss.rapidrecap.app/screens/pzZjGKa2WRA/00-02-28.png)