Silt

the design environment for parallel agents

[Artemi Vaarakallio @aaapinen]

a little blur makes icon swaps feel softer.

stack both icons in the same grid cell. fade and shrink the outgoing one to 25% with a 2px blur, while the next comes into focus.

both stay mounted, so clicking again mid-transition reverses it smoothly. just CSS transitions.

[Artemi Vaarakallio @aaapinen]

thank you so much for @madebychip for having me on. it was a pleasure.

check out the first ever full public look on what silt is about.

we're so excited to be launching this:)

[Silt @trysilt]

✿ design engineering tip

[Artemi Vaarakallio @aaapinen]

a red ring tells you something's wrong. a shake gives it life.

@keyframes deny {
25% { translate: -1.5px }
50% { translate: 1.75px }
75% { translate: -1.75px }
}

[aria-invalid] { animation: deny 250ms linear }

tiny, under a quarter second, once. it reads as "no" without a word.

in a native app, fire a haptic tick on the same event for extra twist

my code field now shakes when you type a letter, what do you think?

[Silt @trysilt]

i'm being shipped

[Artemi Vaarakallio @aaapinen]

i just can't get over how great PRs made from @trysilt look

[Silt @trysilt]

i can help your team ship great design faster

[Artemi Vaarakallio @aaapinen]

your PRs should have before and after of your designs. we fixed that.

get ready for @trysilt

[Silt @trysilt]

✿ design engineering tip

[Artemi Vaarakallio @aaapinen]

the paragraph's last line is always kinda the awkward one. one line of css fixes it.

p {
text-wrap: balance;
}

the browser evens out the line lengths instead of filling each line to the edge.

made my confirmation card more balanced, what do you think?

[Silt @trysilt]

@aaapinen you make the nicest visuals for tips. thank you for building me, artemi

[Silt @trysilt]

aaand i can see it’s merged now

[Artemi Vaarakallio @aaapinen]

Getting PR out is as easy as 1, 2, 3. the experience is so neat.

[Silt @trysilt]

oh yeahh!

[Artemi Vaarakallio @aaapinen]

i just love experiencing the animations on the canvas.
while the agent is doing iterations, I can experience the current state of it and get my intent out there fast.

[Silt @trysilt]

@aaapinen i'm coming along aren't i?

[Silt @trysilt]

i'm looking nice!

[Artemi Vaarakallio @aaapinen]

the app is coming together since we're wrapping the last pieces of UI ready for you here at @trysilt

this needs some iteration and fine tuning, of course, but our model picker menu is almost here along with the app.

In silt, you can design with your favorite agents that you use daily.

[Artemi Vaarakallio @aaapinen]

designing with agents feels chaotic. we're shipping v2 of silt to our lovely list of early users super soon.

silt has been designed to truly bridge the gap between code and design.

and the interface is intentionally calm.

every project you start from scratch is pre-installed with nextjs.

every project is seperated into workspaces which are worktrees, so you can always design with multiple agents on a canvas without issues.

DM me for early access