3d presentation of form page made in Spline

Links:

Full presentation video:

https://x.com/aleksey_kosygin/status/1783896558993277296

About Lorem Labs form

Lorem Labs was a prototype for my first IT agency, designed to handle a big amount of clients. That’s why we created a form page to sort clients into categories like development, design, video editing, and 3D design.

Problems and tasks

After exploring Spline, I decided to experiment with the UI/UX of Lorem Labs’ form and create a beautiful 3D presentation. The idea and the hardest part were filming the promo video with simple camera animations. And yeah, UI/UX design isn't the best possible, it's designed at the end of 2023 (I had low experience).

3D design process

First, I created a 3D scene with an iPhone from the Spline library and added 3D bubbles. I then added UI/UX design as a PNG to the iPhone’s screen.

Making the camera move in Spline was easier than it seemed. I just created a bunch of states with different camera transitions.

Here is how I created fade in effect with just a PNG. Slight rotation + possition change make it look like real click done in 3D by the user.

Some nice shots

Here is what I got as a result of my experiments.

Editing in DaVinci

Created the final video using DaVinci Resolve. I simply cut the clip lengths to match perfect timings and polished the overall look.

Final result

As a final result, I created stunning photos and a presentation video in just a few days of design work. Full presentation video:

https://x.com/aleksey_kosygin/status/1783896558993277296