# Designing a Website with Experimental DOM Effects and AI-Created Tools

DevFeed: [Designing a Website with Experimental DOM Effects and AI-Created Tools](<https://devfeed.tech/articles/i-got-caught-up-in-design-again-28088.md>)

Original publisher: [Read original article](<https://jlongster.com/caught-up-in-design>)

Author: James Long

Published: 2025-12-03T12:00:00Z

Content type: opinion

Language: en

Sources: [James Long](<https://devfeed.tech/sources/james-long.md>)

Topics: [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [Website](<https://devfeed.tech/topics/website.md>), [procedural flowers](<https://devfeed.tech/topics/procedural-flowers.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [animation](<https://devfeed.tech/tags/animation.md>), [design](<https://devfeed.tech/tags/design.md>), [editor](<https://devfeed.tech/tags/editor.md>), [tools](<https://devfeed.tech/tags/tools.md>), [website](<https://devfeed.tech/tags/website.md>)

## AI overview

The author reflects on an experimental website redesign built around warped DOM elements, explaining that the visual concept became too distracting from the site's purpose of presenting readable content. They describe simplifying the design and using AI to create animation and drawing tools during the process.

## Source excerpt

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 reco