I got caught up in design again

Over a week ago, I had a thought: "I'm gonna make my website cool."

I really love visual exploration. But there's a problem: given no constraints, it's so easy to get wrapped up into a one idea and go too far down that path.

Here's what happened: I found a cool trick to "warp" real DOM elements. I took this approach to the extreme and tried to build my whole site around it. Here was one early version:

I still really like this. It feels like my personal messy desk that that world can see.

But that's also a problem: it's too messy. The hardest part about design is executing it in a way that doesn't detract from the original need. It still needs to fulfill the original requirement.

In this case, the requirement is I should be able to quickly write content for you to read. I spent almost a week working on this before realizing this approach just fundamentally detracted from the experience too much. Maybe a better designer could have figured out how to execute this better.

For now, I ripped it out and implemented what you see in ONE HOUR. It's time to focus on content again.

I left my in-progress work up so you can see it on this page.

(I also wrote this up as a thread which has a few more details & videos)

This is my favorite part of the design by far. I made the demo videos into little polaroid pictures. These are real videos that are playing! They animate in like a paper would, and there's a nice paper-like interaction on hover, and you can drag them around:

(I wrote some notes when implementing this: https://jlongster.com/slicing-up-a-video)

I learned a ton throughout this process. The biggest thing was I used AI to create design tools on the fly. For example, I create a full animation keyframe editor that let me create keyframes of the warped DOM nodes, and then a runtime player plays these keyframes to make the animation:

I installed the perfect-freehand library and created a live animation drawing tool. You can press record, draw stuff on the screen, and stop recording and get an animation back. It automatically saves the animation to the real site:

The site has 3 tools available: paper, text, and animation tools. Paper lets you create and edit paper animations, even opening up the animation keyframe editor itself! Text just lets me position those text and arrows. And animation is the global animation coordinator that lets me change the delay and other properties, and retrigger animations to see them live:

This was one of the most fun things I've done recently, but alas, I just couldn't get it to work with the content in a satisfying way. I needed to timebox this to a week, so it's time to move on.

You can view this experiment live on this page.