---
title: Rubik's Cube Scrambler
date: 2024-11-13T15:34:22-08:00
tags:
  - Tech
  - Puzzles
  - Rubik's Cube
  - HTML
  - JavaScript
  - CSS
  - Web Components
---

Here's a silly thing I made while I was home sick today. It's a widget that
produces a randomized pattern of [moves][rmoves] to scramble a 3×3 [Rubik's
Cube][rcube].

<figure class="figure--main-column figure--object">
  {{< rubiks/scrambler >}}
</figure>

This thing is a [Web Component][wc]. The interactive logic lives inside a custom
[HTMLElement][htmlelement], and the content and styling are specified inside a
[`<template>`][template] element.

[rcube]: https://www.rubiks.com
[rmoves]: https://jperm.net/3x3/moves
[wc]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components
[htmlelement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
[template]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template