Dissolving Pixels, Bouncy UI, and Wavy Illusions
View this issue on CodePen
- Product
- CodePen
- Sent from
- codepen.io
- Sent
No dark-mode styles — this email renders the same in a dark client.
View this issue on CodePen Dissolving Pixels, Bouncy UI, and Wavy Illusions This week's CodePen community highlights include a tool for crafting pixel dissolve transitions from Matthew Morete, a bouncy price selector from MyXoToD, and a classic illusion in pure CSS from Amit Sheen. Plus, Jon Kantner brings us a Bauhaus-style gradient clock, and Mustafa Enes plays with Zdog. sponsor Workshop: Promote AI agents on evidence How do we know a new AI agent version is better, or when to roll it back? One pipeline promotes models, prompts, tools, and knowledge bases. The evidence: evaluation gates at each promotion point with criteria set up front. AWS experts demonstrate how it gets built. pen Pixel Dissolve Mask Generator Try Matthew Morete's tool to "generate a tiny PNG sprite, wrapped in a SVG with image-rendering:pixelated , for a view-transition mask". Set your parameters, then press the "preview transition" button to see the full-size dissolve. pen Wavy Illusion Amit Sheen brings us a classic mindbender, the wavy line illusion, with pure CSS. Here, fluttering lines attached to the top and bottom of static lines makes them look like they're changing length. pen CSS Moon Marco Biedermann summons a lunar eclipse in just 46 lines of CSS 🌑 podcast CodePen Radio #440: In-App Notifications That Like You Chris and Rach are on the podcast to talk about our brand-new in-app notification system. We’re actively trying to balance a system that isn’t annoying, but allows us to show information to specific users when we think that’s valuable for both you and us. pen Gradient Clock Jon Kantner builds a shadowy clock with a Bauhaus vibe using gradient-filled clip-path: polygon shapes. pen CodePen Challenge: Lines & Bars Week 3 of our Charts & Graphs challenge was all about lines & bars. Check out the collection, including Pens by grauconejo13 , devpec , grantjenkins , and ol-ivier . Want to get in on September's challenge? The final week is on now ! pen Zdog omg.lol dancing in the sky Mustafa Enes recreates the omg.lol heart mascot with good ol' Zdog , the trusty pseudo-3D engine from Dave DeSandro. pen CSS anchor navigation with spring-easing glow A little glowing sprite follows your cursor and settles at the edge of the nav item you hover thanks to CSS anchor positioning and linear() in this Pen from Lionel Péramo. pen Bouncy Price Selector Flip the monthly to yearly toggle and watch the numbers shuffle and bounce in this Pen from MyXoToD. Try it out in light or dark mode using the controls in the top right. CodePen PRO Instant Updating Previews on Unlimited Browsers/Devices Testing something? Just open the preview URL in any other browser on any other device, and it'll stay up to date as you code from the Pen you're working on (if you're PRO). Watch a video or read the docs — but there isn't much to know; it just works. Chris’ Corner A collection of web design and development news and thoughts from CodePen's own Chris Coyier. Sweet Typography Choosing beautiful and unusual fonts and implementing them in visually compelling ways is certainly a way to stand out in this period of so many websites looking same-y. I figure it’s a good week to send some sweet typography links I’ve saved (in the form of screenshots): Notable to me: Apple has a dedicated icons app . I played with the beta to see if I could get it to spit out SVGs, and it said it would but didn’t; I’m told the non-beta does, which is cool. 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-09-30/2948
- From
- CodePen · support@codepen.io
- Sent
- 30 September 2026 · 18:00 UTC









