When I first had a beer with Mason Poe, founder of Edgar Allan, he explained to me that how we “search,” on a “search engine,” on tiny phone screens and get a list of websites which we have to filter through will soon be archaic.
Thanks for reading SplineTime3D! Subscribe for free to receive new posts and support my work.
I thought, “This guys a lil’ kooky but I want to work for him.”
Fast forward a couple of years from that beer, a lot has changed.
Some big changes
Gemini is now mainstream (part of Mason’s prediction came true).
Lovable allows you to create websites in a prompt:
Lesser of the mainstream changes but something I’m more and more aware of - 3D immersive web experiences are kicking off:
According to Peachworlds, 3D websites get:
Up to 40% increased conversion compared to 2D sites
Whether this stat is true or not, it is true that more and more people want immersive experiences.
According to recent market research, the immersive experience market is rapidly growing, with estimates showing a global market size expected to reach USD 114.37 billion in 2024, projected to expand at a CAGR of 26.3% through 2030, indicating a significant rise in popularity across various sectors like entertainment, tourism, and retail, driven by advancements in VR, AR, and MR technologies.
Why the deuce is this happening?
A couple of factors contributing to the rise of immersive experiences
Technological advancements:
The development of affordable Virtual Reality headsets and Mixed Reality and Augmented Reality capabilities on smartphones has made immersive experiences more accessible to a wider audience.
Experience economy:
Consumers increasingly prioritize unique and memorable experiences over just buying products, driving the demand for immersive entertainment.
So, where does that leave all us designers and developers?
Now, I’m not saying that every website should be made using AI tools nor do I think that every website should be some mad 3D experience.
BUT, I am saying that trying to make informed decisions looking at objective data can help us guide our decision making.
As cookie cutter AI website builders like Lovable and cookie cutter website AI tools like Relume are more and more mainstream, one must ask “What am I being paid for as a freelance designer/developer?”
I strongly believe unless you are in the top 50% of designers and developers, it’s going to become harder and harder to get work.
But, as it always has been, being the top 1% of professionals in a particular vertical means you are highly employable.
One way to do that is to focus on having a depth in particular skillsets and I can’t help thinking embracing emerging tech and tools like immersive 3D websites helps you more easily get in to a top 1% spot.
Which brings me on to this week’s content - an intro to Peach Worlds.
3D Website Builder: PeachWeb
PeachWeb is an innovative 3D website builder that allows users to create immersive digital experiences seamlessly.
Unlike traditional website builders that rely on static, two-dimensional layouts, Peach Web is built from the ground up to support interactive, visually rich 3D content.
It offers an easy-to-use interface, fast loading times, and compatibility with mobile devices, making it a game-changer in the web development space.
Key Advantages of Peach Web
1. Ultra-Fast Loading Times
One of Peach Web’ standout features is its incredible speed. Unlike other 3D tools that aren't optimized for web usage, Peach Worlds ensures smooth, lag-free performance on all devices.
2. Mobile-First Approach
While many 3D website experiences struggle on mobile, Peach Web is designed with mobile responsiveness in mind, ensuring optimal performance across devices.
3. Seamless 3D Interactions
From interactive product showcases to engaging storytelling, Peach Web allows for scroll-based animations, interactive elements, and stunning visual effects.
4. Beginner-Friendly UI
Unlike Three.js or Unity, which require coding, Peach Web offers a no-code/low-code solution with an intuitive interface.
5. Expanding Library of Templates
Users can remix existing templates, reducing the time and effort needed to create stunning 3D websites.
Weirdly, a common question I get is about 3D blobs.
Here’s a guide to do this using Spline:
1) Getting Started with Spline
To begin, open Spline and create a new file. By default, Spline gives you a square object—let’s delete that and start fresh:
Click the plus (+) icon and select Sphere from the menu.
Drag out a large sphere on the canvas.
Adjust the background color to make the sphere stand out. For this tutorial, we’ll use a bright purple background.
2) Adding Layers for a Dynamic Look
Now that we have a sphere, let’s apply different effects to make it look more organic and fluid:Step 1: Add a Displacement Layer
Click plus (+) and select Displacement Layer.
Set the scale to 20 and movement to 10 to create an organic shape.
3) Add a Noise Layer
Select Noise Layer and choose Simplex Fractal.
Adjust the noise settings to 20 for a subtle texture.
Change the darker areas to lavender and set the blend mode to overlay for a glowing effect.
3) Apply a Fresnel Layer
Fresnel layers add a subtle light reflection.
Apply one with a slightly darker color to create a shimmery effect.
4) Introduce a Rainbow Layer
Add a Rainbow Layer to enhance the shimmer.
Adjust the intensity to 20 and movement to 20.
Set the blend mode to overlay for a natural, glowing effect.
At this point, our blob is looking smooth and fluid, but we need to animate it for an even more dynamic look.
Animating the 3D Blob
5) Define Object States
Select the blob and navigate to the States panel.
Click plus (+) to add a new state.
In the Base State, set:
Scale to 10
Movement to 5
In the State, set:
Scale to 30
Movement to 10
6) Create a Looping Animation
Add an Event with a 5-second transition time.
Set the easing function to Cycle Ping Pong to animate back and forth.
Enable Loop Infinitely to ensure continuous animation.
This creates a ripple-like motion, making the blob expand and contract smoothly.Step 3: Fine-Tune the Effect
If the shape is too sharp, change the Noise Type to Perlin for a softer look.
Adjust the scale and movement settings until you achieve the desired fluidity.
7) Adding an Iridescent Effect (Optional)
For an even shinier and futuristic look, we can overlay a Matcap texture:
Change the background color to near-black for contrast.
Add a Matcap Layer by clicking plus (+) and selecting Matcap.
Use an iridescent material from a Matcaps bundle to give the blob a glowing, metallic effect.
Change the blend mode to Overlay to integrate the Matcap with the existing textures.
Now, your 3D blob has a high-quality shimmer effect, perfect for adding a futuristic feel to your design.Exporting Your AnimationWant to use your animated blob on a website? You can export it as a GIF or video:
Go to Video Recording settings.
Set Fixed Duration to 5 seconds.
Record and export your animation.
That’s a wrap for this week!
Next week, I’ll focus on optimising 3D assets for the web using a model I’m working on currently.
As always, any questions, let me know!
Jack
Thanks for reading SplineTime3D! Subscribe for free to receive new posts and support my work.
