# Building an Infinite Loom: Unravelling Images into Threads with Three.js

DevFeed: [Building an Infinite Loom: Unravelling Images into Threads with Three.js](<https://devfeed.tech/articles/building-an-infinite-loom-unravelling-images-into-threads-with-three-js-4339.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/05/building-an-infinite-loom-unravelling-images-into-threads-with-three-js/>)

Author: Clément Grellier

Published: 2026-09-05T12:50:25Z

Content type: tutorial

Language: en

Sources: [Codrops](<https://devfeed.tech/sources/codrops.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [creative-web-experiments](<https://devfeed.tech/tags/creative-web-experiments.md>), [digital-art](<https://devfeed.tech/tags/digital-art.md>), [frontend-animation](<https://devfeed.tech/tags/frontend-animation.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [glsl-shaders](<https://devfeed.tech/tags/glsl-shaders.md>), [gsap](<https://devfeed.tech/tags/gsap.md>), [html](<https://devfeed.tech/tags/html.md>), [image-animation](<https://devfeed.tech/tags/image-animation.md>), [image-distortion](<https://devfeed.tech/tags/image-distortion.md>), [image-effects](<https://devfeed.tech/tags/image-effects.md>), [image-slider](<https://devfeed.tech/tags/image-slider.md>), [images](<https://devfeed.tech/tags/images.md>), [infinite-slider](<https://devfeed.tech/tags/infinite-slider.md>), [interactive-images](<https://devfeed.tech/tags/interactive-images.md>), [interactive-web-design](<https://devfeed.tech/tags/interactive-web-design.md>), [javascript-animation](<https://devfeed.tech/tags/javascript-animation.md>), [marquee](<https://devfeed.tech/tags/marquee.md>), [playground](<https://devfeed.tech/tags/playground.md>), [ribbon-animation](<https://devfeed.tech/tags/ribbon-animation.md>), [shader-effects](<https://devfeed.tech/tags/shader-effects.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [thread-animation](<https://devfeed.tech/tags/thread-animation.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-demo](<https://devfeed.tech/tags/three-js-demo.md>), [three-js-shaders](<https://devfeed.tech/tags/three-js-shaders.md>), [unraveling-effect](<https://devfeed.tech/tags/unraveling-effect.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-animation](<https://devfeed.tech/tags/webgl-animation.md>), [webgl-demo](<https://devfeed.tech/tags/webgl-demo.md>)

## AI overview

A Three.js tutorial for an infinite image strip whose cards are split into independently animated horizontal ribbons. It explains how separate geometry and shaders create weaving, unraveling, gaps, fading, and varied thread motion.

## Source excerpt

An experimental Three.js demo that transforms images into flowing ribbons, weaving them together and unraveling them as they move across the screen.