# Creating Refractive 3D Text in Hana - Step by Step Guide Source: https://www.youtube.com/watch?v=B6PBtUxK0qE Recap page: https://rapidrecap.app/video/B6PBtUxK0qE Generated: 2025-12-23T15:31:36.624+00:00 --- ## Quick Overview The video provides a step-by-step tutorial in Spline on creating highly stylized, refractive 3D text effects, culminating in a dynamic animation loop featuring the word "Motion" with glass-like material properties and interactive hover states. **Key Points:** - The tutorial demonstrates applying the 3D Shape effect to text layers within Spline to give them depth and form (0:04). - Key geometry settings adjusted include setting the Depth to 50, Bevel Size to 6, Bevel Type to 'Round', and Subdivision to 12 (0:18, 1:18). - Material properties are manipulated to create a refractive glass look by adjusting Reflectivity (2.90), Glass (1), Aberration (14), Thickness (2.20), and Refraction (107) (0:16, 3:23). - The text rotation is set to X: -60, Y: 0, Z: 38 using the 3D gizmo or input fields for perspective (1:44). - A second, duplicated text layer is created and styled with a solid blue fill and a Drop Shadow effect (2:35, 3:58). - An interactive event is set up so that on 'Mouse Hover' over the object, a 'Spring' transition moves the text from its current state to the duplicated state with infinite, ping-pong looping (4:52, 5:01). ![Screenshot at 0:11: The initial setup showing the 3D text effect applied to the word "Motion" in Spline, with the 3D gizmo visible for manipulation, demonstrating the transition from flat text to 3D.](https://ss.rapidrecap.app/screens/B6PBtUxK0qE/00-00-11.jpg) **Context:** This tutorial uses Spline, a 3D design tool, to guide users through achieving advanced visual effects, specifically focusing on text manipulation to create dynamic, refractive 3D objects. The core concept revolves around utilizing the 3D Shape effect and fine-tuning its Geometry and Material properties to mimic glass or crystal, and then adding interactivity using the Events panel to trigger state transitions upon mouse interaction. ## Detailed Analysis The tutorial begins by showing how to apply the 3D Shape effect to a text layer in Spline, transforming flat text into a 3D object. The instructor first creates a base text layer, sets the frame background to black (0:35), and styles the text "Motion" to white (0:53). The 3D Shape effect is then added, and its Geometry settings are customized: Scale is set to 5, Depth to 50, Bevel Size to 6, Bevel Sides to 3, Smooth Angle to 40, and Subdivision to 12 (1:18). Next, the Material settings are heavily adjusted to achieve a highly refractive, glass-like appearance, notably setting Reflectivity high (2.90), Glass to 1, Aberration to 14, Thickness to 2.20, and Refraction to 107 (3:24). The text's rotation is set to X: -60, Y: 0, and Z: 38 (1:44). Following this, the text is duplicated (2:33) to create a second state. This second layer is given a solid blue fill (2:40) and a Drop Shadow effect with specific blur and offset settings (4:04). Finally, interactivity is added: an 'Events' transition is configured to trigger on 'Mouse Hover' (5:12), transitioning the object from its initial state to the duplicated state using a 'Spring' physics transition with infinite, ping-pong looping (4:56). The video concludes by showing the final result: a shimmering, refractive 3D text that animates when the mouse hovers over it. ### 3D Text Setup - Create a text layer named "Motion" - Set frame background to black (Color: 080C11) - Change text color to white (FFFF) (0:35-0:53) ### Applying and Adjusting 3D Shape - Add 3D Shape effect to text - Set Depth to 50, Bevel Size to 6, Bevel Type to 'Flat Rounded' - Adjust rotation to X: -60, Y: 0, Z: 38 (1:05-1:48) ### Refractive Material Creation - Set Reflectivity to 2.90, Glass to 1, Aberration to 14, Thickness to 2.20, and Refraction to 1.07 to mimic glass (3:15-3:33) ### Creating the Second State - Duplicate the 3D text layer (Cmd+D) - Change the duplicated text color to blue (0051FF) (2:33-2:41) ### Adding Drop Shadow - Apply Drop Shadow effect to the bottom text layer - Set X Offset to 28, Y Offset to 9.30, Blur to 30, and Opacity to 13% (3:58-4:14) ### Adding Interactivity - Select the top text layer - Add an Event triggered by 'Mouse Hover' - Set the Action to a 'Transition' to State 2 (the blue text) using a 'Spring' transition with infinite loop and Ping Pong cycle (4:51-5:01) ![Screenshot at 0:01: Applying the 3D Shape effect to a text layer in Spline, showing the initial transformation of the lightning bolt icon into a 3D object.](https://ss.rapidrecap.app/screens/B6PBtUxK0qE/00-00-01.jpg) ![Screenshot at 0:15: Detailed view of the 3D Shape effect settings panel, showing adjustments to Geometry and Material properties like Reflectivity and Refraction to achieve a glass look.](https://ss.rapidrecap.app/screens/B6PBtUxK0qE/00-00-15.jpg) ![Screenshot at 1:12: Demonstration of manipulating the 3D text's rotation using the colored 3D gizmo overlaid on the word "Motion".](https://ss.rapidrecap.app/screens/B6PBtUxK0qE/00-01-12.jpg) ![Screenshot at 2:24: The Environment Map settings panel open, showing the selection of the 'Blue photo studio' image to influence the material's reflections and lighting.](https://ss.rapidrecap.app/screens/B6PBtUxK0qE/00-02-24.jpg) ![Screenshot at 3:18: Close-up of the Material settings panel for the refractive text, highlighting specific values for Glass \(1\), Aberration \(14\), and Refraction \(107\).](https://ss.rapidrecap.app/screens/B6PBtUxK0qE/00-03-18.jpg)