B3 career

We’re sharing the implementation of a rather complex landing page for “B3 Career”. A couple of years ago, for our main site, we developed the “B3 Hunting” page — also not a simple project: it includes 3 real-time scenes, a WebGL photo gallery application, several frontend motion components, and the most interesting part — all this accomplished in Webflow. Based on the realisation level of the current version, the second version was intended to be technologically stronger at least on one and a half updates.

The main feature of the landing page is our custom web application, Videopoints — a particle visualization using a special video format generated with neural networks that produce visual depth from a flat image. From a static “flat” video, we can easily create a pseudo-3D, and most importantly — interactive scene.

On top of the particle system, a text morphing visualization runs: when words change, the characters smoothly animate into the characters of the next word. For this, we developed an app-builder in wich everything can be configured, including visual compensation for spacing using kerning adjustments.

For the main part of the landing page, we developed several WebGL applications for various visualizations:

Videoapp — an interactive video sphere featuring all our design portfolio projects.
Particle system visualization app: fully configurable, with cursor tracking mode or autonomous activity mode for touch devices.
Text ribbon visualization app: also fully configurable, with quite unexpected side effects on ribbon geometry and interesting material implementation.
Finally, a real-time application — a classic live-background and its corresponding app-builder. In the landing page, this app runs in the background of the first section after the particle intro.