Transitions.dev
Essential UI transitions for web apps, built to use with AI coding agents.
FrameworkFreeWeb
4.5Visit
Framework
Blendy
Framework-agnostic library that smoothly morphs one element into another.
Built with love by Shushant Lakhyani. Building bestproductivityresources.com
What is Blendy?
Blendy is a small JavaScript library that animates one element turning into another, such as a button expanding into a modal. You mark the source and target elements with data attributes and call it with a few lines of code. It works with React, Vue, Svelte, plain JavaScript and other frameworks, and is free and open source under the MIT licence.
Pros
- Smooth element-to-element transitions in a few lines
- Works with any framework
- Free and open source (MIT)
Cons
- Focused on one type of animation
- Complex layouts may need tuning
Who should use Blendy
Front-end developers who want polished modal and card transitions without a heavy animation library.
Who may not need it
Projects already using a full animation library such as Motion.
Blendy alternatives
Similar resources to Blendy, picked from the directory.
ObsidianUI
React and Tailwind components, blocks and landing templates with motion built in.
FrameworkFree planWeb
4.5Visit
GSAP
A wildly robust JavaScript animation library built for professionals.
FrameworkFreeWeb
4.8Visit
Motion (motion.dev)
Fast, production-grade animation library for React, JavaScript and Vue.
FrameworkFreeWeb
4.7Visit
Cuelume
Tiny, dependency-free library of interaction sounds for the web, made live with Web Audio.
FrameworkFreeWeb
4.6Visit
Theatre.js
An animation editor with a visual interface for the web.
FrameworkFreeWeb
4.6Visit
Free alternatives to Blendy
Free resources that cover similar ground.
Kobra Input OTP
A segmented one-time-code input for React, with every state designed.
FrameworkFreeWeb
4.5Visit
OriginKit
The largest free animated component library for modern websites.
FrameworkFreeWeb
4.5Visit
Spectrum UI
Open-source animated React components and blocks for SaaS and AI apps.
FrameworkFreeWeb
4.5Visit
SSGOI
Native-feeling page transitions for React, Svelte, Vue, Solid, Angular and Qwik.
FrameworkFreeWeb
4.5Visit
Monoco
Tiny JavaScript library that adds squircle (smooth) corners to HTML elements.
FrameworkFreeWeb
4.4Visit
AnimateIcons
1,170+ free animated SVG icons for React, built on Lucide and Motion.
FrameworkFreeWeb
4.3Visit
Featured on Best Productivity Resources
Made Blendy? Add this free badge to your website or README. It links to this page.
<a href="https://bestproductivityresources.com/resources/blendy" target="_blank" rel="noopener"><img src="https://bestproductivityresources.com/badges/featured-light.svg" alt="Featured on Best Productivity Resources" width="250" height="54" /></a>Weekly newsletter
New tools and visual guides, every Monday.
One short email a week with the best new tools and websites, plus my latest visual guides. Free, and you can unsubscribe anytime.
Join the newsletterYou sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.