# Codrops

Fueling web creativity since 2009

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Making the Internet a Bit Less Sh\*t: Inside Resn's Digital Experiences

DevFeed: [Making the Internet a Bit Less Sh\*t: Inside Resn's Digital Experiences](<https://devfeed.tech/articles/making-the-internet-a-bit-less-sh-t-inside-resn-s-digital-experiences-17373.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/14/inside-resns-digital-experiences/>)

Author: resn

Published: 2026-09-14T11:30:10Z

Content type: article

Language: en

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

Topics: [Web](<https://devfeed.tech/topics/web.md>), [Internet](<https://devfeed.tech/topics/internet.md>)

Tags: [articles](<https://devfeed.tech/tags/articles.md>), [brand-experiences](<https://devfeed.tech/tags/brand-experiences.md>), [breakthrough-energy](<https://devfeed.tech/tags/breakthrough-energy.md>), [collaboration](<https://devfeed.tech/tags/collaboration.md>), [creative-studio](<https://devfeed.tech/tags/creative-studio.md>), [creative-technology](<https://devfeed.tech/tags/creative-technology.md>), [digital-experiences](<https://devfeed.tech/tags/digital-experiences.md>), [global](<https://devfeed.tech/tags/global.md>), [interactive-websites](<https://devfeed.tech/tags/interactive-websites.md>), [internet](<https://devfeed.tech/tags/internet.md>), [projects](<https://devfeed.tech/tags/projects.md>), [remote](<https://devfeed.tech/tags/remote.md>), [resn](<https://devfeed.tech/tags/resn.md>), [savor](<https://devfeed.tech/tags/savor.md>), [squarespace-foundations](<https://devfeed.tech/tags/squarespace-foundations.md>), [studio-agency-spotlight](<https://devfeed.tech/tags/studio-agency-spotlight.md>), [technology](<https://devfeed.tech/tags/technology.md>), [tracing-art](<https://devfeed.tech/tags/tracing-art.md>), [web](<https://devfeed.tech/tags/web.md>), [web-design](<https://devfeed.tech/tags/web-design.md>), [work](<https://devfeed.tech/tags/work.md>)

### AI overview

Resn is a boutique creative studio founded in 2004 that creates brand, content, and digital experiences for global brands and emerging innovators. The article introduces the studio's remote, international team, history, creative approach, and selected recent work, including an interactive online experience for Squarespace's brand guidelines.

### Source excerpt

A look at how Resn combines brand, content, technology and a healthy disregard for boring websites to create digital experiences people actually want to explore.

## Building Depth: Designing and Developing a 3D Renderer Inside Figma

DevFeed: [Building Depth: Designing and Developing a 3D Renderer Inside Figma](<https://devfeed.tech/articles/building-depth-designing-and-developing-a-3d-renderer-inside-figma-8995.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/13/building-depth-designing-and-developing-a-3d-renderer-inside-figma/>)

Author: Aleksei Kipin

Published: 2026-09-13T11:34:39Z

Content type: article

Language: en

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

Topics: [Figma 3D renderer](<https://devfeed.tech/topics/figma-3d-renderer.md>), [Figma](<https://devfeed.tech/topics/figma.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [3d-design](<https://devfeed.tech/tags/3d-design.md>), [3d-modeling](<https://devfeed.tech/tags/3d-modeling.md>), [3d-renderer-for-figma](<https://devfeed.tech/tags/3d-renderer-for-figma.md>), [3d-rendering](<https://devfeed.tech/tags/3d-rendering.md>), [3d-visualization](<https://devfeed.tech/tags/3d-visualization.md>), [3d-workflow](<https://devfeed.tech/tags/3d-workflow.md>), [articles](<https://devfeed.tech/tags/articles.md>), [case-study](<https://devfeed.tech/tags/case-study.md>), [creative-development](<https://devfeed.tech/tags/creative-development.md>), [depth-3d-renderer](<https://devfeed.tech/tags/depth-3d-renderer.md>), [depth-figma](<https://devfeed.tech/tags/depth-figma.md>), [depth-figma-plugin](<https://devfeed.tech/tags/depth-figma-plugin.md>), [design-engineering](<https://devfeed.tech/tags/design-engineering.md>), [design-tools](<https://devfeed.tech/tags/design-tools.md>), [figma](<https://devfeed.tech/tags/figma.md>), [figma-3d](<https://devfeed.tech/tags/figma-3d.md>), [figma-3d-renderer](<https://devfeed.tech/tags/figma-3d-renderer.md>), [figma-plugin](<https://devfeed.tech/tags/figma-plugin.md>), [figma-plugin-design](<https://devfeed.tech/tags/figma-plugin-design.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [plugin-development](<https://devfeed.tech/tags/plugin-development.md>), [product-design](<https://devfeed.tech/tags/product-design.md>), [product-design-case-study](<https://devfeed.tech/tags/product-design-case-study.md>), [real-time-rendering](<https://devfeed.tech/tags/real-time-rendering.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [ui-design](<https://devfeed.tech/tags/ui-design.md>), [ux-design](<https://devfeed.tech/tags/ux-design.md>), [visualization](<https://devfeed.tech/tags/visualization.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

### AI overview

An article about building Depth, a Figma plugin for quickly rendering 3D models during design work. It describes the workflow, plugin architecture, rendering behavior, and export approach.

### Source excerpt

A look at how Depth came together, from building a 3D renderer inside Figma to designing a website that explores what it can do.

## Yestalgia: Bringing Decathlon's '90s Spirit to Life Through a Playful Digital Experience

DevFeed: [Yestalgia: Bringing Decathlon's '90s Spirit to Life Through a Playful Digital Experience](<https://devfeed.tech/articles/yestalgia-bringing-decathlon-s-90s-spirit-to-life-through-a-playful-digital-experience-4349.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/12/yestalgia-bringing-decathlons-90s-spirit-to-life-through-a-playful-digital-experience/>)

Author: Quentin Hocdé and Jonathan Da Costa

Published: 2026-09-12T08:40:31Z

Content type: article

Language: en

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

Topics: [micro-interactions for websites](<https://devfeed.tech/topics/micro-interactions-for-websites.md>)

Tags: [90s-inspired-design](<https://devfeed.tech/tags/90s-inspired-design.md>), [90s-web-design](<https://devfeed.tech/tags/90s-web-design.md>), [animation](<https://devfeed.tech/tags/animation.md>), [articles](<https://devfeed.tech/tags/articles.md>), [case-study](<https://devfeed.tech/tags/case-study.md>), [creative-development](<https://devfeed.tech/tags/creative-development.md>), [creative-technology](<https://devfeed.tech/tags/creative-technology.md>), [creative-web-design](<https://devfeed.tech/tags/creative-web-design.md>), [decathlon-digital-experience](<https://devfeed.tech/tags/decathlon-digital-experience.md>), [decathlon-website](<https://devfeed.tech/tags/decathlon-website.md>), [decathlon-yestalgia](<https://devfeed.tech/tags/decathlon-yestalgia.md>), [design](<https://devfeed.tech/tags/design.md>), [development](<https://devfeed.tech/tags/development.md>), [editorial-web-design](<https://devfeed.tech/tags/editorial-web-design.md>), [experimental-web-design](<https://devfeed.tech/tags/experimental-web-design.md>), [fashion-web-design](<https://devfeed.tech/tags/fashion-web-design.md>), [gsap](<https://devfeed.tech/tags/gsap.md>), [gsap-animation](<https://devfeed.tech/tags/gsap-animation.md>), [illustration](<https://devfeed.tech/tags/illustration.md>), [immersive-web-experience](<https://devfeed.tech/tags/immersive-web-experience.md>), [interactive-storytelling](<https://devfeed.tech/tags/interactive-storytelling.md>), [interactive-website](<https://devfeed.tech/tags/interactive-website.md>), [lenis-smooth-scroll](<https://devfeed.tech/tags/lenis-smooth-scroll.md>), [motion-design](<https://devfeed.tech/tags/motion-design.md>), [nostalgic-web-design](<https://devfeed.tech/tags/nostalgic-web-design.md>), [performance](<https://devfeed.tech/tags/performance.md>), [piecesjs](<https://devfeed.tech/tags/piecesjs.md>), [product](<https://devfeed.tech/tags/product.md>), [product-focused-design](<https://devfeed.tech/tags/product-focused-design.md>), [product-launch](<https://devfeed.tech/tags/product-launch.md>), [rive](<https://devfeed.tech/tags/rive.md>), [rive-animation](<https://devfeed.tech/tags/rive-animation.md>), [typography](<https://devfeed.tech/tags/typography.md>), [walkman-navigation](<https://devfeed.tech/tags/walkman-navigation.md>), [web](<https://devfeed.tech/tags/web.md>), [web-animation](<https://devfeed.tech/tags/web-animation.md>), [wordpress](<https://devfeed.tech/tags/wordpress.md>), [wordpress-custom-theme](<https://devfeed.tech/tags/wordpress-custom-theme.md>), [yestalgia](<https://devfeed.tech/tags/yestalgia.md>)

### AI overview

This article presents Yestalgia, Decathlon's '90s-inspired capsule collection website. It explains how editorial product presentation, vibrant illustration, expressive typography, animation, micro-interactions, and a cassette-player navigation concept turn the campaign's nostalgic art direction into a playful digital experience.

### Source excerpt

A closer look at how Yestalgia brings Decathlon's '90s-inspired vision to the web through art direction, interaction, animation, and creative development.

## Inside the First Three.js Conference in Paris

DevFeed: [Inside the First Three.js Conference in Paris](<https://devfeed.tech/articles/inside-the-first-three-js-conference-in-paris-4348.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/10/inside-the-first-three-js-conference-in-paris/>)

Author: Manoela Ilic

Published: 2026-09-10T08:30:11Z

Content type: news

Language: en

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

Topics: [Three.js community](<https://devfeed.tech/topics/three-js-community.md>), [webgpu](<https://devfeed.tech/topics/webgpu.md>)

Tags: [3d-web-development](<https://devfeed.tech/tags/3d-web-development.md>), [ai](<https://devfeed.tech/tags/ai.md>), [articles](<https://devfeed.tech/tags/articles.md>), [browser](<https://devfeed.tech/tags/browser.md>), [coding](<https://devfeed.tech/tags/coding.md>), [codrops](<https://devfeed.tech/tags/codrops.md>), [community](<https://devfeed.tech/tags/community.md>), [conference](<https://devfeed.tech/tags/conference.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [creative-development](<https://devfeed.tech/tags/creative-development.md>), [creative-technology](<https://devfeed.tech/tags/creative-technology.md>), [creativity](<https://devfeed.tech/tags/creativity.md>), [creators](<https://devfeed.tech/tags/creators.md>), [developers](<https://devfeed.tech/tags/developers.md>), [digital-experiences](<https://devfeed.tech/tags/digital-experiences.md>), [event](<https://devfeed.tech/tags/event.md>), [experiments](<https://devfeed.tech/tags/experiments.md>), [frontend-development](<https://devfeed.tech/tags/frontend-development.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [immersive-web](<https://devfeed.tech/tags/immersive-web.md>), [interactive-web-experiences](<https://devfeed.tech/tags/interactive-web-experiences.md>), [javascript-3d](<https://devfeed.tech/tags/javascript-3d.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-community](<https://devfeed.tech/tags/three-js-community.md>), [three-js-conference](<https://devfeed.tech/tags/three-js-conference.md>), [three-js-conference-paris](<https://devfeed.tech/tags/three-js-conference-paris.md>), [three-js-demos](<https://devfeed.tech/tags/three-js-demos.md>), [three-js-developers](<https://devfeed.tech/tags/three-js-developers.md>), [three-js-projects](<https://devfeed.tech/tags/three-js-projects.md>), [three-js-talks](<https://devfeed.tech/tags/three-js-talks.md>), [three-js-web-development](<https://devfeed.tech/tags/three-js-web-development.md>), [three-js-workshops](<https://devfeed.tech/tags/three-js-workshops.md>), [web-3d](<https://devfeed.tech/tags/web-3d.md>), [web-design](<https://devfeed.tech/tags/web-design.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgpu](<https://devfeed.tech/tags/webgpu.md>)

### AI overview

A live look at the first Three.js Conference in Paris, covering community moments, opening talks, a Zelda rebuild moving from WebGL to WebGPU, and a discussion about AI and coding.

### Source excerpt

A look inside the first-ever Three.js Conference, straight from Paris.

## Turning Names Into Digital Architecture with Three.js

DevFeed: [Turning Names Into Digital Architecture with Three.js](<https://devfeed.tech/articles/turning-names-into-digital-architecture-with-three-js-4347.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/09/turning-names-into-digital-architecture-with-three-js/>)

Author: Serhii Polyvanyi

Published: 2026-09-09T17:55:00Z

Content type: article

Language: en

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

Topics: [Three.js community](<https://devfeed.tech/topics/three-js-community.md>), [Three.js custom shaders](<https://devfeed.tech/topics/three-js-custom-shaders.md>), [Three.js shaders](<https://devfeed.tech/topics/three-js-shaders.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [architecture](<https://devfeed.tech/tags/architecture.md>), [articles](<https://devfeed.tech/tags/articles.md>), [best-free-frontend-development-resources](<https://devfeed.tech/tags/best-free-frontend-development-resources.md>), [best-javascript-libraries-for-animations](<https://devfeed.tech/tags/best-javascript-libraries-for-animations.md>), [best-web-development-blogs](<https://devfeed.tech/tags/best-web-development-blogs.md>), [conference](<https://devfeed.tech/tags/conference.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [creative-ui-ideas-for-web-design](<https://devfeed.tech/tags/creative-ui-ideas-for-web-design.md>), [css-animations](<https://devfeed.tech/tags/css-animations.md>), [css-grid-vs-flexbox](<https://devfeed.tech/tags/css-grid-vs-flexbox.md>), [css-hover-effects](<https://devfeed.tech/tags/css-hover-effects.md>), [css-only-effects](<https://devfeed.tech/tags/css-only-effects.md>), [experiment](<https://devfeed.tech/tags/experiment.md>), [frontend-development](<https://devfeed.tech/tags/frontend-development.md>), [gsap-animation-examples](<https://devfeed.tech/tags/gsap-animation-examples.md>), [how-to-build-a-responsive-website-from-scratch](<https://devfeed.tech/tags/how-to-build-a-responsive-website-from-scratch.md>), [how-to-create-parallax-scrolling-effects](<https://devfeed.tech/tags/how-to-create-parallax-scrolling-effects.md>), [how-to-create-smooth-css-transitions](<https://devfeed.tech/tags/how-to-create-smooth-css-transitions.md>), [how-to-make-a-portfolio-website-interactive](<https://devfeed.tech/tags/how-to-make-a-portfolio-website-interactive.md>), [how-to-optimize-animations-for-performance](<https://devfeed.tech/tags/how-to-optimize-animations-for-performance.md>), [html5-and-css3-tricks](<https://devfeed.tech/tags/html5-and-css3-tricks.md>), [javascript-effects](<https://devfeed.tech/tags/javascript-effects.md>), [javascript-ui-interactions](<https://devfeed.tech/tags/javascript-ui-interactions.md>), [micro-interactions-for-websites](<https://devfeed.tech/tags/micro-interactions-for-websites.md>), [modern-web-development](<https://devfeed.tech/tags/modern-web-development.md>), [react-ui-animations](<https://devfeed.tech/tags/react-ui-animations.md>), [step-by-step-guide-to-webgl-animations](<https://devfeed.tech/tags/step-by-step-guide-to-webgl-animations.md>), [svg-animations-in-css](<https://devfeed.tech/tags/svg-animations-in-css.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-3d-animations](<https://devfeed.tech/tags/three-js-3d-animations.md>), [three-js-conference](<https://devfeed.tech/tags/three-js-conference.md>), [ui-ux-design-tips](<https://devfeed.tech/tags/ui-ux-design-tips.md>), [web-design-tutorials](<https://devfeed.tech/tags/web-design-tutorials.md>), [webgl-tutorials-for-beginners](<https://devfeed.tech/tags/webgl-tutorials-for-beginners.md>), [wordpress-themes-and-plugins](<https://devfeed.tech/tags/wordpress-themes-and-plugins.md>)

### AI overview

An interactive Three.js experiment turns typed names into lightweight, metallic-looking 3D letter structures. It explains contour generation, interpolation and deformation, structural line geometry, and a custom shader with a baked reflection map.

### Source excerpt

For the Three.js Conference in Paris, BL/S® created an interactive experiment that transforms your name into a dynamic 3D structure.

## Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU

DevFeed: [Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU](<https://devfeed.tech/articles/still-from-akira-to-ink-wash-building-a-generative-garden-in-webgpu-4346.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/09/still-from-akira-to-ink-wash-building-a-generative-garden-in-webgpu/>)

Author: Ming Jyun Hung

Published: 2026-09-09T14:11:57Z

Content type: article

Language: en

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

Topics: [webgpu](<https://devfeed.tech/topics/webgpu.md>), [procedural flowers](<https://devfeed.tech/topics/procedural-flowers.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [articles](<https://devfeed.tech/tags/articles.md>), [case-study](<https://devfeed.tech/tags/case-study.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [deep-dive](<https://devfeed.tech/tags/deep-dive.md>), [flower-animation](<https://devfeed.tech/tags/flower-animation.md>), [generative](<https://devfeed.tech/tags/generative.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [generative-garden](<https://devfeed.tech/tags/generative-garden.md>), [generative-tendrils](<https://devfeed.tech/tags/generative-tendrils.md>), [gpu-instancing](<https://devfeed.tech/tags/gpu-instancing.md>), [ink-wash-effect](<https://devfeed.tech/tags/ink-wash-effect.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [japanese-art](<https://devfeed.tech/tags/japanese-art.md>), [japanese-print-style](<https://devfeed.tech/tags/japanese-print-style.md>), [procedural](<https://devfeed.tech/tags/procedural.md>), [procedural-animation](<https://devfeed.tech/tags/procedural-animation.md>), [procedural-art](<https://devfeed.tech/tags/procedural-art.md>), [procedural-flowers](<https://devfeed.tech/tags/procedural-flowers.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [real-time-3d](<https://devfeed.tech/tags/real-time-3d.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-case-study](<https://devfeed.tech/tags/three-js-case-study.md>), [three-js-shading-language](<https://devfeed.tech/tags/three-js-shading-language.md>), [toon-shading](<https://devfeed.tech/tags/toon-shading.md>), [tsl](<https://devfeed.tech/tags/tsl.md>), [tsl-shaders](<https://devfeed.tech/tags/tsl-shaders.md>), [vat](<https://devfeed.tech/tags/vat.md>), [vertex-animation-textures](<https://devfeed.tech/tags/vertex-animation-textures.md>), [webgpu](<https://devfeed.tech/tags/webgpu.md>), [webgpu-shaders](<https://devfeed.tech/tags/webgpu-shaders.md>)

### AI overview

A technical deep dive into a WebGPU-based, real-time 3D generative garden. It describes combining toon shading, ink-wash shadows, silk-like grain, and procedural flowers and tendrils to translate Japanese print-inspired visual principles into an interactive web scene.

### Source excerpt

A technical deep dive into Still, exploring how WebGPU, procedural systems, and Japanese art influences come together to create a living generative garden.

## Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL

DevFeed: [Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL](<https://devfeed.tech/articles/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl-4345.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/>)

Author: Filip Kantedal

Published: 2026-09-08T13:09:48Z

Content type: tutorial

Language: en

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

Topics: [webgpu](<https://devfeed.tech/topics/webgpu.md>), [Three.js custom shaders](<https://devfeed.tech/topics/three-js-custom-shaders.md>), [refraction shader](<https://devfeed.tech/topics/refraction-shader.md>), [signed distance functions](<https://devfeed.tech/topics/signed-distance-functions.md>)

Tags: [3d-web-experiences](<https://devfeed.tech/tags/3d-web-experiences.md>), [chromatic-dispersion](<https://devfeed.tech/tags/chromatic-dispersion.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [custom-shaders](<https://devfeed.tech/tags/custom-shaders.md>), [glass](<https://devfeed.tech/tags/glass.md>), [glass-shader](<https://devfeed.tech/tags/glass-shader.md>), [glassmorphism](<https://devfeed.tech/tags/glassmorphism.md>), [gpu-rendering](<https://devfeed.tech/tags/gpu-rendering.md>), [infinite](<https://devfeed.tech/tags/infinite.md>), [infinite-carousel](<https://devfeed.tech/tags/infinite-carousel.md>), [infinite-grid](<https://devfeed.tech/tags/infinite-grid.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [liquid-glass](<https://devfeed.tech/tags/liquid-glass.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [r3f](<https://devfeed.tech/tags/r3f.md>), [react-three-fiber](<https://devfeed.tech/tags/react-three-fiber.md>), [refraction-shader](<https://devfeed.tech/tags/refraction-shader.md>), [sdf](<https://devfeed.tech/tags/sdf.md>), [shader-effects](<https://devfeed.tech/tags/shader-effects.md>), [signed-distance-functions](<https://devfeed.tech/tags/signed-distance-functions.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-shading-language](<https://devfeed.tech/tags/three-js-shading-language.md>), [three-js-webgpu](<https://devfeed.tech/tags/three-js-webgpu.md>), [tsl](<https://devfeed.tech/tags/tsl.md>), [tsl-shaders](<https://devfeed.tech/tags/tsl-shaders.md>), [tutorials](<https://devfeed.tech/tags/tutorials.md>), [video](<https://devfeed.tech/tags/video.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgpu](<https://devfeed.tech/tags/webgpu.md>), [webgpu-shaders](<https://devfeed.tech/tags/webgpu-shaders.md>)

### AI overview

A tutorial on building an infinite liquid-glass grid in the browser with Three.js, WebGPU, TSL, custom shaders, and video textures.

### Source excerpt

An exploration of infinite grids, liquid glass, and video refraction using Three.js, WebGPU, TSL, and custom shaders.

## Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU

DevFeed: [Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU](<https://devfeed.tech/articles/drawing-with-light-an-exploration-of-lit-gpu-tubes-with-tsl-and-webgpu-4344.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/07/drawing-with-light-an-exploration-of-lit-gpu-tubes-with-tsl-and-webgpu/>)

Author: Mathis Biabiany

Published: 2026-09-07T14:01:56Z

Content type: tutorial

Language: en

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

Topics: [Three.js shaders](<https://devfeed.tech/topics/three-js-shaders.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [creative-coding-webgpu](<https://devfeed.tech/tags/creative-coding-webgpu.md>), [curve-geometry](<https://devfeed.tech/tags/curve-geometry.md>), [generative-art-three-js](<https://devfeed.tech/tags/generative-art-three-js.md>), [gpu-animation](<https://devfeed.tech/tags/gpu-animation.md>), [gpu-generated-geometry](<https://devfeed.tech/tags/gpu-generated-geometry.md>), [gpu-rendering](<https://devfeed.tech/tags/gpu-rendering.md>), [gpu-tubes](<https://devfeed.tech/tags/gpu-tubes.md>), [lit-tubes-three-js](<https://devfeed.tech/tags/lit-tubes-three-js.md>), [meshline-three-js](<https://devfeed.tech/tags/meshline-three-js.md>), [meshline-webgpu](<https://devfeed.tech/tags/meshline-webgpu.md>), [meshstandardnodematerial](<https://devfeed.tech/tags/meshstandardnodematerial.md>), [nodematerial-three-js](<https://devfeed.tech/tags/nodematerial-three-js.md>), [parallel-transport-frames](<https://devfeed.tech/tags/parallel-transport-frames.md>), [pbr-materials-three-js](<https://devfeed.tech/tags/pbr-materials-three-js.md>), [playground](<https://devfeed.tech/tags/playground.md>), [procedural-curves](<https://devfeed.tech/tags/procedural-curves.md>), [procedural-geometry](<https://devfeed.tech/tags/procedural-geometry.md>), [procedural-tubes](<https://devfeed.tech/tags/procedural-tubes.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-shaders](<https://devfeed.tech/tags/three-js-shaders.md>), [three-js-tsl](<https://devfeed.tech/tags/three-js-tsl.md>), [three-js-webgpu](<https://devfeed.tech/tags/three-js-webgpu.md>), [tsl](<https://devfeed.tech/tags/tsl.md>), [tsl-shaders](<https://devfeed.tech/tags/tsl-shaders.md>), [tube-geometry](<https://devfeed.tech/tags/tube-geometry.md>), [tube-renderer](<https://devfeed.tech/tags/tube-renderer.md>), [webgpu](<https://devfeed.tech/tags/webgpu.md>), [webgpu-rendering](<https://devfeed.tech/tags/webgpu-rendering.md>), [webgpu-shaders](<https://devfeed.tech/tags/webgpu-shaders.md>)

### AI overview

A technical exploration of rendering lit GPU tubes with TSL and WebGPU. It contrasts screen-facing meshlines with tube geometry that can receive lighting, shading, and occlusion.

### Source excerpt

How a meshline habit turned into a tube renderer, and the three ways I got the maths wrong along the way.

## Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js

DevFeed: [Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js](<https://devfeed.tech/articles/building-a-real-time-3d-face-mask-with-mediapipe-threlte-and-three-js-4342.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/06/building-a-real-time-3d-face-mask-with-mediapipe-threlte-and-three-js/>)

Author: Marek Jóźwiak

Published: 2026-09-06T13:09:52Z

Content type: tutorial

Language: en

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

Topics: [Three.js webcam](<https://devfeed.tech/topics/three-js-webcam.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [3d-face-mask](<https://devfeed.tech/tags/3d-face-mask.md>), [canonical-face-model](<https://devfeed.tech/tags/canonical-face-model.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [face-landmarks](<https://devfeed.tech/tags/face-landmarks.md>), [face-mesh](<https://devfeed.tech/tags/face-mesh.md>), [face-tracking](<https://devfeed.tech/tags/face-tracking.md>), [facial-landmarks](<https://devfeed.tech/tags/facial-landmarks.md>), [generative-graphics](<https://devfeed.tech/tags/generative-graphics.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [inference](<https://devfeed.tech/tags/inference.md>), [interactive-3d](<https://devfeed.tech/tags/interactive-3d.md>), [javascript-3d](<https://devfeed.tech/tags/javascript-3d.md>), [mediapipe](<https://devfeed.tech/tags/mediapipe.md>), [mediapipe-face-landmarker](<https://devfeed.tech/tags/mediapipe-face-landmarker.md>), [mesh](<https://devfeed.tech/tags/mesh.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [real-time-3d](<https://devfeed.tech/tags/real-time-3d.md>), [real-time-face-tracking](<https://devfeed.tech/tags/real-time-face-tracking.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-face-mask](<https://devfeed.tech/tags/three-js-face-mask.md>), [three-js-webcam](<https://devfeed.tech/tags/three-js-webcam.md>), [threlte](<https://devfeed.tech/tags/threlte.md>), [threlte-three-js](<https://devfeed.tech/tags/threlte-three-js.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [tutorials](<https://devfeed.tech/tags/tutorials.md>), [video](<https://devfeed.tech/tags/video.md>), [vision](<https://devfeed.tech/tags/vision.md>), [wasm](<https://devfeed.tech/tags/wasm.md>), [webcam](<https://devfeed.tech/tags/webcam.md>), [webcam-effects](<https://devfeed.tech/tags/webcam-effects.md>), [webcam-face-tracking](<https://devfeed.tech/tags/webcam-face-tracking.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-face-tracking](<https://devfeed.tech/tags/webgl-face-tracking.md>)

### AI overview

Tutorial on building a real-time textured 3D face mask by mapping MediaPipe face landmarks onto a Three.js mesh with Threlte.

### Source excerpt

Learn how MediaPipe's face landmarks, Google's canonical face model, and Three.js come together to create a real-time textured 3D face mask.

## 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.

## Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js

DevFeed: [Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js](<https://devfeed.tech/articles/beyond-the-luminance-ramp-a-shape-aware-ascii-renderer-in-three-js-4337.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/04/beyond-the-luminance-ramp-a-shape-aware-ascii-renderer-in-three-js/>)

Author: Edoardo Lunardi

Published: 2026-09-04T15:01:38Z

Content type: tutorial

Language: en

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

Topics: [shape-aware rendering](<https://devfeed.tech/topics/shape-aware-rendering.md>), [ASCII art shader](<https://devfeed.tech/topics/ascii-art-shader.md>), [Three.js shaders](<https://devfeed.tech/topics/three-js-shaders.md>), [Three.js custom shaders](<https://devfeed.tech/topics/three-js-custom-shaders.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [ascii](<https://devfeed.tech/tags/ascii.md>), [ascii-art-shader](<https://devfeed.tech/tags/ascii-art-shader.md>), [ascii-dithering](<https://devfeed.tech/tags/ascii-dithering.md>), [ascii-shader](<https://devfeed.tech/tags/ascii-shader.md>), [atlas](<https://devfeed.tech/tags/atlas.md>), [browser-based-ascii-renderer](<https://devfeed.tech/tags/browser-based-ascii-renderer.md>), [creative-coding-three-js](<https://devfeed.tech/tags/creative-coding-three-js.md>), [custom-element-webgl](<https://devfeed.tech/tags/custom-element-webgl.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [draggable-3d-logo](<https://devfeed.tech/tags/draggable-3d-logo.md>), [glsl-ascii-shader](<https://devfeed.tech/tags/glsl-ascii-shader.md>), [glyph-atlas-rendering](<https://devfeed.tech/tags/glyph-atlas-rendering.md>), [glyph-matching-algorithm](<https://devfeed.tech/tags/glyph-matching-algorithm.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [gpu-ascii-rendering](<https://devfeed.tech/tags/gpu-ascii-rendering.md>), [gpu-glyph-search](<https://devfeed.tech/tags/gpu-glyph-search.md>), [interactive-ascii-art](<https://devfeed.tech/tags/interactive-ascii-art.md>), [luminance-ramp-alternative](<https://devfeed.tech/tags/luminance-ramp-alternative.md>), [procedural-ascii-art](<https://devfeed.tech/tags/procedural-ascii-art.md>), [real-time-ascii-rendering](<https://devfeed.tech/tags/real-time-ascii-rendering.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [shape-aware-ascii-renderer](<https://devfeed.tech/tags/shape-aware-ascii-renderer.md>), [shape-aware-rendering](<https://devfeed.tech/tags/shape-aware-rendering.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [three-js-ascii-renderer](<https://devfeed.tech/tags/three-js-ascii-renderer.md>), [three-js-custom-shaders](<https://devfeed.tech/tags/three-js-custom-shaders.md>), [three-js-shader-tutorial](<https://devfeed.tech/tags/three-js-shader-tutorial.md>), [three-js-webgl](<https://devfeed.tech/tags/three-js-webgl.md>), [tutorials](<https://devfeed.tech/tags/tutorials.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-ascii-art](<https://devfeed.tech/tags/webgl-ascii-art.md>), [webgl-post-processing](<https://devfeed.tech/tags/webgl-post-processing.md>), [webgl-shader-tutorial](<https://devfeed.tech/tags/webgl-shader-tutorial.md>)

### AI overview

A Three.js ASCII renderer improves on luminance-only glyph selection by sampling each character cell's shape and matching it against printable glyphs on the GPU.

### Source excerpt

The Codrops mark, rebuilt as a draggable solid and printed in ASCII on the GPU, where every character cell searches 95 glyphs for its own.

## From Rays to Meshes: Building Vercel's Prism with vgpu

DevFeed: [From Rays to Meshes: Building Vercel's Prism with vgpu](<https://devfeed.tech/articles/from-rays-to-meshes-building-vercel-s-prism-with-vgpu-4334.md>)

Original publisher: [Read original article](<https://tympanus.net/codrops/2026/09/03/from-rays-to-meshes-building-vercels-prism-with-vgpu/>)

Author: Matias Gonzalez Fernandez

Published: 2026-09-03T16:01:06Z

Content type: tutorial

Language: en

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

Topics: [GPU](<https://devfeed.tech/topics/gpu.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [3d-graphics](<https://devfeed.tech/tags/3d-graphics.md>), [adaptive-rendering](<https://devfeed.tech/tags/adaptive-rendering.md>), [articles](<https://devfeed.tech/tags/articles.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [glass](<https://devfeed.tech/tags/glass.md>), [glass-shader](<https://devfeed.tech/tags/glass-shader.md>), [glsl](<https://devfeed.tech/tags/glsl.md>), [glsl-shaders](<https://devfeed.tech/tags/glsl-shaders.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [gpu-optimization](<https://devfeed.tech/tags/gpu-optimization.md>), [gpu-rendering](<https://devfeed.tech/tags/gpu-rendering.md>), [interactive-web-graphics](<https://devfeed.tech/tags/interactive-web-graphics.md>), [javascript-graphics](<https://devfeed.tech/tags/javascript-graphics.md>), [light-refraction](<https://devfeed.tech/tags/light-refraction.md>), [mesh](<https://devfeed.tech/tags/mesh.md>), [prism-shader](<https://devfeed.tech/tags/prism-shader.md>), [ray-tracing](<https://devfeed.tech/tags/ray-tracing.md>), [real-time-rendering](<https://devfeed.tech/tags/real-time-rendering.md>), [real-time-shaders](<https://devfeed.tech/tags/real-time-shaders.md>), [shader-performance](<https://devfeed.tech/tags/shader-performance.md>), [shader-programming](<https://devfeed.tech/tags/shader-programming.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [vercel](<https://devfeed.tech/tags/vercel.md>), [vercel-prism](<https://devfeed.tech/tags/vercel-prism.md>), [vercel-vgpu](<https://devfeed.tech/tags/vercel-vgpu.md>), [vgpu](<https://devfeed.tech/tags/vgpu.md>), [web-graphics](<https://devfeed.tech/tags/web-graphics.md>), [web-shaders](<https://devfeed.tech/tags/web-shaders.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-shaders](<https://devfeed.tech/tags/webgl-shaders.md>)

### AI overview

A tutorial on creating Vercel's prism visual with vgpu shaders. It replaces costly ray-based light simulation with refracted paths connected into a 3D mesh, then adds an environment-mapped glass shader, bloom, and particles.

### Source excerpt

A look at how Vercel's vgpu creates a performant prism effect using shaders, geometry, glass, and adaptive rendering.