Font metrics calculator for font-size-adjust
Tegaki
Animated handwriting from any font.
CSS Database
A list of CSS features and their positions in the process of becoming implemented web standards.
SVG Studio: Animate Everything
Turn static SVGs into buttery-smooth keyframe animations and export clean, self-contained files. Free, no sign-up.
Repeating Square Dots Backgrounds in CSS
We look at a couple of ways to essentially draw a little square dot in a slightly larger area and let it repeat, giving us a nice dotted background effect.
Astro Markdown Component Utility for Any Framework | CSS-Tricks
In the previous article, I spoke about the why and how to use a Markdown component in Astro.
Revealing Text With CSS letter-spacing | CSS-Tricks
Until we get something like ::nth-letter, there are still some really cool text effects we can make from existing CSS features, like letter-spacing, ::first-word and ::first-line.
mq-piano — demo
Framework-agnostic design systems: a practical approach to web components
Baking framework lock-in into your design system from day one is a recipe for obsolescence. Component documentation is often tedious and out-of-sync with development. Let’s build a documentation-first, framework-agnostic component library using web standards and solve this admittedly esoteric combination of problems.
Building a site agents can use, from scratch · Joost.blog
How cocktail.glass was built agent-ready from the first commit: one data source, Markdown negotiation, a stateless MCP server, and discovery.
Cross-Document View Transitions: Scaling Across Hundreds of Elements | CSS-Tricks
Every view-transition-name on a page must be unique. The problem is that every pseudo-element selector in your CSS targets a specific name, so your animation styles explode into an unmanageable wall of selectors.
Astro Components and Blocks - Fulldev UI
Fulldev UI ships open-source Astro UI components and blocks that developers and AI agents can use to build content-driven Astro websites.
Hand-Drawn Underline using border-shape
Add a fancy underline to your menu items using modern CSS
Refero Styles — Design Systems for AI Agents
Search a curated DESIGN.md library for AI agents: colors, typography, spacing, and component patterns from top websites.
Griddy Icons
Griddy Icons is free open-source icon family with unique utilitarian vibe
@web-kits/audio
Declarative audio synthesis for the web.
3dsvg — The easiest way to turn SVGs into 3D
Turn any SVG into interactive 3D objects. Animate and export as 4K image or video. 100% free, no account or subscription needed.
P4LETTE
Drag, lock, shuffle, share. A small opinionated colour palette tool.
HyperFrames — Edit Videos By Vibe-Coding
HyperFrames lets AI agents compose videos by writing HTML, CSS & JS — originated by HeyGen, built for the community. Open source under Apache 2.0.
AI Doesn't Fix Accessible Systems. It Depends on Them. — Anna E. Cook
Why AI depends on the foundation accessible design systems build — and how "AI will fix accessibility" is producing the opposite outcome at industry scale.
Making dark mode play nicely with bfcache
Who knew the back button could break dark mode?
CSS Generator for Fancy Frames (Squiggly, Ragged, Wavy, Torn, etc.)
Use clip-path: shape() to create a lot of CSS-only fancy frames. Get an optimized & modern code in no time.
portless | Named .localhost URLs for Development
Replace port numbers with stable, named .localhost URLs. For humans and agents.
una.im | CSS Image Effects #2: 3D Glasses
How do you make 3D-glasses-like graphics in the browser? We'll look at how blend modes work together to create this effect.
Making Zigzag CSS Layouts With a Grid + Transform Trick | CSS-Tricks
Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more rhythm like, say, a zigzag pattern. Here's how to do it with CSS Grid.
CSS Inverted Reveal Scroller 📜
...
Scroll-Driven Animations • Josh W. Comeau
The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It’s honestly a very lovely API, and in this blog post, we’ll explore some of the super cool things we can do with it.
Searching for Birds
An interactive story about the birds that capture our curiosity, told through data, visuals and illustrations
Font metrics calculator for font-size-adjust
Elena | Progressive Web Components
Elena is a simple, tiny library for building Progressive Web Components.