HTML
Let's take a look at how HTML documents differ from static images like JPEGs, PNGs or the lately more frequently used WEBP formats.
Think of an HTML file as the equivalent of a webpage. Just like the page you are looking at right now. To treat an NFT as such a "webpage" we can create content that surpasses the limits of mere frames and pixels, because a webpage isn't just a visual perception, it's also an interactive experience. Using HTML gives us the opportunity to toy around with all types of different ways a user could interact with their NFT.
But really, what's an HTML? HTML stands for HyperText Markup Language which is the most basic language and, arguably, most important building block for the web. This language allows us to define meaning and structure of content designed to be interpreted by your web browser. Every webpage you see is basically the visual representation of a document containing HTML.
Why?
There have been NFTs in the past that played around with this concept. Some creating games, making algorithmic or randomly generated content or visual triggers responding to the user's input. HTML's scope can be very extensive, thus the choice to go this route became a no-brainer for us with the experimental direction we are taking with the project.
The trap: missing "the point"? A handful of projects had to learn this the hard way: some implementations of HTML do not really make sense in an NFT, or at least not in the present moment. Though even if they didn't necessarily get the results they wished for, the experiment had to be done in order for them - but also us as a collective - to learn and see what paths work and which do not. We will utilize this content type without being too overly ambitious as to miss the point; primarily focusing on how the collection could stand apart with subtle implementations of interactivity.
Composition
Currently our HTML files are build from these four key components:
The image(s) The artworks of the NFT itself. The amount of images an HTML contains depends on its class.
The framing The framing of the card, where its color depends on the class type.
The background The background of the card. Color again depending on the class type.
The effects
Passive An idle animation when there is no interaction taking place. Different for each class type. An example being a subtle breathing effect to "breathe" some liveliness into the card.
Transitional An animation involving the transition between the images stored inside of the NFT. An example being Epic or Legendary cards having the black and white variant morph into the semi- or hand-colored version upon tapping on or hovering over the card.
Active An animation requiring the user's involvement. The 3-dimensional card rotation being one of such effects.
In our HTML files we treat these properties as parameters, that way we can make slight adaptations to the NFT without having them deviate too much from one another or having us mess around with multiple templates. This could be interesting to open up to the holders and allow them to, for instance, change the shape of their framing, change the effects that are applied or create entirely new properties; perhaps in the process introducing more practical use cases.
Security
Yes, HTML contains code. Code can contain vulnerabilities or malicious content, unlike an image file (oh, is that so?). For this reason we chose to keep the HTML document as simple as possible; only making use of pure HTML, CSS and no Javascript whatsoever. The only external content being loaded are the actual images of the NFT itself. Another reason we steered away from Javascript is that most browsers tend to block iframes¹ containing Javascript just for the reason of it potentially creating vulnerabilities.
¹ The Inline Frame Element; this allows the embedding of another HTML document into the current one. This is actually how our NFTs get loaded on external marketplaces or platforms.
Last updated