Trending Now
Modular Editorial Design, Scalable Visual Systems for Stronger Brand Identity, TwoPoints.Net

Modular Editorial Design, Scalable Visual Systems for Stronger Brand Identity, TwoPoints.Net

Defy's Apparel Brand Identity, Human-Centered Design That Connects With Real People

Defy’s Apparel Brand Identity, Human-Centered Design That Connects With Real People

How to Build an Infinite Loom, Turn Images into Interactive Thread Art with Three.js

How to Build an Infinite Loom, Turn Images into Interactive Thread Art with Three.js

How to Build an Infinite Loom, Turn Images into Interactive Thread Art with Three.js

How to Build an Infinite Loom, Turn Images into Interactive Thread Art with Three.js

Images unravel into 26 animated ribbons, weaving and fraying across the viewport, a Three.js shader demo that turns photos into threads.

Unwoven: An Infinite Loom of Threads

As a branding content curator, I rarely recommend demos so wholeheartedly. Clément Grellier’s Unwoven unravels photos into an endless woven strip that feels alive. Each card is split into 26 ribbons, each ribbon moves at its own random pace. The result is tactile motion, elegant frays, and whitening that reads like paper becoming light. Technically, it is instructive and compact, using a single HTML file, two shaders, Three.js, and GSAP. You get practical lessons about why separate thread geometry matters, and how to avoid rubbery meshes. Read on for shader snippets and playful levers to tweak the look and feel.

This piece balances craft and code, offering immediate creative payoff for designers. It explains the tear metric, per-thread randomness, edge fading, and whitening with clear rationale. The writeup shows how small knobs like 60.0 plus rnd times 420.0 change the material from comb to hair. You can copy patterns, tune thread counts, and reshape transitions that feel handcrafted. For anyone curating brand motion, or shipping delightful micro interactions, this is a must read. Dive into the demo, inspect the one file build, and borrow ideas to elevate interfaces now.

Read Full Story →

Source: tympanus.net

Previous Post
Search Console AI Reports Go Global, Mueller Explains Recovery Impact for SEOs, SEO Pulse

Search Console AI Reports Go Global, Mueller Explains Recovery Impact for SEOs, SEO Pulse

Next Post
Defy's Apparel Brand Identity, Human-Centered Design That Connects With Real People

Defy’s Apparel Brand Identity, Human-Centered Design That Connects With Real People