Replicating the Interweave Shape Animation with Three.js

A coding tutorial on how to reconstruct the shape animation from the website of INTERWEAVE using Three.js.

By Yuri Artiukh in Videos on

In this new ALL YOUR HTML coding session you’ll learn how to reconstruct the beautiful shape animation from the website of INTERWEAVE agency with Three.js. We’ll be calculating tangents and bitangents and use Physical materials to make a beautiful object.

Original website: https://interweaveagency.com/

This coding session was streamed live on March 20, 2022.

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.

Animate Anything Along an SVG Path

Exploration of On-Scroll Layout Formations

Rotating Loading Animation of 3D Shapes with Three.js

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!