Select Page

Mobile UI/UX Proof of Concept


I will say, this project was born out of a strange, confusing, and quite frankly stressful time. My job description was very much up in the air, and and there was even uncertainty around this entire project. Unfortunately, this project never saw the light of day, but I have been searching hard drives all over the office to find this one and I finally found it! I just wanted to post it because I still really love the idea, and I will probably try and revisit the concept and try it on a special page here on


The ask for this project was to create a web page that really engaged visitors and explained the concept of baptism along with various beliefs about baptism that were applicable to the church. Admittedly, a largely vague assignment with plenty of room for interpretation. So instead of creating a typical page design with images, I decided to take it up a notch.


The existing site was built on WordPress. The idea was to simulate a water splash in 3D, “freeze” the water in time, create some text blocks in and around the different areas of the splash, and animate a camera to stop at each of the text blocks. Once the splash and camera animation were created and in place, the objects, animations, and materials would then be imported into a ThreeJS scene. Once it’s imported to ThreeJS, the appropriate tweaks would be made to make the render look similar to what I had in Blender, then just animate the camera along a path based on scroll direction. Once that was complete, just paste that code block onto a WordPress page and you’re done!

As you can see from the video above, I was able to simulate the water, block out some dummy text, and get the camera animations in place for a proof of concept. The next step would have been getting approval from the client, but unfortunately, the project was dropped before it could progress to the next stage. However, I’d love to just take this project all the way to completion just to see if it is even possible. In all honesty, this is a workflow I’ve never executed in a real world scenario, but conceptually, I can imagine all the technical bits coming together fairly seamlessly.

Thoughts on Design

Looking back on this rushed design, if I were to reattempt this project, I would probably design a completely vertical experience. This would more closely mimic the actual movement of being baptized, and give opportunities to stop at each stage of submersion and rise for explanatory blocks of text. A vertical design could also have a great opportunity to shine on mobile screens as well.

Emphasis on Flexibility and Ease of Use

The only thing I can anticipate rethinking would be the implementation of the text blocks themselves. “Real” HTML text blocks (“real” as in “easily editable”) would be extremely beneficial here, as it would meet the almost guaranteed need to modify the text later. And when you’re rendering a 3D world, live, right in the view port anyway, it makes sense to just implement live rendered, and easily editable text as opposed to Blender text objects converted to mesh for rendering in the page.

Check out more articles

Create a Custom API Endpoint in WordPress

Creating a custom endpoint in WordPress to check for plugin updates involves several steps. This process includes setting up a custom REST API endpoint, creating a function to handle requests to this endpoint, and ensuring that the response contains the necessary...

Deploy WordPress Updates from a Private Repository

To push code to a private repository and trigger a pending WordPress update badge, you need to follow a systematic approach involving version control, continuous integration/deployment, and the appropriate use of WordPress hooks and filters. Here’s a step-by-step...

How to Generate a Ranger Config File

ranger --copy-config=all This will copy all the default config files from /usr/local/lib so you can make edits without messing anything up. Huge shout out to for explaining this and so much more. Took me a...

First Open Source Contribution

Surprise! I genuinely did not plan on making my first ever open source contribution today. In fact, I didn't plan on a lot of things happening this week at all. I recently got an awesome opportunity to work on a site that is being hosted on a platform called Pantheon,...

How to Exclude Specific Posts and Pages from WP_QUERY

For the sake of having something to work with, let's suppose we've got the following query:In this query, inside the $args array, there's a special parameter that allows you to exclude specific posts and pages from the query. This parameter is called post__not_in and...

Configure SSH For Password-less Connections

Preamble I'm slightly embarrassed to admit this, but it was a long time before I figured out how amazing this little file is and how exactly to put it to good use. The file I'm talking about is the SSH config file. By default, when you first connect to a server via...

WordPress Site Stuck in Maintenance Mode

Plugin Error Code 500 During Update While I was updating a WordPress plugin locally, something happened on my local server to trigger a 500 error code as the plugin was updating. On the frontend, I refreshed the page and was greeted with "Briefly Unavailable for...

Creating a WordPress Plugin Downloader

How it Started I was recently tasked with the challenge of creating a WordPress theme generator. The idea being, instead of writing your style.css file from scratch, you'd be able to just answer a few simple questions about how you'd like your theme set up, and those...

Fix Audio on XFCE Chromebook

The Problem After moving from GalliumOS to Xubuntu, I noticed that playing YouTube videos on both Firefox and Chromium would result in decent playback for a few minutes, but suddenly the audio would turn into a solid beeping tone while the YouTube video displayed the...

Adjust Trackpad Sensitivity XFCE

xinput set-prop "Elan Touchpad" "Synaptics Finger" 1 1 1 What are the values 1 1 1? This sets the sensitivity as close to the original ChromeOS as possible. Larger numbers will decrease sensitivity of various aspects. I never looked into which individual value...

Looking for a place to host your next project or design?

Use this link to get your first 4 months of WP Engine for free: WP Engine – Plans (With 4 months free)