50+ free and open-source animated components and effects. Built with Svelte 5, Typescript, Tailwind CSS, and Motion SV.

Learn how to create reusable input components to make your form code more readable and maintainable. Encapsulate styling and error display logic.

Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap!

dev.css is a lightweight, classless CSS framework

Animated handwriting from any font.

A list of CSS features and their positions in the process of becoming implemented web standards.

Turn static SVGs into buttery-smooth keyframe animations and export clean, self-contained files. Free, no sign-up.

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.

In the previous article, I spoke about the why and how to use a Markdown component in Astro.

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.

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.

How cocktail.glass was built agent-ready from the first commit: one data source, Markdown negotiation, a stateless MCP server, and discovery.

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.

Fulldev UI ships open-source Astro UI components and blocks that developers and AI agents can use to build content-driven Astro websites.

Add a fancy underline to your menu items using modern CSS

Search a curated DESIGN.md library for AI agents: colors, typography, spacing, and component patterns from top websites.

Griddy Icons is free open-source icon family with unique utilitarian vibe

Declarative audio synthesis for the web.

Turn any SVG into interactive 3D objects. Animate and export as 4K image or video. 100% free, no account or subscription needed.

Drag, lock, shuffle, share. A small opinionated colour palette tool.

HyperFrames lets AI agents compose videos by writing HTML, CSS & JS — originated by HeyGen, built for the community. Open source under Apache 2.0.

Why AI depends on the foundation accessible design systems build — and how "AI will fix accessibility" is producing the opposite outcome at industry scale.

Who knew the back button could break dark mode?

Use clip-path: shape() to create a lot of CSS-only fancy frames. Get an optimized & modern code in no time.

Replace port numbers with stable, named .localhost URLs. For humans and agents.

How do you make 3D-glasses-like graphics in the browser? We'll look at how blend modes work together to create this effect.