Recreating Crosswire’s Reflective Grid with Three.js

Learn how to recreate the reflective grid and energy wave from Crosswire’s website using Three.js.

By Yuri Artiukh in Videos on

In this new ALL YOUR HTML coding session we’ll dissect the reflective grid from Crosswire.io and recreate it with Three.js.

Original: https://crosswire.io/

Agency: https://unseen.co/

This coding session was streamed live on February 12, 2023.

Check out the live demo.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

Yuri Artiukh

Yuriy is a developer from Kyiv, Ukraine. Leading a small frontend agency riverco.de, also speaking at conferences, and open for freelance projects. Curious about CSS and shaders. Loves to learn every day.

three-js webgl

Creating Generative Artwork with Three.js

How to Build a Web Performance Watchdog Agent with Agent.ai

How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.