Codrops
  • All Posts
  • Demos Hub
  • Webzibition
  • The Collective

3dglassreflectionrefractionshapethree-jswebgl

Real-time Multiside Refraction in Three Steps

In Tutorials, Oct 29, 2019 by Jesper Vos

In this tutorial you will learn how to make objects appear glass-like in three steps using Three.js.

distortiongsaphoverslideshowthree-jswebgl

Making Gooey Image Hover Effects with Three.js

In Tutorials, Oct 23, 2019 by Arno Di Nunzio

Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader.

distortionglslgsaphovermotion-trailthree-jswebgl

How to Create Motion Hover Effects with Image Distortions using Three.js

In Tutorials, Oct 21, 2019 by Niccolò Miranda

In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.

demoinspirationroundup

Awesome Demos Roundup #9

In Demos Roundups, Oct 17, 2019 by Manoela Ilic

A collection of creative coding experiments and innovative demos for your inspiration.

3dcase-studyhoverportfoliothree-jswebgl

Case Study: Chang Liu Portfolio V4

In Articles, Oct 16, 2019 by Chang Liu

Get insight on how to add 3D to a website using Three.js and make a wavy distortion effect in this case study of Chang Liu’s new portfolio.

3dmixamothree-jswebgl

How to Create an Interactive 3D Character with Three.js

In Tutorials, Oct 14, 2019 by Kyle Wetton

In this in-depth tutorial you will learn how to create an interactive 3D character that follows the mouse and performs random animations on click.

three-jstypographywebgl

Create Text in Three.js with Three-bmfont-text

In Tutorials, Oct 10, 2019 by Mario Carrillo

A short tutorial on how to create animated text in Three.js with three-bmfont-text and give it a nice look using shaders.

inspirationroundupwebsite

Inspirational Websites Roundup #9

In Websites Roundups, Oct 9, 2019 by Manoela Ilic

A hand-picked selection of outstanding website designs for your inspiration.

canvasdistortionpostprocessingripplethree-jswebgl

Creating a Water-like Distortion Effect with Three.js

In Tutorials, Oct 8, 2019 by Daniel Velasquez

Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.

3dblurgenerative-artgeometrythree-jswebgl

Simulating Depth of Field with Particles using the Blurry Library

In Tutorials, Oct 1, 2019 by Domenico Bruzzese

Learn how to create a geometrical scene with a depth effect using the Blurry library.

Wix Studio
Seamlessly transform your Figma designs into responsive, business-ready sites with the Figma to Wix Studio plugin.
Readymag
Make designs interactive & publish as websites with Readymag. Transfer anything from Figma to Readymag in 4 clicks with a plugin.
Scrimba
Want to build websites but don’t know where to start? Scrimba's Frontend Developer Career Path is the perfect beginner-friendly course to kickstart your journey! Created with Mozilla MDN, it teaches you modern web development skills step by step. Codrops readers get 20% off Pro plans!
Explore the site
  • Home
  • Articles
  • Tutorials
  • Playground
  • Demos Hub
  • Webzibition
  • The Collective
  • CSS Reference
  • Freebies
  • About
  • Get in touch
  • Advertise
  • Privacy Policy
  • License
Follow Codrops
  • GitHub
  • Bluesky
  • Instagram
  • Facebook
  • Telegram
  • Mastodon
  • X
  • RSS Feed
  • Proudly hosted by Liquid Web hosting Liquid Web logo
  • Content delivered by
  • © Codrops 2025
Support us on Patreon logo