Web3 Social Platform Marketing Website Design & Build

Project Type: Web Design

Client: Calaxy

Location: Los Angeles

Input: Google Docs (Rough Concepts)

Deliverables: Framer Site

This Calaxy blockchain social platform marketing website is the most ambitious project I've ever worked on and shipped solo. It was built in Framer and took just over 3 months to complete. It's home to a rich set of feature pages that showcase the entire Calaxy platform, a full learning center with more than 75 help articles, a blog, feature roadmap, light & dark mode, and makes use of some really cool webGL and 3D technology powered by Unicorn Studio and Spline 3D.

The site achieved a 55% sign up conversion rate in the first 2 weeks going live, onboarding 11,000+ new users to the Calaxy platform.

Build time: 3 months

Sitemap: 21 pages

Help Articles: 72

Blog Posts: 61

Press Items: 570

Formats: Desktop / Tablet / Mobile

Theming: Light & Dark Mode

Language: English (more coming soon)

Built with: Framer

Dot Pixel FX: Unicorn Studio

3D Scenes: Spline

Product Videos: Protopie, After Effects, Final Cut Pro

CMS Collections: 3 (Help Docs, Blog, Press)

For the home page hero, I wanted to recreate the iOS unlock effect where your home screen icons cascade into place in a beautifully timed choreography. This took a lot of careful timing using @framer's "Appear" effect on the hero text and surrounding avatars because it was super important that we didn't lose the legibility of our main message ("Build Your Forever Audience") with all the animations.

If you look closely, the choreography is setup to lead your eye through the hero text first starting with "Build Your" then "Forever" and finally "Audience." With those text layers in place + the surrounding avatars, there is a slight 1 sec pause before the remaining elements slide in below and above (How it works, CTA buttons, announcement badge, and lastly the main nav). All told the entire loading sequence is 6 seconds.

The "Forever" hero text dot pixel FX was done in @hiunicornstudio. Custom particle system powers the interactive star field (the stars slowly gravitate to your pointer position, and the star field perspective changes ever so subtly as you move your mouse around on the page) - I have 3 shooting stars made of small white line layers that start out off canvas rotated at different angles that shoot across to another point off canvas at random times on a loop effect.

Given this hero scene is in space, I wanted the surrounding avatar elements to "float" in low gravity mode. For this I used Framer's loop effect that slowly oscillates the layer's y position. I then offset the delay of each element randomly to stagger the floating loop so each avatar floats independently/randomly.

The final major treatment for this hero scene was the scroll animations on the avatars. I wanted to create a bit of a warp speed effect when you scroll down, as if the avatars were being pulled or sucked into a worm hole as you scroll down below this hero fold. To accomplish this, I applied @framer's scroll transform affect set to "section in view" on each of the floating avatars, and set the "scroll to" position of the upper avatars to be much, much further away on the y-axis than the "scroll to" position of the lower avatars. (eg. -1700px on upper most avatars vs. -600px on lowest positioned avatars).

This effectively causes the upper avatars to slide up off the hero canvas with much greater velocity than the lower positioned avatars. And when you scroll back up to the hero section, the inverse happens where the lower positioned avatars "arrive back in place" from up above the hero canvas before the upper avatars come back into the scene and settle in place.

Overall I wanted this hero section to feel alive. The floating avatars, particle system with very subtle star movements, and the Caustics effect on the "Forever" text all sort of move at the pace of slow breathing - which is a great pace to create a sense of life and comfort in your scene.

For the learning center, I built out a custom relational CMS sidebar menu that displays top level category articles, as well as sub-category articles via accordion drop down menus. The mobile version is a completely separate system that lives within a sticky top bar that is affixed to the site's main mobile menu.

My favourite part of the learning center design is the multi-hue reading progress bar that works its way laterally across the bottom of the main nav as you read through an article. This was accomplished using Framer's scroll transition effect that expands and retracts the width of a 2px high frame as you scroll up and down through each article.