hello svelte

Svelte 5 was announced at Oct 22, 2024. At that time I was using React. I was caught by svelte’s simple syntax. It introduced “runes”, which were signals under the hood.

I was curious and full of doubts. so I gave it a try on my personal site. It had a darker palette and was set in mono fonts. It lasted few days and then came the current design. Svelte reduced my mental model to few variables to handle Static files. The whole site is pre-rendered at build time and all it takes is -

export const prerender = true;

I know. That is it.

Now, I wanted to try svelte on a big project and I had exactly that.

Coming Back

I made a screenshot tool moocup while working on this site. I was on the lookout for a tool where I can drop my screenshots and edit it. I was tired of dragging screenshots into Figma just to give them same edits.

In short - a simple tool where I get in and out. Any other options weren’t good enough for me so I made one myself, which I open-sourced. Now, It is used daily by folks from all around the world.

While helping out with folks at Roomy on discord, I learned about Recursive family. It is a five axis font with not too serious look. One of unique feature it had is a “casual” axis which changes its look from curvy strokes to flattened edges.

I picked recursive and started dogfooding Moocup on svelte. I made a svelte branch in github and started working. I used shadcn in react version, so for svelte I used bits-ui for primitives.

Design Process

I wanted to explore idea of physical touch and elevation. We have Light in real-life which casts shadow and gives us the impression of depth. likewise, Putting a finger on an object casts shadow, Pressing them makes them shift down. I captured the same idea of Neumorphism.

I kept minimum transitions for all interactions like hover, active, focus states. Below is Interactive Tab component from moocup, click around. If you’re on your keyboard, use Tab and ← → to select

This is one of the interaction picked from moocup, explore more on site.

I experimented with dozen palettes. I hated gray & black palettes so it was out of the question. I wanted something with attitude and authority. I landed on Plum.

I want to make simple, cozy software that does its job well and doesn’t overstay its welcome.

Big products have to please everyone. Moocup doesn’t and that’s the privilege of small tool.

If you’re in mood, I have few more pieces for you to read. To my new readers you can click all images to find its source.