ValiCred — Kinetic 3D Particle Morphing & WebGL Lore Scroller

Showcase
, , , ,
1

Hi everyone,

I’d love to share a recent interactive 3D project built with Three.js: ValiCred.

:glowing_star: Live Demo:

Link: https://www.valicred.com.au/lore
(Also integrated across the Homepage and Core Services)

:hammer_and_wrench: Three.js & Technical Highlights:

  • Procedural Particle Morphing: Over 3,400 individual particles morphing across 12 distinct mythic shapes (Hermes wings, Zeus lightning bolt, Athena Aegis eye, Hephaestus anvil, real-time physical clock hands, and Stargate).
  • GPU-Accelerated Performance: Built using THREE.BufferGeometry with custom float attributes for positions and vertex colors, achieving 60fps with zero layout shifts on mobile and desktop.
  • Scroll Synchronization: Integrated with GSAP ScrollTrigger to seamlessly transition geometry targets and rich color palettes as the user scrolls through the narrative acts.
  • Interactive Stardust & Canvas: WebGL particle field paired with WebAudio procedural synthesis and an interactive SVG mascot.

Would love to hear any feedback on performance, particle behavior, or visual optimizations!

1 Like
2

The particles flow fine on a low-end laptop, although the fan got noisy.

It was hard to enjoy the visuals, especially the morphing between various configurations, because of the foreground panels. I had to zoom the page to 20%, so the panels get small:

image
image1919×917 183 KB
image
image1919×922 117 KB

3

Thanks for taking the time to test it out and share your feedback, Pavel!

Really glad to hear the particle simulation runs smoothly on lower-end hardware. We’re currently working on further optimizing the vertex calculations and render loop to bring down CPU/GPU overhead so it doesn’t spin up cooling fans as much.

Great catch on the foreground cards obscuring the shape transitions. Based on your note, we’ve updated the layout logic so the scaling and spacing between the frosted glass panels and the canvas dynamically adjust to the user’s viewport. This opens up significantly more negative space around the particle clusters so the morphing animations are much clearer and easier to enjoy without needing to zoom out.

Appreciate the valuable feedback

1 Like