scary-cube | Vaadin

Rubik's Cube as web-component based on lit-element


Rubik's Cube implemented as web component based on lit-element.

Needs to be sized (best by fitting it into a parent element) to correctly display and scale.

Orientation of cube can be changed with mouse and touch gestures.

Moves need to be performed using the addMove or addMoves methods, using SiGN notation.

Colors of the cube can be changed using the following custom CSS properties, matching the sides of the cube

scary-cube {
  --cube-color-u: white;
  --cube-color-d: yellow;
  --cube-color-f: green;
  --cube-color-b: #3333FF;
  --cube-color-l: orange;
  --cube-color-r: red;

Additionaly the speed of the move animations can be adjusted with the --cube-speed parameter

scary-cube {
  --cube-speed: 0.4s;


Link to this version
ImportedReleased 05 October 2018Apache License 2.0
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install @scarygami/scary-cube"@2.1.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.1.0


  • @polymer/lit-element#^0.6.1
  • @polymer/polymer#^3.0.0
  • resize-observer-polyfill#^1.5.0