[CodePen Spark] Custom Inputs, Bubbly Text, and Fluid Cards

0 views
Skip to first unread message

CodePen

unread,
Jun 22, 2026, 2:48:28 PM (10 days ago) Jun 22
to recibir-c...@googlegroups.com

Custom Inputs, Bubbly Text, and Fluid Cards

This special edition of The CodePen Spark is sponsored by AWS Marketplace. Download the new Forrester Consulting study commissioned by AWS Marketplace to learn how AI-powered DevOps starts with better workflows.

This week's CodePen community highlights include a cool custom range input from Taluska, bubbly text "stickers" from Vivi Tseng, and a business card with a fluid edge from Tamino Martinius.


Forrester: AI-powered DevOps starts with better workflows

DevOps teams are under pressure to ship faster while managing complexity, technical debt, and security risk. In this Forrester Consulting study commissioned by AWS Marketplace, learn how organizations use AI to automate repetitive work, improve CI/CD efficiency, and strengthen delivery outcomes across the SDLC.

You will also see where AI is already driving the most value, from collaboration and tool customization to faster remediation and more productive developer workflows. Download the report to explore the data and Forrester’s recommendations for building a more AI-native DevOps experience.

Research will show how:

  • AI helps transform DevOps workflows by automating repetitive and manual tasks.
  • Inefficient pipelines increase cost, risk, and difficulty scaling DevOps practices.
  • Organizations see the greatest gains from AI in CI/CD, collaboration, and productivity.
  • Forrester recommendations guide effective adoption of AI across DevOps practices.

Download this AI study now

text stickers
pen
Vivi Tseng shares a set of bubbly pastel text stickers with a perfect plastic-y shine when you hover over them.
CodePen Challenge: Sea Breezes
collection
In the 3rd week of our challenge at the beach, we cooled off with some sea breezes. Check out our collection from week three, including Pens by josetxu, Giedr-Ju, almcd, and garlic_hat. Want to join the beach party? The final week is on now!
Fun, animated link effects using paths and GSAP
pen
Josh Dillon shares a set of text path animations that combine GSAP easing with CSS mix-blend-mode. Hover for chill versions in the left column, and speedier, glitchier versions on the right.
CodePen Radio #429: Why We Rebuilt Our Realtime Service
podcast
Chris & Alex are on the latest podcast to talk realtime. We've got a longtime realtime history, from PubNub to Ably through to our newly rebuilt system, and this episode has the whole story.
Custom Select - Tag list
pen
Chris Bolson keeps pushing the limits of the newly-customizable select element with this select menu that transforms into a tag list, where you could change your selection if you want. Interesting!
Fluid Business Card
pen
Liquid ripples bend the edges of Tamino Martinius' fluid business card. Hover around the card to trigger the fluid, or open up the controls for more fine-tuned tinkering.
Custom input range
pen
Glide through an icy blue gradient in Taluska's super-cool range input.
Dynamic Node Connection
link
Temani Afif builds on his bending line graph experiments with a new iteration where the "nodes are square elements, and the connectors can have different shapes and positions based on the node's position."

Chris’ Corner

A collection of web design and development news and thoughts from CodePen's own Chris Coyier.

Makin' Stuff

The most fun websites to build are websites that interact with outside sources. A user is an outside source! I’m obviously a bit partial to a website that asks a user to build stuff. That’s fun. But any outside source can be fun. Accepting uploads and doing something weird or useful with the data. Or using a third-party API for interesting data.

There is something magically fun about a weather app, for instance. You’re designing the site, but it’s designed around data you don’t control. Your job is to present the weather in a pleasing and useful way. That’s difficult to do even when you’re essentially copying patterns that already exist for it, and extra difficult to do something novel that could attract actual customers.

I’ve seen a college program that has students literally build a weather app. That’s a great project if you ask me. It involves an outside source of data, so you learn how to do that and make it efficient and resilient and respect bandwidth and limits and all that. The students also learn that websites are both front-end and back-end, and neither can fully compensate for weaknesses in the other.

A weather site is a pretty saturated space. But I believe in you, you can do it! There are other opportunities out there, though. Perhaps after you’ve got your feet wet with interacting with outside sources, something else will click for you that feels more personal.

I was thinking about this after reading Terence Eden’s Are there any open APIs left?. It was very interesting to me as I was vaguely under the impression that most of the really interesting cool open APIs didn’t really exist anymore. And, to be clear, “API” meaning general data access from some third-party source. A classic is that GitHub offers REST and GraphQL APIs for your use. Could you build something interesting with access to GitHub data? Or, perhaps a better question is could you build something interesting with access to GitHub data and whatever other outside source you can think of. Terence’s blog post lists some APIs still going strong.

Speaking of outside sources, let me leave you with a somewhat random collection of links to tools and ideas that maybe-just-maybe could be alchemized into an interesting website.

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

Reply all
Reply to author
Forward
0 new messages