- Year
- 2026
- Role
- UI Design, Interaction Design
SEC. 01 — Overview
AsterMotion is an animated UI component library created with React, Tailwind, Typescript, and Motion.Dev.
SEC. 02 — Challenges
Throughout my early days freelancing, one of the biggest pain points I had when starting web projects was starting with a blank canvas in Figma. One of the biggest learning curves for me was to design these components in mind of the developer experience and making production ready components.
SEC. 03 — Solutions
Creating my own design system became my base line for UI components, spacing, and web animations. I decided to make this open source to post my learnings from my experience building this project and taking a course called Animations.Dev by Emil Kowalski.
Live component demo
Real AsterMotion components, not screenshots — click around.
SEC. 04 — Reflection
Finishing this project gave several insights of what goes into UI components on both the design and developer side. I was able to practice making decisions and trade offs for why I would design or animate a component the way I did. My next immediate goal is to add the v1.1 component list and make the library packagable.