New loader design for website :

/* From Uiverse.io by SchawnnahJ */ 
.loader {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 transform: rotate(165deg);
}

.loader:before, .loader:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 transform: translate(-50%, -50%);
}

.loader:before {
 animation: before8 2s infinite;
}

.loader:after {
 animation: after6 2s infinite;
}

@keyframes before8 {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }

 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }

 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }

 100% {
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}

@keyframes after6 {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }

 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }

 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }

 100% {
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}

.loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}

Glassphorism card for beginners:

<body style="background: linear-gradient(45deg, #ff9a9e, #fad0c4); height: 100vh;">
  <div style="
    margin: 50px auto;
    width: 300px;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    color: white; font-family: sans-serif;">
    <h2>Glass Card</h2>
    <p>Modern UI design snippet.</p>
  </div>
</body>

Please share your opinion on how the next code should be.

How fast is your internet?

CodePen Blog
425: Debug Logs

As we’re getting close to rounding out the Beta period of the 2.0 editor, we’re trying to close out any bugs we find or users report quickly. They could be browser-support related, network conditions related, account capability related, or just bugs in how the 2.0 editor and technology behind it works. It’s complicated enough that the best way to debug things is to see exactly what the user sees when they have trouble.

A very cool side effect to having built the 2.0 editor with Apollo is that we have a nearly complete look at what is happening in the editor by virtue of the Apollo Cache (we talked about what that is here). We built a tool that can export that as JSON data, and we can load it locally to see exactly what the user sees. It’s a bit fancier than that, doing things like saving browser console error logs and stuff, but that’s the gist of it.

Time Jumps
* 00:00:06 Debug logs
* 00:02:53 How to join the CodePen Discord
* 00:03:56 A super version of it for ourselves
* 00:07:12 What we do with the data logs
* 00:08:55 The importance of supporting versions
* 00:11:45 We can see the debug in a live version of the editor
* 00:14:12 Client side and then adding server side

Advanced M3U8 HLS Player

Premium Image Comparison Slider
Source code: code

CodePen Blog Chris’ Corner: Check It B4 U Wreck It

There is an airport in Bend, Oregon where I live. We’ve got a proper one in Redmond, the next town over, but a little baby municipal one here in Bend. There is a cafe there that I’m only just hearing about: Bend Airport Cafe. Looks nice, I should go!

I’m mentioning it for another reason,though. As soon as I saw that website, I SAW CLAUDE CODE immediately. https://blog.codepen.io/wp-content/uploads/2026/05/claude-1024x411.jpg Tell me I’m not crazy and you’ve seen it too.

This look is everywhere. To my eyes, it’s more prevalent than Bootstrap ever was, Tailwind UI, or even the purple-gradient-text era of crypto and early AI.

I feel like it happened as Anthropic started talking about skills and made their own design skill. The designs coming out of Claude Code are undeniably much nicer, but do look very same-y, like they have some pretty strict prompts baked in that choose between a very limited subset of design choices.

About this particular restaurant website, I feel like it’s quite decent looking and I don’t hate that maybe the design bar for low-end work gets pushed higher because of this, but also HEY EVERYBODY, let’s keep a close watch on all this. These AI slop websites are chockablock with really simple mistakes.

The navigation of the site is mostly jump links like #catering, which work fine when on the homepage. But the “Gallery” page links to /gallery, and when you’re on that page, the jump links don’t work anymore. Even the logo is just a link to #, so when you’re not on the homepage, it doesn’t get you back there.
https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-10.14.13-AM-1024x695.png Now I can’t get back to the homepage from any sub page unless I hand-alter the URL.
I was reading Piccalilli’s in-depth guide to customising lists with CSS and thinking about what a nice touch customized lists are. Oh look, a nice customized list! Nah, just kidding, it’s a totally unsemantic div soup with a bunch of Tailwind classes.

https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-10.14.49-AM-955x1024.png This is so chill to do now on real lists with ::marker.

This is what extra got me going the other day. Then I heard about another restaurant in Bend for the first time: Los Andes. https://blog.codepen.io/wp-content/uploads/2026/05/losandesbend.com_events-777x1024.png I know you can just smell the Claude design skill wafting off that sucker.

It doesn’t just look the same though, it’s full of dumbass simple mistakes. Like the one-field form doesn’t associate the label correctly. https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-12.59.03-PM-1024x564.png The light gray text used isn’t even close to readable, even for someone with strong vision. https://blog.codepen.io/wp-content/uploads/2026/05/CleanShot-2026-05-08-at-12.59.47@2x-1024x640.png There is a little irony to me in that surely Clade Code could help anyone fix these problems so quickly and easily. But either people don’t know they are even problems or don’t care and both of those options are a bummer.

The same-y design choices are such a hilarious tell though. I had it help with a adding design to a Vue Template a while back, and honestly it looks pretty great I think! But it’s 100% that same exact design aesthetic happening here too.

The one-word-is-italic-in-the-header is hilariously common to me, along with the one-button-is-outline-one-is-solid, and the little-tiny all-caps header above headlines. BASK IN IT: https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-1.05.33-PM-1024x734.png The one that gets me the most is how every “card” style element has a dang hover on it though. It’s just everywhere. And it can be a real problem. It means that sometimes it’s an or

e>wrapping the entire contents of a card, meaning a title, copy, image, etc, which is just silly. Seriously, they need to read this.

Lemme leave you with some good articles.

* Dave writes about approaching light/dark styles at a component level, with optional inversion, made quite simple really.
* Eric writes about the infinity keyword in CSS. I love the use case where using it with word-spacing forces one-word-per-line. Clever.
* Roma writes about Responsive Cyclic Margins with some absolutely wacky clamp/max functions in order to get truncation of text happening at the end of text and before an icon. Just try to get that right, Claude.

CodePen Blog
Chris’ Corner: View Transitions

I’ve had View Transitions on the mind a little bit after experimenting with using them to move the focus ring around the page. I found that pretty satisfying, except the part where I was binding events to the tab key myself and keeping track of “focusable” elements. I know better, as that kind of thing is always best left to the browser. I was just checking whether it was possible to animate that focus style from place to place, since it wasn’t really “the same” element (and arguably not an element at all). It is totally possible.

But then I’m glad Kilian Valkhof chimed in with his CSS-only floating focus with anchor positioning, which pulls it off without needing any JavaScript at all. I guess I still proved it can be done with View Transitions, but certainly Kilian’s demo is much cleaner. Jealous! I should have thought of that.

In my own last demo, I noticed something about the CSS styles I was playing with to control the animations. /* movement */ ::view-transition-group(focus-ring) {
} /* resizing */ ::view-transition-old(focus-ring), ::view-transition-new(focus-ring) {
}
I put those comment labels there, as I happen to notice that if you changed the animation-duration on them to exaggerate things, it seemed the view-transition-group was in charge of the moving and the other two were in charge of the morphing of one shape to another. I honestly don’t even get it. I emailed Cyd to see if she can explain it haha, we’ll see if we get that blog post someday.

I do know that you can see the pseduo element tree of View Transitions stuff in the DOM (via Chrome DevTools) as the animations happen. https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-12-at-8.55.57-AM.png That’s nice, as you can click on them and see what’s what.

But notice how they are all children of the element?

Well, ultimately, that’s because we call document.startViewTransition(). Document. That’s . That’s required for now, but is a proposal to be able to call startViewTransition from other elements, meaning it would be “scoped” down to that element. This allows, for one thing, multiple View Transitions to run at once, which is impossible right now. It’s ready for testing, Chrome says.

The part I like the most about scoped view transitions is that that psuedo element tree we looked at above is placed within the element you call it on, and that element might have something like overflow: hidden on it, and it will actually be respected, as Bramus’ demo clearly demonstrates. It’s nice to be able to experiment and understand how these things work. Thanks, CodePen.

Speaking of Bramus, he’s got a View Transitions Toolkit he’s put out. I haven’t played with it yet, but it looks like it’s got some real practical goodies like detecting support and dealing with the fallback structure and auto-naming functions. But the feature I’d probably use the most is the ability to scrub through the animations. I gave it a shot and found it a little complex to set up, relying on some fairly complex helper functions that aren’t a part of the package itself, but I did get a demo working. https://blog.codepen.io/wp-content/uploads/2026/05/scrub-1024x519.png Let me leave you with Some practical examples of view transitions to elevate your UI — a great article by Declan Chidlow showcasing some extremely practical uses of View Transitions you may not have thought of. Animating the re-sorting of a table is pretty cool, as is animating the progress bar of a multi-step form.

Smartphone GPS works offline to determine your location.