Dither

I love dithers, but I always found it hard to create one.

Developers needed to implement custom WebGL shaders to achieve the desired effect.

For me, it always felt unsettling – like it is too much tech debt in a way.

So while flying to SF I had 11 hours of time to think about a solution.

In the end, I started with what I thought was the simplest solution: custom SVG filters.

But even that was not good. If I'd publish a package with custom SVG filters, I can't allow people to use it as a standalone tailwind plugin. Instead, people would have had to import a custom component containing the SVG filter, or I'd have to store the SVG filter as a URI object in the source CSS. This however didn't work for Safari browsers.

A few months I didn't think about it and left the project still, as I was busy with other pojects.

Then, I needed the dither effect again, so I decided to try another rewrite approach.

This time I used ChatGPT. I had endless conversations going back and forth how we could accomplish these things:

• Create a simple dither effect via Tailwind utilities
• Allow all browsers to accurately display the effect
• Don't depend on any external libraries
• Don't depend on JS
• Make it as easy as possible to use

Interestingly, after a lot of discussion, ChatGPT came up with a proper solution, combining blur, contrast, brightness, and greyscale effects with a background image of the bayer dither grid.

This allowed all browsers to process the image and overlay it with whatever is inside the element with the class name "dither".

So I tested it with some people from X, they gave me feedback, and I released at the end of the week. Pretty simple, but happy I was able to solve this little problem for myself (and hopefully others).

---

You can find the dither effect here: Dither Plugin

Try it out for yoursefl! :)

Spinning objects

I have posted a video of different spinning objects. Based on this, I got a lot of question on how I created those objects.

The short answer is: Not a 3D tool.

How to do it

Create an image in MidJourney

Head to MidJourney and create an object you like.

Here's what works best:

• Use an object that has enough contrast to the background (or use a green screen)
• Make the object appear simple (e.g. if you generate an acai bowl, don't add too many ingredients)
• Reduce transparent layers to a minimum wherever possible
• Use an isometric perspective

Turn your image into a video

You need an AI video generator which supports an endframe. The endframe is important because it determines the final appearance of the spinning object. This allows us to stop where we started, hence creating a seamless loop.

Nowadays Midjourney also supports this, so you can just use it. Another option is Kling 1.6.

Here are some considerations:

• Make sure the endframe is really identical to the startframe
• Prompt so the speed stays the same, otherwise it'll look weird

Remove the background

For removing the video background, I recommend using Unscreen. It'll convert your video into a GIF but will make it transparent.

I have used other tools as well but they are often smoothing out edges which is not what we want. Although Unscreen is not perfect (if you look closely you'll see some artifacts), it's fast and pretty reliable.

To make your video size small, you should convert it to a WEBM file (it supports transparency). You can use a bunch of different sites for this.

If you're a programmer, you obviously can also do many of these things with ffmpeg.

Next

If you create a spinning object, I'd be super happy to see it! Feel free to share it @flornkm with me, I'm excited to see what you come up with.

Granny AI

An experimental AI chatbot made for shopping in an 48h sprint in university.

In our 48 hour university sprint, Anton Stallbörger and myself wanted to make use of OpenAI's GPT-3 API to create a chatbot that could help shoppers find products they were looking for.

At the same time, we wanted to create a visually appealing interface that would make the chatbot feel more personal and engaging. This is where the idea of using a Granny interface came from. Grandmas usually give the best advice, so from a "branding" perspective, this was exactly what we were looking for. It also was a fun way of grabbing attention – a Granny and an AI, what the f*ck?

In the end, we have created a quick user interface that allowed to choose between different clothing options. We intentially avoided using just text-based input as this would have been boring. Instead, we allowed users to use an odometer-like selector for the price and a category on the bottom of the screen.

View and test

Raycast SEO Extension

Tracking your sites performance directly in Raycast with no zero setup required.

Whenever I put a new website online, I had the need to quickly audit basic stuff about the website. I didn't need a fancy SEO / Backlinks explorer but rather a simple tool to check if everything is in place.

Here's where I saw the opportunity to quickly build a raycast extension making it possible to audit your website performance directly inside of Raycast. Think of it as a light version of lighthouse.

Raycast Store