ContourContainer.ts

Origins

I've been working on a personal digital assistant and agent fleet management tool since December. I call her/it Ora. Over the past month I've been gradually picking off polish items—many of which would never see the light of day in typical software. Ora isn't typical software.

As you can tell from the video below, Ora's details, aesthetics, and sci-fi bent give her a unique feel. A feel more commonly found in polished video game UIs. This is the level of polish I'm after.

Ora Overview

As mentioned and highlighted in the video, I have the concept of a "railed attachment". One of the polish items related to this RailedAttachment.tsx that was queued—and I've since implemented—is the ContourContainer.tsx. Here's a vid highlighting it:

ContourContainer Highlight

Contours

If you're familiar with HTML & CSS then you're familiar with wrapping and related layout rules. You'll also know that the box model—though simple and powerful—is restrictive and boring. I wanted a container that updated at runtime while additionally contouring around its children. Back in the day (~10yrs ago) I wrote a small JavaScript lib that used SVG at runtime to replace boring boxes with what I called Slurves (slants + curves). You can check that article here and see a sample below.

Slurve Card Examples

The contour container I envisioned could leverage this same basic concept while being expanded upon with more intelligence.

ContourContainer.ts was born.

Below is a screenshot example where the image attachment context and file chip context are within a single ContourContainer.tsx instance that itself is inside a RailedAttachment.tsx instance:

ContourContainer.tsx Example

Though my personal needs were for a React component, I authored it to be more generic with no dependencies. In any case here is a mini interactive app you can experiment with:

Coming soon

Code

As mentioned above, the implementation of ContourContainer.ts lacks dependencies by design. As a result you can snag the source and use ContourContainers in your web-based vanilla or framework-based stack. Here's a high-level overview of the cast:

Coming soon

Though I don't really use Twitter anymore, if you have thoughts or questions you can still hit me up there @derekknox.