How to create an animated 3D bubble text effect in Spline

In this tutorial, we’ll be diving into the world of 3D design with Spline to create a playful, bubble-style 3D text effect that is as bold as it is fun! Whether you’re working on a personal project, a social media banner, or an eye-catching visual for a client, this technique will add a dynamic touch to your designs.

Spline’s intuitive interface makes creating 3D effects accessible, even if you’re new to the world of 3D. Together, we’ll explore the process of crafting and customizing bubble text, from setting up your scene to creating custom materials, animations, and exporting your final design. By following these steps, you’ll gain a solid understanding of Spline’s tools and develop skills you can apply to countless other creative projects.

Let’s get started and bring some playful energy to your typography!

1. How to set up your scene in Spline

Step 1

After logging into your account, you’ll be greeted by Spline’s Home screen. From here, you can access official tutorials, examples from the Library, and a curated collection of user-generated assets from the community. To start a fresh project, click the New File button in the top-right corner of the screen.

Step 2

In the new scene, a splash screen will appear with suggested starting assets. Select the first option, 3D Text, as the base for your bubble text effect.

2. How to create and edit 3D text in Spline

Step 1

Once the text appears in the viewport, we can either double-click it in the viewport (you will see a flashing text cursor appear) and start typing or we can access the Text panel in the right sidebar and type any text in the Content box.

Step 2

Since we’re working in a 3D space, we’ll need to navigate the scene to view our objects from different angles. Here’s how to move the camera:

• Orbit: Hold Alt/Option and drag with your mouse or trackpad.
• Pan: Hold Space and click & drag your mouse, or use two-finger drag on your trackpad.
• Zoom: Use your mouse scroll wheel or hold Control/Command and press Plus/Minus, or pinch on your trackpad.

Alternatively, use the circular navigation tool at the bottom of the screen to snap to standard views (front, back, top, etc.). For now, let’s click the blue circle to switch to the Front view. This view is set to Orthographic, which means no lens distortion, so objects remain the same size regardless of distance.

Step 3

Now that we have a placeholder 3D text shape, it’s time to choose a font that complements the bubbly aesthetic!

We’re looking for a bold, rounded display font. I tend to use Envato’s extensive collection of fonts for both commercial and personal projects. For example, in the Fonts section, we can use the filters on the left to narrow down the search. Here we’re looking for a bubble font in a Decorative category and of a Large (Display / Poster) size.

For this project, I’ll be using the Candler Bubble Display Typeface by profstudio. To upload a custom font to Spline, click the “cloud with an arrow” icon in the Text panel and select your file.

Step 4

Once we’re happy with the font, let’s convert our letters into shapes!

Right-click on the text and select Convert Text to Shapes. In the Outliner (Left Sidebar), you’ll see a group containing each letter as an individual 3D object. Rename these objects for clarity by double-clicking their names.

Step 5

To create visual interest, scale and rotate the letters individually using the bounding box of the letter and the gizmo tool located in the center of the bounding box. This tool consists of arrows, circles, and arches which allow us to move, rotate, and scale the objects along each axis.

• Scale: Click and drag the corners of the bounding box, holding Shift to scale proportionally.
• Rotate: Use the gizmo (green arch for vertical rotation) and hold Shift for precise adjustments in 5-degree increments.

Step 6

We can also manually set the Position, Scale, and Rotation values in the Property panel. For now, let’s apply these Rotation values:

B: X: 15, Y: -10, Z: 0

U: X: 0, Y: 15, Z: -10

B: X: 10, Y: 15, Z: 10

B: X: -15, Y: 0, Z: -10

L: X: -5, Y: 15, Z: 10

E: X: -10, Y: -10, Z: 5

Later on, these values might change as we keep refining the composition.

Step 7

Switch to the Top View (green circle in the navigation tool) and adjust the letters’ positions along the Z-axis (blue arrow) to stop the letters from overlapping. This also adds depth to your composition by creating subtle drop shadows.

Return to the Front View when done by clicking the Reset button at the bottom of the screen.

Step 8

Now that our letters are three-dimensional vector shapes, there are plenty of parameters we can play with. In the right sidebar, under Shape, set the following values:

• Extrusion: 45
• Bevel: 8
• Bevel Sides: 1

Leave all the other parameters at the default values. This will make our letter look more rounded and bubbly.

Step 9

Apply these values to all the letters to enhance their rounded, bubble-like appearance.

3. How to create a bubble 3D text effect

Step 1

To create bubbly-looking material, we need to have a high-quality bubble image or create our own using a program like Adobe Illustrator, Adobe Photoshop, or Affinity Designer.

As an example, I’ll pick an image from the Envato collection. It can be any photo or illustration of a bubble like, for example, this Foam set by Sensvector. It includes an editable Adobe Illustrator file that I can tweak to my liking. The bubbles from the set are semi-transparent vector shapes which we can put on a nice background. I’ve placed a square shape beneath the bubble and filled it with a purple-pink radial gradient to give it a pastel look.

Ensure the texture is square, with the bubble occupying as much space as possible. Export it as a PNG or JPEG, and let’s add it to Spline!

Step 2

In the right sidebar, we can change the background color of our scene either by picking the color manually (clicking the color square) or by entering an exact value in the box. I’ve picked a light-blue #BBC3FB color for my scene.

Step 3

Select the letter “B” in the Outliner and scroll down to the Material section of the Property panel on the right. Click the chain icon to break the connection and turn the default Text Material into separate layers. If we hover the cursor on the right of the layer visibility icon, a red X button will appear. We can delete all the unnecessary layers keeping only the Matcap and Lighting.

Step 4

Let’s learn how to create our own custom Matcap from the texture that we prepared previously!

Matcaps (Material Captures) in Spline are textures projected onto 3D models to simulate materials like metal, plastic, and glass, adding shine and reflections without relying on scene lighting. They offer a consistent look, making them perfect for quick previews and stylized effects.

With the letter B selected, click the sphere icon in the Material section next to the Matcap label, and Upload Image to add our bubble texture.

Set the Matcap Opacity to 100 and ensure the Blend Mode is set to Normal. And here we have our iridescent bubble letter!

Step 5

Now we can apply this Matcap to all other letters by right-clicking the letter “B” and choosing Copy Material. Then select all the rest of the letters, right-click again, and Paste Material. 

4. How to animate the bubble letters

Step 1

Animation in Spline is extremely user-friendly and easy to do, even if you haven’t ever animated before! To make the letters behave like real soap bubbles, we’ll assign two States with subtle variations and create a smooth Transition between them. This will produce a dynamic, lifelike effect.

Find the States section in the right sidebar and click the + icon to add a default set of two States. Now we need to add a layer that will distort the object’s geometry slightly, creating a dynamic effect.

Scroll down to the Material section and click the + icon to add a new layer. By default, it adds a Color layer, so we need to click its name and select Displace from the drop-down list.

Let’s select the Base State and set the following parameters for the Displace layer:

• Displace: 10
• Type: Fbm
• Scale: 3
• Movement: 100

For the second State, let’s change the Displace options to the following:

• Displace: 20
• Type: Fbm
• Scale: 6
• Movement: 110

Step 2

Let’s make it move! Head to the Event section in the right sidebar and click the + icon to create a new Transition Event.

Open the event options and configure the following:

• Select Base State for the starting point and State for the end point.
• Set the Speed to 3.
• Choose Linear interpolation.
• Enable Infinite Loop.
• Set the Cycle Mode to Ping Pong Reverse.

Now, the letter will gently shift between the two states, simulating the subtle movement of a bubble.

Step 3

To see the effect, press the Play button in the toolbar or use the shortcut Shift-Space. 

Watch how the letter undulates like a real bubble!

Step 4

Instead of copying the previous animation, let’s give the letter “U” a unique movement to make the animation look more natural and less repetitive.

Add two States as before, and create a Displace layer in the Material section.

For the Base State, set the following:

• Displace: 10
• Type: Fbm
• Scale: 5
• Movement: 390

For the second State, set the following:

• Displace: 20
• Type: Fbm
• Scale: 6
• Movement: 400

Step 5

Now let’s animate it by adding a Transition between the two States. Create a new Transition Event with the following settings:

• Speed: 3
• Interpolation: Linear
• Loop: Infinite
• Cycle Mode: Ping Pong Reverse

Check out how it looks by pressing the Play (Shift-Space) button, and let’s move on to the next one.

Step 6

As previously, start by adding two States and a Displace layer.

For the Base State, set:

• Displace: 5
• Type: Simplex
• Scale: 5
• Movement: 20

For the State, set:

• Displace: 20
• Type: Simplex
• Scale: 7
• Movement: 15

And let’s animate it by adding the Transition Event with the following settings:

• Speed: 3
• Interpolation: Linear
• Loop: Infinite
• Cycle Mode: Ping Pong Reverse

Looking great! Let’s move on!

Step 7

For the next “B”, let’s experiment with a different Displace Type, Voronoi, for a unique effect.

For the Base State, set:

• Displace: 20
• Type: Voronoi
• Style: Power (^3)
• Quality: High
• Scale: 5
• Movement: 80

Leave all other options as default.

For the State, set:

• Displace: 20
• Type: Voronoi
• Style: Power (^3)
• Quality: High
• Scale: 7
• Movement: 90

Step 8

Instead of creating a new event, you can Copy Events from the first “B” and Paste Events to this by right-clicking the letters.

Let’s move on—there are just a couple more letters left!

Step 9

For the letter “L”, add two States and a Displace layer.

For the Base State, set:

• Displace: 10
• Type: Fbm
• Scale: 3
• Movement: 10

For the State, set:

• Displace: 20
• Type: Fbm
• Scale: 3
• Movement: 30

Use the Copy Events > Paste Events function to apply the Transition Event that we copied previously.

Step 10

One more to go! Let’s animate the letter “E”.

For the Base State, set:

• Displace: 10
• Type: Fbm
• Scale: 3
• Movement: 100

For the State, set:

• Displace: 20
• Type: Fbm
• Scale: 5
• Movement: 110

Copy-Paste the Transition Event from the previous letter and adjust the speed, if desired, for variety. We set the Speed to 3 for each letter. The greater the value, the slower will go the transition between two states. Experiment with the numbers to enhance the organic, bubbly effect.

Step 11

Press Play (Shift-Space) and enjoy your fully animated text! Each letter now behaves like a soap bubble, with unique movements and characteristics that add depth and realism to the overall design.

5. How to create iridescent bubbles

Step 1

To enhance the composition, let’s create some bubbles! These will complement the text and make the design more dynamic. From the Toolbar at the top, click the Plus icon and select a Sphere from the 3D primitives.

Once the sphere appears in the viewport, apply the same bubble Matcap texture we used earlier. To do this, right-click any of the letters with the Matcap applied and select Copy Material. Then, right-click on the sphere and select Paste Material. This ensures your bubble has the same iridescent, bubbly appearance as your text.

Step 2

Now, let’s bring the bubble to life by adding States and creating a smooth Transition.

1. For Base State, set:
   • Displace: 20,
   • Type: Fbm,
   • Scale: 2,
   • Movement: 0.
2. For State, set:
   • Displace: 50,
   • Type: Fbm,
   • Scale: 5,
   • Movement: 400.
3. Create a Transition Event with the following settings:
   • Speed: 50
   • Interpolation: Linear
   • Loop: Infinite
   • Cycle Mode: Ping Pong Reverse

The bubble will now gently expand and contract in a natural, flowing motion.

Step 3

If you notice a thick outline around the bubble or letters, this comes from the background color of the custom bubble texture. The outline appears thick because of the noticeable distance between the bubble and the edges of the texture square. While it doesn’t look bad, we can refine it to achieve a more realistic, delicate look.

1. Open the bubble texture in an image editing program like Photoshop, Illustrator, or Affinity Designer.
2. Crop the texture to reduce the border around the bubble, making the outline thinner.
3. Adjust the colors to refine the iridescent effect. For example:
   • Make the inner white glow more opaque.
   • Add a subtle yellow tint to the background for a warmer feel.
4. Save and export the refined texture.

In Spline, reapply the updated Matcap texture:

• Open the Matcap Settings by clicking the sphere icon next to the Matcap name.
• Upload the refined texture for each letter manually.

Step 4

To add depth and interest to your scene, let’s add more bubbles by duplicating the one we’ve just created.

1. Duplicate: Select the sphere and press Control/Command-D to duplicate it.
2. Adjust the Size: Vary the size of each bubble by scaling them using the bounding box corners or the Scale settings in the Property panel.
3. Positioning: Use the Position sliders in the Property panel or drag the bubbles with the gizmo to arrange them dynamically. Make sure to orbit the camera to view your scene from different angles and avoid the bubbles and text overlapping awkwardly.
4. Modify the Displace values slightly for each bubble to create a natural, varied animation.
5. Camera Reset: If you move the camera too far from the scene, press S to reset the view and center the objects.

This step ensures our scene looks balanced and polished from all angles.

6. How to frame and export the final bubble text animation

Step 1

Once we’re happy with the composition, let’s edit the Frame that allows us to export our work with the exact dimensions.

In the toolbar at the top, click the Edit Frame button to enter Edit mode. In the Property panel on the right, we can select one of the templates from the Size drop-down menu. Let’s set it to FullHD(1920×1080).

Step 2

Click Export in the toolbar, and scroll down to Files > Video Recording. From here, we can either export our scene as a video or as an animated GIF image.

For the Format, select GIF, and adjust the frame rate (FPS) for smoother results. We can also set the animation duration to either a determined number of seconds or Manual, where we’ll be able to start and stop the recording when we want.

To export your file as a video, select MP4 Format, set the frame rate (FPS) to 30, and set the length of your video either in seconds or Manual.

And you’re done!

Your animated 3D bubble text effect is ready to shine! 

Throughout this process, we explored how to find and upload custom fonts, adjusted the geometry to create rounded, playful shapes, applied materials, and created smooth animations to bring the design to life. The beauty of Spline is its flexibility and ease of use, allowing you to experiment and push the boundaries of your creativity.

Now that you’ve mastered this technique, why not take it a step further? Play around with different textures, colors, and animation settings to make the design uniquely yours. Whether for personal projects, presentations, or social media content, this vibrant and playful design is sure to captivate your audience. 

Thank you for following along, and I hope this tutorial inspires you to continue creating bold, vibrant designs with Spline. Until next time, happy designing!

If you’d like to dive more into exploring 3D design, Spline’s interface, and its opportunities, watch this inspiring video tutorial by Adi Purdila. He’ll show you how he created an animated 3D scene without any previous 3D experience!