Prisms, Photos, and Procedural Landscapes

No dark-mode styles — this email renders the same in a dark client.

View this issue on CodePen
Prisms, Photos, and Procedural Landscapes
Our CodePen community highlights include a gorgeous prismatic WebGL2 creation from Liam Egan, a slick scroll-driven photo gallery from Chris Bolson, and a peaceful, procgen mountain landscape from Lea Rosema
Plus, Vanessa Victorino brings us a big yikes, and Sophia Wood shares her complete Mathtober 2026 collection.
sponsor
Workshop: Catch silent AI agent failures
A web app that breaks throws an error. An AI agent that breaks can return a clean, well-formed answer that's wrong — and request-level monitoring scores it as success. AWS experts walk through tracing agent decisions so failures surface early. Register for the workshop on Nov 17.
pen
Prism Currents
"Swirling ribbons of instanced prisms carried by a curl-noise current, simulated on the GPU with WebGL2 transform feedback. Rendered in a deferred pass with outlines, screen-space ambient occlusion and fog. Pick a preset or open Controls to change the flow, container shape, palettes, camera, etc. Built with wtc-gl." From Liam Egan.
sponsor
AI & Design Systems
A course and community from Brad Frost, Ian Frost, and TJ Pitre on using AI to make better design systems and products. 20+ hours of video lessons, a set of AI skills to use on your own system, an active community, and biweekly live jam sessions. Use code SHOPTALKSHOWISAWESOME for 15% off.
collection
CodePen Challenge: Jest Trick or Treat
We wrapped up our Halloween challenge with a spooky twist on a classic interview question. Peruse the collection if you dare! It features Pens by wolfscot , tommyho , Giedr-Ju , and didisoftwares . Ready for your next challenge? November is on now!
pen
YIKES! | But It Glows Like a Red Flag
Vanessa Victorino continues a series of cinematic typographic "unnecessary overreactions" with this big Yikes.
pen
Procedurally generated landscape
Take a trip to a serene scene of "procedurally generated land, using leaNoise + prsdnoise" in this WebGL Pen from Lea Rosema.
video
CodePen WebMCP via the ChatGPT App
The in-app browser inside the ChatGPT app supports WebMCP, a technology that exposes the functionality of websites to AI agents. Watch CodePen co-founder Chris Coyier navigate to CodePen, make a new Pen, adjust the UI, build out new Pens and update existing ones, all from the ChatGPT app. Then see him do it with Claude , too!
pen
Scroll-Driven Photo Gallery
"A CSS-driven photo gallery demonstrating scroll-driven animations and view timelines. As each image enters the viewport from the bottom, it progressively scales up, rotates and increases in opacity. As it moves towards the top of the viewport, it gradually fades out. The effect is implemented entirely with CSS, using animation-timeline and animation-range, alongside scroll snapping for controlled navigation." From Chris Bolson.
collection
ReactiveCSS
Maseone demonstrates Reactive CSS with a terrific collection of Pens, including an interactive bookshelf and a fun "stretch to reveal" effect.
collection
Mathtober2026
Front-end mathmagician Sophia Wood's 2026 edition of Mathtober is complete! Check out all 31 exercises in poetic JavaScript mathematics in Sophia's stunning collection.
CodePen PRO
Invite Someone Else To Edit Your Pen
You can invite someone to be a co-editor of your Pen anytime. All you need to know is their username or email address. This used to be something you could only do on a Team account, but not anymore in CodePen 2.0.
Chris’ Corner
A collection of web design and development news and thoughts from CodePen's own Chris Coyier.
The float property in CSS is old school . CSS developers used to have to think about it all the time, because it was one of the mechanisms we had for building actual layouts like side-by-side columns and stuff. Those days are gone, but it doesn’t mean float as a property is entirely dead. It remains the only property where you can get content to flow around another bit of content. Maureen Holland makes that clear in Floats are dead! Long live floats! Even when you’re using something fancy like shape-outside , to actually get the content to flow around the shaped thing, you gotta float!
Speaking of rather new CSS stuff, I feel like Anchor Positioning almost doesn’t get enough praise. Where it felt like @container queries were gonna be the biggest thing since sliced bread, and then actual usage is maybe more niche, to me, it felt like Anchor Positioning was going to be more niche, and it’s turning out to be super commonly useful. Still, tooltips are the ultimate use case for it, and that’s what Josh Comeau goes for with his wonderful intro, Getting Started with Anchor Positioning .
(Ahmad Shadeed’s detecting overlap idea is an example of getting awfully fancy with what Anchor Positioning can do.)
David Bushell gets down and dirty with some utility CSS to make a full-width (full bleed on the document, if you will) element within a limited-width container: Fixing full-bleed CSS . Logical properties and container units account for some minor bugs in past clever solutions.
There was a blog post on Cory LaViska‘s site “Named breakpoints without Sass” that has disappeared somehow, but there is a kinda weird recap post about it. I was interested, as I was just looking at the status of @custom-media in CSS the other day (the status: bad ). But it’s the kinda thing that feels pretty “easily” processed. I was thinking there is that PostCSS plugin for it, plus it’s probably already covered by postcss-preset-env. But I just asked CodePen AI to have a look:
It actually decided LightningCSS was the way to go, and made a great basic demo .
You can adjust your email preferences any time, or instantly unsubscribe to emails of this kind. Need help with anything? Hit up support . Interested in sponsoring? Here's our sponsorship info .
CodePen 70 SW Century Dr #1019 Bend OR 97702

Accession

nse/codepen/2026-11-02/5956

From

CodePen · support@codepen.io

Sent

2 November 2026 · 23:00 UTC