The team at Matter approached me in their stealth phase about building a pre-launch landing page to start generating buzz and collecting a mailing list. After our initial build phase, I stayed on with Matter for a few months implementing a phase 2, which featured more content and some really cool data visualization pieces.
For now, this study concerns the work for the pre-launch version of the site. I’ll update this when I’ve got a compelling writeup for the phase two buildout and the dataviz work.
Pre-launch: A trillion stars in the sky
In the first phase, I worked primarily with the killer product designer Mike Barton to implement his vision for a long-scroll narrative-style page. Users would scroll through a simple cryptic breakdown of Matter’s value proposition, and convert to sign up for updates as Matter entered their beta stage and eventually went live.
There was this tremendous particle animation the team had worked with a 3D designer to implement in the Matter app on-boarding, and Mike and I encouraged each other to push limits and see if we could get it working in a browser WebGL context. We would use THREE.js for most of the GL work on this project in the interest of rapid prototyping and maintainability, and use GSAP as our animation library, to keep things lightweight and easy to author and adjust.
I found this two be three distinct challenges. The first: to convert the 3D geometry of each 3D model into a points system, secondly, the creation of a semi-organic hexagonal particle simulator, and the third: tying it all together in a clean scrolling animation.
Geometry into particles
I converted the .OBJ models of the globe, brain, and molecules into gl.POINTS, and then built scenes for each phase of the narrative to keep things modular. The stars animation at the start is also gl.POINTS, but is procedurally-generated, instead of loaded from a .OBJ file. With lyrical, experiential design like this, it’s a good idea to stay loose. Expecting the project to look the same at its advent as it does at its launch enables bad habits of writing code inflexibly, and that in turn makes us resistant to new ideas. I keep it in small modular chunks, so when we want to try something totally wild and new, it doesn’t eat my whole day refactoring.
Integrating a particle simulator engine
In rendering the hexagonal particle animation, I knew we’d have to do quite a lot of graphical work:
- Particles must spawn along a given hexagonal path
- Particles are hazy in appearance
- Particles are emitted semi-randomly
- Particles are a random size between a given range
- Particles change direction and velocity over time organically,
- Particles change size and opacity over their lifespan to give that heatmap effect
- Particles blend when they overlap other particles
The graphical complexity (size and blurred edges) meant gl.POINTS wouldn’t do for this application, so I turned to a shader-based particle engine in order to create controllable emitters, which would in turn emit controllable particles that operated organically within constraints I created.
The procedural nature of the engine meant it wasn’t possible to bind positions to scroll the way I could with the 3D models (imagine trying to update the lifecycle position of literally 12,000 particles, 60+ times a second), so we elected to have the emitter enabled and disabled depending on scroll position — if the user scrolled past the particle simulation, no new particles would be emitted, and the existing particles would die their natural deaths.
Scrolling and other animations
I mounted each scene on a GSAP timeline, so it would be easy and readable to mount other parts of the page changing, such as the fading-in and -out of text, or adjusting the speed of different simulations.
I also created some lovely minor interactions for forms, etc. throughout the project, to give it that polished and considered feel, that coveted je ne sais quoi.
Conclusion
A few months after this successful launch, Matter brought their app to the general public, and we started a second phase of work to expanding the site to a more useful source of content, marketing materials, and scientific whitepapers.
A note on best practices and progressive enhancement
As with as many of my projects as possible, this project uses accessible HTML markup and observes the user’s prefers-reduced-motion preference, as well as being fully progressively-enhanced: if JavaScript never loads, the page still works perfectly well in a slightly less theatrical form. Users never wait for a large JS payload, and they never have to look at a loader.