hello svelte

Svelte 5 was announced at Oct 22, 2024. At that time I mostly worked in react land. Svelte caught my attention with it’s simple syntax. It introduced “runes” powered by signals which was a complete rewrite of reactivity system.

I was curious and full of doubts. so I gave it a try on my in-the-process personal site. Initially I designed & typed with mono fonts and darker palette. then came sveltekit and loved it’s approach with server & client seperation. this whole site is pre-rendered at build time and all it took was -

export const prerender = true;

It can’t get any better than that.

I needed a real project to test it on. Conveniently, I had one that was overdue for a rethink.

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 a background.

In short - a simple tool where I get in and get out. I didn’t like any other offering so I made one myself, which I later open-sourced. It is used daily by many folks all around the world. I made it in react with olive palette and set in Inter.

While helping out with folks at muni town discord, i got to know about Recursive. It has a personality without trying too hard, it was the final push i needed.

I started dogfooding Svelte on Moocup. It had real users, with stakes low enough that I can pull this off. I made a svelte branch in github and started working. I used shadcn for ui components in react, for svelte I used bits-ui for primitives.

Design Process

I wanted to explore tactical feel and elevation, like in real life. We have Light in real-life which casts shadow and gives us the impression of depth. Our brain processes all of this data and gives us a 3d view of how near and far things are. Putting a finger on a object casts shadow, pressing it down it gets pushed down. In design world, currently capturing this feeling is called Neumorphism.

Transitions should be minimum for all interactions like hover, active, focus states. Below is Interactive Tab component from moocup, click around. If you’re keyboard user, use Tab to select

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

I tried a dozen palettes and most were in pattern of shade of black and a accent for highlighting. Gray disappears in background, I wanted a color with a attitude. Finally, I landed on Plum.

I don’t want to make it like a software, but a simple gadget on your desk. something that doesn’t ask for your constant attention.

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

I still write React at work. But moocup is staying in Svelte, and I think that says enough.

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 it’s source.