From a point-cloud car to HTML navigation — Three.js + WebGL

Showcase
1

Hi everyone! I’m Aleksander from AK-Sites. I’d like to share an interaction we’re building for SSH Rzeczoznawcy, a vehicle appraisal website.

Try the interactive preview — activate the opening scene to see the transition.

The intro starts with a car model we created, rendered as 82,198 points with Three.js. On activation, a subset of those points leaves the car and follows curved paths towards the header lettering. The animation then hands over to the actual HTML logo, navigation and page content.

A few implementation details:

  • The car uses BufferGeometry, THREE.Points and a custom ShaderMaterial.
  • At activation, we project sampled 3D points into screen space and sample the destination text with Canvas using the header’s font and layout.
  • A separate WebGL particle layer calculates cubic Bézier paths on the GPU, then gets removed after the HTML takes over.
  • The transition uses up to 10,000 particles on desktop and 4,200 below 760px, with its pixel ratio capped at 1.5.

I’d appreciate feedback on the handover from particles to HTML, especially on phones: does it feel continuous, and do you notice a hitch at activation or at the end? If so, your device/browser would help us investigate.

This is a work-in-progress client project awaiting owner approval.