Cast Your Wizard Spellz:
How to view and use Wizard Spellz NFTs

Learn to use your Spellz!

Part of the value proposition of owning a Wizard Spell NFT is that you can modify your animation and do whatever you want with it.

In order to help people accomplish this, we have created some guides with pictures and videos.

How to view your Wizard Spellz and other CNFTs

To view all your CNFTs, you need your Cardano receiving address.

Don’t worry, the address is not private information and no one can use it to steal from you.

Simply visit

You will see all of the NFT Collections in your wallet. Watch this video to view the process!

Basics of modifying your Spellz

To get your feet wet, try right clicking the Spell example to the right and choosing “Inspect” from the context menu. If you don’t see it, you may need to enable developer mode in your browser.

From here, you can see the code that comprises the Spell and begin to play around with changing colors and more.

On the left you see the HTML code, and on the right you will see the CSS. The main HTML we care about is the <div class="a"> tag and everything inside of it. Try clicking the divs inside and adjusting some of the properties on the right to see what happens.

Remember this is all temporary. If you refresh your page, the changes will return to normal.

How to save your Wizard Spellz as .html files to your hard drive

If you want to view your Spell offline or make permanent changes, you’ll need to save it to your hard drive.

Don’t be scared by all the text, we’re just trying to be detailed… the pictures on the right are basically the whole process.

  1. Visit your wallet on as described above.
  2. On the Spell, right click the spell and select “View frame source”
    • Depending on your browser, the text may vary.
  3. Select all of the code (ctrl+A). Copy it to your clipboard (ctrl+C).
    • For Mac users, ctrl will be replaced with cmd.
  4. Visit CodeBeautify and paste (ctrl+V) the Spellz code into the left input. Click “Beautify HTML”.
    • was used in the video. It handles CSS & HTML separately, so you must start with the CSS tab and then paste to the HTML tab as shown in the video.
    • If you are inclined, you can also use the Beautify extension for VS Code. That’s what I tend to do.
  5. Copy the Output on the right (ctrl+A, ctrl+C)
  6. Paste it into a text editor. You can use the raw text editor that comes with your operating system (Notepad for Windows, TextEdit for Mac). If you’ll do this a lot, consider using Microsoft Visual Studio Code, an excellent code editor available on all platforms (or any other text editor built for code).
  7. Save the file, making note to save with a .html file extension. You must to select “All Files” from the Save as Type dropdown on Windows.
  8. You may now open your Spell in any browser to view offline, and open the file in a text/code editor to make changes.
View the frame source and copy it to a file
Use CodeBeautify, paste in the left, click Beautify, and copy the output on the right.
Save the file in a text editor. Make sure you save it as a .html file.

Record your Wizard Spellz NFTs as a Video File

The best way to show off your Spell is usually with a Video, or with a GIF (make gif from a video).

A full text & screenshots walkthrough is coming soon, for now please reference this video.

How to turn a video file into a GIF

Sometimes platforms won’t let you upload a video file, and this is often the case for user avatars. Here is how you can turn a Spellz video you recorded into a GIF.

A full text & screenshots walkthrough is coming soon, for now please reference this video.

Turn your Wizard Spellz into a PFP (Avatar)

This video puts together all the basics we’ve covered so far to create an animated user profile picture (PFP) or avatar.

A full text & screenshots walkthrough is coming soon, for now please reference this video.

Combine Spellz with image based NFTs

(or any other images)

Thinking of casting a Spell on your sweet new MOB? Here’s what you would do.

  1. Visit your wallet on
  2. Open the NFT you want to cast a Spell on within Right click the image, and select “Save image as” to save the image to your hard drive.
    • Keep track of the filename and where you save it. We’ll assume it’s called mob.png
  3. Save the Wizard Spell you want to cast to your hard drive in the same location you saved the NFT you want to cast it on.
  4. Open the Wizard Spell in a text editor such as Notepad or VS Code.
  5. Change the background color: You’ll probably want a background color other than white. You can use a color picker or gradient generator to pick a background you like. We’ll just use #36393F as it matches the background color of Discord in Dark mode.
    • Add to the body { } selector:
      • background: #36393F;
Save the image of the NFT you want to cast a Spell on, like this MOB.
Change the background color.

Now that you’ve got the basics set up, there are a few different routes you can take.

Simple: Replace Spell Core with your NFT

This will remove your Spell Core’s existing background colors and animation, replacing them with the image of your NFT of choice.

This code will replace your Spell’s core with your NFT image.
  1. Inside of the .c { } selector, the Spell will already have a background set. We can replace everything in between background: and ; with our image, or just override it by writing a new rule underneath the old one. In this example we’ll override it.
  2. Inside of the .c { } selector, we will add two new style rules. We’re assuming you saved your NFT as “mob.png” in the same folder as your Spell’s .html file.
    • background: url(mob.png) no-repeat;
    • background-size: cover;

Intermediate: Add Your NFT as a New Layer In Between Spell Core And Rings

In this way you can preserve your Spell Core’s colors and animation while still displaying your NFT over the area.

A full description & video is coming soon!



Join our email list for early info and occasional chances at free NFTs and discounts! We won't barrage you or sell your info, we promise.