10 Cool CodePen Demos

June 2026

• Sand bottle - WebGPU

  • JavaScript
  • WebGPU

  Remember those bottles filled with colored sand that you can find in many souvenir stores? Liam Egan created a digital version using JavaScript WebGPU API. Click to drop sand, use the arrows to tilt and shake the bottles, and relax while enjoying this sandy demo.

  

• Button State Builder

  • JavaScript
  • HTML
  • CSS
  • TailwindCSS

  Margarita shared this button builder that allows to customize a control with icons, text, color, shape... even all the behavior in the different states of the button. Then you can easily get the HTML, CSS, and JS code to put it on any website. Pretty cool.

  

• WebGL Switch Button

  • WebGL
  • JavaScript

  In this demo, the whole page turns into a giant three-dimensional toggle switch that can be activated clicking anywhere on the viewport. Explore the component: mouse over to make the component tilt or scroll to zoom in and out. A nice job by Toc.

  

• Animated radial gradient mask over text

  • CSS
  • HTML

  This demo is exactly what the title says: a radial gradient applied as a mask to some text. Cassidy aligned it perfectly with the hole in the O from "Hello" that makes this effect *chef's kiss*. You will need to uncomment the animation property in CSS to see the demo in action.

  

• 221.

  • ThreeJS
  • JavaScript
  • canvas

  ycw always creates impressive and original content. And this demo delivers. It's not only the effect in itself, but the use of light and shadows, and the perfecto choice of color that adds a timeless atmosphere. Beautiful.

  

• vRLbdoSAIsoSQvisac

  • JavaScript
  • canvas

  Mustafa Enes created different versions of this idea over the past month, all of them are great, but I picked this one as it is more interactive. Click on the screen to regenerate the pattern and move the mouse around to animate the colors. I don't know why, but there's a feeling of peace and joy while doing it.

  

• beach sunset

  • JavaScript
  • canvas
  • React

  I saw several demos by Vivi Tseng that caught my attention this month. Really enjoyed the general minimalistic style they all had and finally picked this animated one because it feels simple and pure, almost like a drawing a child would do during a vacation. I really enjoyed it.

  

• Color Name Wheel

  • JavaScript
  • SVG
  • CSS

  Mixing real CSS color names with invented ones (I'd fight for Tangerine Tango to be included in the specs), David Aerne sorts colors based on hue (angle) and lightness (radius) to create this colorful spinning spiral.

  

• Wiggly/Wavy Range Slider

  • HTML
  • CSS

  Temani Afif always comes with impressive CSS-only components, and this is an example of them. This demo ingeniously combines view transitions with shapes, offsets, and some properties to generate this squiggly component that should be, at least in theory, impossible. Note: this component only looks like this on Chromium.

  

• Fun, animated link effects using paths and GSAP

  • GSAP
  • SVG

  If these colors and effects look familiar, that's because you've probably seen some of Josh Dillon's work with toggles before (and if you haven't, check them out!). Interactive and fun text effects that can be easily created with GSAP.