I created a tool to create customizable morphing vector animations that are embeddable for web design projects.

context

Design

Figma

Frontend

React

Typescript

Tailwind CSS

AI

Cursor

Composer 2

Sonnet 4.6

Timeframe

Dec 2025

inspiration

How can I make looping shapes more dynamic?

While browsing Pinterest, I came across these photos of shapes that we layered multiple times, with each iteration being slightly scaled and rotated. Over multiple iterations, this created a really trippy-looking effect. I wanted to see if I could take this concept and create tools that would allow me to not only create these shapes, but animated them too.

try it out
photo of different looped shapes that inspired me to build this tool
Some examples of looping shapes that inspired me!

features

Creating a vector

To create shapes, I made a simple canvas with a pen tool, includinng handles to adjust the shape's points and angles.

You can fine tune the changes applied to each iteration to create different effects.
You can also adjust the stroke widths, color, and warping.

Animating a sequence

When creating a sequence of shapes, VectorMorph will interpolate between each shape to create a smooth animation.

You can fine tune the changes applied to each iteration to create different effects.
You can fine tune the changes applied to each iteration to create different effects.
You can export the animation as an mp4 or copy the HTML embed code to add it to your project.
HTML exports are svg files that scale without losing quality.

reflection

The biggest challenge was everything besides functionality

When starting this project, I was surprised by how fast Cursor nailed down the base functionality I was looking for (creating looping shapes and animating them). However, as I kept building off that base functionality, I quickly found myself having to make tradeoffs on how I displayed different tools and parameters.

I played around a lotttt with the side panel design, continuously tightening the presentation of the slider inputs and the overall heirarchy/grouping of the tools.

However, this project was my first time building something from scratch with AI, and learned a lot about where I found AI useful in my workflow.

back