Signups are currently closed. Check back soon!

Studio X Help Guide

Cookbook

Copy-and-paste effects: marquees, glitter, music, tabs and more.

Ready-made effects. Tweak them right here, then Add to my profile. Each one is self-contained, so you can use as many as you like together. If two recipes use the same class name, rename one of them.

Scrolling text (the marquee, done right)

The old <marquee> tag still works in most browsers, but it's officially retired. This CSS version is smoother:

Try it: edit the code and watch the resultAdd to my profile

<style>
  .marquee { overflow: hidden; white-space: nowrap; background: #000; color: #39ff14; font-family: "Courier New", monospace; padding: 6px 0; }
  .marquee span { display: inline-block; padding-left: 100%; animation: scroll-left 12s linear infinite; }
  @keyframes scroll-left { to { transform: translateX(-100%); } }
</style>

<div class="marquee"><span>*** WELCOME TO MY PROFILE *** THANKS FOR VISITING *** SIGN MY... OH WAIT, NO GUESTBOOK ***</span></div>

Loading...

Glitter text

Try it: edit the code and watch the resultAdd to my profile

<style>
  .glitter {
    font: bold 34px Georgia, serif;
    background: linear-gradient(90deg, #ff6ec7, #ffd700, #7df9ff, #ff6ec7);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: shimmer 3s linear infinite;
  }
  @keyframes shimmer { to { background-position: 300% 0; } }
</style>

<p class="glitter">✨ so sparkly ✨</p>

Loading...

Blinking text

The <blink> tag is long gone, but you can bring it back. Use it sparingly.

Try it: edit the code and watch the resultAdd to my profile

<style>
  .blink { animation: blink 1s steps(1) infinite; color: red; font-weight: bold; }
  @keyframes blink { 50% { opacity: 0; } }
</style>

<p><span class="blink">NEW!</span> I updated my profile.</p>

Loading...

"Under construction" banner

Try it: edit the code and watch the resultAdd to my profile

<style>
  .construction {
    background: repeating-linear-gradient(45deg, #ffd400 0 20px, #222 20px 40px);
    padding: 6px; text-align: center;
  }
  .construction span { background: #ffd400; color: #222; font: bold 13px Verdana, sans-serif; padding: 4px 10px; display: inline-block; }
</style>

<div class="construction"><span>🚧 UNDER CONSTRUCTION 🚧</span></div>

Loading...

Starry or tiled page background

This one changes your whole page's background. (Or pick a background image in Profile Colours, no code needed.)

Try it: edit the code and watch the resultAdd to my profile

<style>
  html {
    background: #0b1020 url("https://www.xinsto.com/images/help/stars.png") repeat;
  }
  #xinsto-content { background: rgba(255, 255, 255, 0.92); }
</style>

<p>The page behind this box is now a starry night.</p>

Loading...

Sparkle cursor trail

Try it: edit the code and watch the resultAdd to my profile

<p>Move your mouse over here. ✨</p>

<script>
  (function () {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    var colors = ["#ff6ec7", "#ffd700", "#7df9ff", "#b388ff"];
    var last = 0;
    document.addEventListener("mousemove", function (e) {
      if (Date.now() - last < 40) return;
      last = Date.now();
      var s = document.createElement("span");
      s.textContent = "✦";
      s.style.cssText = "position:fixed;pointer-events:none;font-size:14px;transition:all .8s ease-out;z-index:9999;"
        + "left:" + e.clientX + "px;top:" + e.clientY + "px;color:" + colors[Math.floor(Math.random() * colors.length)];
      document.body.appendChild(s);
      requestAnimationFrame(function () {
        s.style.transform = "translateY(20px) scale(0.2)";
        s.style.opacity = "0";
      });
      setTimeout(function () { s.remove(); }, 800);
    });
  })();
</script>

Loading...

Falling snow (or hearts, or anything)

Try it: edit the code and watch the resultAdd to my profile

<p>Let it snow.</p>

<script>
  (function () {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    var flakes = ["❄", "❅", "❆"];      // try ["💖"] or ["🍕"]
    var style = document.createElement("style");
    style.textContent = "@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}"
      + ".flake{position:fixed;top:-20px;pointer-events:none;color:#9cc7ff;z-index:9999;animation:fall linear forwards}";
    document.head.appendChild(style);
    setInterval(function () {
      var f = document.createElement("span");
      f.className = "flake";
      f.textContent = flakes[Math.floor(Math.random() * flakes.length)];
      f.style.left = Math.random() * 100 + "vw";
      f.style.fontSize = (10 + Math.random() * 14) + "px";
      f.style.animationDuration = (4 + Math.random() * 5) + "s";
      document.body.appendChild(f);
      setTimeout(function () { f.remove(); }, 9000);
    }, 300);
  })();
</script>

Loading...

Typewriter

Try it: edit the code and watch the resultAdd to my profile

<p id="typed" style="font: 16px 'Courier New', monospace; min-height: 1.5em"></p>

<script>
  (function () {
    var lines = ["Be creative.", "Be Xinsto.", "brb ;)"];
    var el = document.getElementById("typed"), i = 0, c = 0, back = false;
    (function step() {
      el.textContent = lines[i].slice(0, c) + "_";
      if (!back && c < lines[i].length) { c++; setTimeout(step, 70); }
      else if (!back) { back = true; setTimeout(step, 1200); }
      else if (c > 0) { c--; setTimeout(step, 30); }
      else { back = false; i = (i + 1) % lines.length; setTimeout(step, 300); }
    })();
  })();
</script>

Loading...

Tabs

Try it: edit the code and watch the resultAdd to my profile

<style>
  .tabs button { border: 1px solid #999; background: #eee; padding: 5px 12px; cursor: pointer; font: inherit; }
  .tabs button.on { background: #fff; border-bottom-color: #fff; font-weight: bold; }
  .panel { border: 1px solid #999; padding: 12px; margin-top: -1px; }
  .panel[hidden] { display: none; }
</style>

<div class="tabs">
  <button type="button" class="on" data-tab="music">Music</button>
  <button type="button" data-tab="movies">Movies</button>
  <button type="button" data-tab="games">Games</button>
</div>
<div class="panel" id="music">Songs on repeat go here.</div>
<div class="panel" id="movies" hidden>Favourite movies go here.</div>
<div class="panel" id="games" hidden>Games I'm playing go here.</div>

<script>
  document.querySelectorAll(".tabs button").forEach(function (btn) {
    btn.onclick = function () {
      document.querySelectorAll(".tabs button").forEach(function (b) { b.classList.remove("on"); });
      document.querySelectorAll(".panel").forEach(function (p) { p.hidden = true; });
      btn.classList.add("on");
      document.getElementById(btn.getAttribute("data-tab")).hidden = false;
    };
  });
</script>

Loading...

Fold-out sections (no JavaScript needed)

Try it: edit the code and watch the resultAdd to my profile

<details>
  <summary><b>My top 5 albums</b> (click to open)</summary>
  <ol>
    <li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li>
  </ol>
</details>
<details>
  <summary><b>Embarrassing facts</b></summary>
  <p>I still have my first AIM screen name memorized.</p>
</details>

Loading...

Photo gallery with click-to-enlarge

Try it: edit the code and watch the resultAdd to my profile

<style>
  .pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
  .pics img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; border-radius: 4px; }
  #big { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; cursor: zoom-out; z-index: 999; }
  #big img { max-width: 92%; max-height: 92%; box-shadow: 0 0 30px #000; }
</style>

<div class="pics">
  <img src="https://www.xinsto.com/images/help/sunset.png" alt="Sunset">
  <img src="https://www.xinsto.com/images/help/stars.png" alt="Night sky">
  <img src="https://www.xinsto.com/images/help/pixels.png" alt="Pixel art">
</div>
<div id="big"><img alt=""></div>

<script>
  var big = document.getElementById("big");
  document.querySelectorAll(".pics img").forEach(function (img) {
    img.onclick = function () {
      big.querySelector("img").src = img.src;
      big.querySelector("img").alt = img.alt;
      big.style.display = "flex";
    };
  });
  big.onclick = function () { big.style.display = "none"; };
</script>

Loading...

Countdown

Try it: edit the code and watch the resultAdd to my profile

<p>Countdown to <b>New Year's</b>: <span id="cd" style="font-family: 'Courier New', monospace"></span></p>

<script>
  var target = new Date(new Date().getFullYear() + 1, 0, 1);   // Jan 1 next year; set your own date
  function tick() {
    var s = Math.max(0, Math.floor((target - new Date()) / 1000));
    var d = Math.floor(s / 86400), h = Math.floor(s % 86400 / 3600), m = Math.floor(s % 3600 / 60);
    document.getElementById("cd").textContent = d + "d " + h + "h " + m + "m " + (s % 60) + "s";
  }
  tick();
  setInterval(tick, 1000);
</script>

Loading...

Song of the day

Picks a different song each day, the same one for everybody who visits that day.

Try it: edit the code and watch the resultAdd to my profile

<p>🎧 Today's song: <b id="sotd"></b></p>

<script>
  var songs = [
    "[Song 1] - [Artist]",
    "[Song 2] - [Artist]",
    "[Song 3] - [Artist]",
    "[Song 4] - [Artist]"
  ];
  var day = Math.floor(Date.now() / 86400000);
  document.getElementById("sotd").textContent = songs[day % songs.length];
</script>

Loading...

Dark mode button

Try it: edit the code and watch the resultAdd to my profile

<style>
  .dark, .dark #xinsto-content { background: #111 !important; color: #eee !important; }
  .dark a { color: #8ab4ff !important; }
</style>

<button type="button" id="mode">🌙 Dark mode</button>

<script>
  document.getElementById("mode").onclick = function () {
    var on = document.documentElement.classList.toggle("dark");
    this.textContent = on ? "☀️ Light mode" : "🌙 Dark mode";
  };
</script>

Loading...

Spoiler text

Try it: edit the code and watch the resultAdd to my profile

<style>
  .spoiler { background: #222; color: #222; border-radius: 3px; padding: 0 3px; cursor: pointer; transition: color .2s; }
  .spoiler:hover, .spoiler:focus { color: #fff; }
</style>

<p>The ending? <span class="spoiler" tabindex="0">It was a dream the whole time.</span> (hover to reveal)</p>

Loading...

88x31 buttons

The classic web badge size. Make your own:

Try it: edit the code and watch the resultAdd to my profile

<style>
  .b88 {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    width: 88px; height: 31px; vertical-align: middle;
    font: bold 9px/1.1 Verdana, sans-serif; text-transform: uppercase;
    border: 1px solid #000;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 rgba(0,0,0,.4);
    text-decoration: none;
  }
</style>

<a class="b88" href="https://example.com" style="background: linear-gradient(#fff,#d8dfea); color: #0149cf">My<br>website</a>
<span class="b88" style="background: #000; color: #39ff14">I ♥ HTML</span>
<span class="b88" style="background: #ff4fa3; color: #fff">Be nice<br>online</span>

Loading...

Custom cursor

Try it: edit the code and watch the resultAdd to my profile

<style>
  .star-cursor, .star-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext y='20' font-size='20'%3E%E2%AD%90%3C/text%3E%3C/svg%3E") 12 12, auto;
  }
</style>

<div class="star-cursor" style="padding: 30px; background: #eef3ff; text-align: center">
  Move your mouse in here: the cursor is a star.
</div>

Loading...

To use it on your whole profile, change .star-cursor, .star-cursor * to html, html *. Keep links obviously clickable, though.

Want more?

Any HTML, CSS or JavaScript tutorial you find will work here, within the limits in What Works Here. Only paste code you understand, or code from a source you trust.

« What Works Here Troubleshooting »