I've been a web3 developer for some time, especially with the OBEY crew. I've created the backend, the front end, and the smart contract, but I have never launched my collection.

For a long time, this has been something in the back of my mind, but I never had the time or the idea (even though I've been playing a lot with crazy ideas).

Through this journey, I created in Christmas 2022 two web apps that allowed me to do some simple tasks: (a) an app to get your year in review and (b) an app to share your NFTs easily (without having to connect your wallet and more importantly sharing JPGs, GIFs, and SVGs, from one place).

When I created both, I found the Nabla web font. This font is special because it allows you to create an isometric font in COLRv1 format. And what does it mean? Well, it means you can use CSS with the font to create awesome effects that cannot be done with other fonts, like changing the depth and highlighting.

While this is really cool, not all browsers support it, but as most browsers are built on top of WebKit, most of them support COLRv1 and, therefore, can render these features within the browser.

I used this font for both previous web apps, and while playing with it, I had the idea of creating a dynamic NFT that could use each letter in lowercase from the alphabet using this font. Why this font? Because I could change the depth of it dynamically, so I could make it breathe. While most letters can change size and weight, only a few can change their depth, and Nabla was there for me.

My first experiment was just a simple letter with some CSS that would change its depth of it. That worked out, so my next obvious step was to create a script that would allow me to use that HTML as a template to fill in the gaps for each letter and render them easily running one command.

My preferred programming language is Python, so I hacked a very simple script that read the HTML template and made some substitutions for me: the alphabet letters. I wanted to keep everything as simple as possible, so instead of using a templating system or library, I created my own :-)

Jinja2 heavily inspires the templating solution, so I used {{}} to replace the code where I wanted. The next step was randomly choosing beautiful color palettes, so my script could use them and feed them into the template. For this case, I used the seaborn python library, as it has some beautifully made color palettes that I could easily use with the letters.

The color palettes can be transformed into hexadecimal colors, and that was perfect because Nabla font can have up to 9 colors to create gradients within the font. This was awesome because I could randomly choose a color palette, then reduce it to 9 colors and feed them to the template's CSS, so the letters could be rendered using those colors. Moreover, I could inject them as variables and use them later within the CSS to have a consistent color palette for the NFT.

With all this solved, it was time to make the NFT dynamic. As the letters could breathe, I wanted to give them some personality. I realized that nowadays, people get stressed out in crypto, and my breathing letters could help them relax. But how? Following the well-known breathing exercise: 4:4:4:4. You inhale for 4 seconds, hold for 4 seconds, exhale for 4 seconds, and hold for another 4 seconds. Repeat several times, and your body and mind will be more relaxed.

At this point, I had a breathing letter you could use as a relaxing buddy, but I felt something was missing: the background was empty. Nothing was there. Hence, I thought that the thing that people stress out in web3 is the price of Eth, so I wanted to reflect in the background on how that worked out.

The template had a small Js file that checks the ETH price from today and compares it with yesterday. If the price is mostly the same, it will not do anything, but if the price has gone up, the background will move up, while if it goes down, the background will go down.

The background is created randomly again using some python functions: it creates circles and squares of different sizes. Additionally, I wanted to place them in different places. A simple solution was to use the default python random methods, but it was insufficient, so I decided to use a Perlin noise JS function to locate them, bringing a more natural feeling to the locations and how they will be moving.

The result? Well, this beautiful animated letters:

breathingletters

@breathingABC

We're ready to launch!!! The first 3 letters will be listed in @opensea for a price of 0.0069ETH

Learn to relax your mind using the 4:4:4:4 breathing exercise with a breathing letter while you watch how the ETH price goes up or down. Having a calm mind is critical these days.

2

5:34 PM • Mar 3, 2023

With the script ready to create any letter with any color palette, I was ready to launch it. But I found a problem: none of the available no-code tools allowed me to deploy them easily. I ended up using Manifold because it is easy to use, but I have to mint each letter one by one (with the associated cost, as batch minting is not available for dynamic NFTs). I cannot have a claim page either because dynamic NFTs are not supported, so the only solution left is to deploy to the main net and then list each token on OpenSea or Blur so people can buy it.

Is it perfect? No, but it will work out :-) As you have read in the previous tweet, the price will be for one letter 0.0069ETH (~10 USD) in this first batch of 3 letters: a, b, and c.

You can check the available letters here: https://opensea.io/collection/breathing-letters, and if you like them, get one! I'll be listing the available ones tomorrow, Monday 6th of March, and hopefully, someone will get one :-)

There will be all the English alphabet plus a ñ as I'm from Spain. Each letter will have its distribution based on its frequency in English. I just released the first three letters as I think they are the most well-known ones.

All the NFTs have been saved in Arweave (using ArDrive). Why Arweave and not IPFs? Well, I wanted to learn Arweave, and all I can say is that I might never use IPFS again. The simplicity and fast serving stuff is a winning point over IFPS (also not needing any gateway).

Thanks for reading until here! Let me know if you like it.