With Manifold Studio, you can now create interactive NFTs that change based on the time of the day, react to you clicking on it, or do pretty much anything you can imagine!
There are two ways in which you can achieve this:
Through Extensions.
Through minting an HTML page.
Today, we will talk about the second one!
Keep in mind that not all platforms support the rendering of HTML pages! If you have a specific platform you're building for, it will be best to confirm if this is supported.
1. Introduction
For this tutorial, we will create a Magic 8-Ball.
A Magic 8-Ball was an eight-ball-like sphere used for fortune-telling. It was invented in 1946 by Albert C. Carter and Abe Bookman. The ball allowed users to ask a yes–no question, which would then reveal an answer in a window on the ball.
In our Magic 8-Ball NFT, we will create a page with a blue triangle that, when a user clicks on it, will reveal a random answer from a set we will define. So, if a user asks, "Will I sell my NFT today?" the ball can randomly answer, "You may rely on it."
Here's the final result so you can try it out.
2. Creating our HTML page
The code for this Magic 8-Ball HTML page is quite simple. Feel free to go over the code, but all this does is render a page with a blue triangle that, when you click on, shows a random answer from a list of pre-defined answers (there goes all the magic 🔮).
Directory structure:
// magic-8-ball
// |- index.html
// |- styles.css
// |- scripts.js
index.html
<!DOCTYPE html>
<html>
<head>
<title>Magic 8-Ball</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div id="triangle" onclick="getResponse()">
</div>
<span id="answer">Click on the triangle to reveal the answer.</span>
</div>
<script type="application/javascript" src="scripts.js"></script>
</body>
</html>
styles.css
html, body {
margin: 0;
height: 100vh;
}
.container {
height: 100vh;
background: black;
display: flex;
align-items: center;
justify-content: center;
}
#triangle, #answer {
position: absolute;
}
#triangle {
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid blue;
}
#answer {
color: white;
font-weight: bold;
font-size: 1.5em;
max-width: 200px;
text-align: center;
margin-top: 5%;
transition: visibility 0s, opacity 0.5s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
}
scripts.js
const possibleAnswers = [
'As I see it, yes.',
'Ask again later.',
'Better not tell you now.',
'Cannot predict now.',
'Concentrate and ask again.',
'Don\'t count on it.',
'It is certain.',
'It is decidedly so.',
'Most likely.',
'My reply is no.',
'My sources say no.',
'Outlook good.',
'Outlook not so good.',
'Reply hazy, try again.',
'Signs point to yes.',
'Very doubtful.',
'Without a doubt.',
'Yes, definitely.',
'Yes.',
'You may rely on it.',
];
function getResponse() {
let answer = document.getElementById('answer');
answer.classList.add('hidden');
answer.innerText = possibleAnswers[Math.floor(Math.random() * possibleAnswers.length)];
setTimeout(function () {
answer.classList.remove('hidden');
}, 500);
}
3. Uploading the HTML page to IPFS through Pinata
Now that we have our HTML page ready, we need to upload it to a decentralized storage.
You can use any decentralized storage of your choice, but for this example we will upload to IPFS. We will use a service called Pinata which is a pinning service that allows users to host files on the IPFS network. They have a free plan for experimenting so it fits perfectly our current use case.
To start, simply go into https://pinata.cloud and create an account.
Once you've created your account you can now upload your folder with all your files related to the HTML page.
Pinata will then upload these to IPFS and give you back an IPFS link to your website. Here's the one it created for the Magic 8-Ball example:
https://gateway.pinata.cloud/ipfs/QmbwSuN69bFmFoHB45kqfydhbo1ghW9KEyU7V2sD6qyAgo/
I can now visit that URL and see that my HTML page works as it should.
Next goes minting the actual HTML page!
4. Minting an HTML page
To mint an HTML page we will go to our contract and click on "Mint new token".
We will use Image as a file type and upload an image that will be used as the thumbnail of our HTML page.
Now, here's where the magic happens.
To link this NFT to our website we will add two hidden properties:
One with name "animation_url" and where the value will be the IPFS URL to our website.
Another one with the name "animation_details" and the value: { "format": "HTML" }
Once you are ready, you can then go ahead and mint to testnet to see how your HTML page looks on OpenSea!
And volià! That simple! There is your minted HTML page!
Don't stop there! Think of all the crazy interactive NFTs you can now create through minting HTML pages. And all with a few clicks from Manifold Studio!