CubeIcons

1 Instalação

Adicione os dois arquivos ao seu projeto e inclua-os no HTML:

      <link rel="stylesheet" href="cube-icons.css">

      <script src="cube-icons.js"></script>

Nenhuma dependência externa. O script detecta e renderiza automaticamente ao carregar a página.

Também funciona via npm install cube-icons.

2 Puzzles Disponíveis

Use a tag <i> com a classe base ci + o tipo do puzzle + um tamanho:

Cubos NxN (2x2 a 7x7)

ci-2x2

ci-3x3

ci-4x4

ci-5x5

ci-6x6

ci-7x7

Puzzles Especiais

ci-skewb

ci-pyraminx

ci-megaminx

ci-fto

ci-square1

ci-clock

Clique em qualquer card para ver o código HTML.

3 Ângulos de Visão

ci-front — Vista frontal (padrão)

3x3

skewb

fto

ci-iso — Vista isométrica

2x2

3x3

4x4

5x5

skewb

ci-top — Vista de cima

Cubos NxN e Megaminx: face U com bordas laterais. Skewb: face U com centros e cantos adjacentes.

3x3

5x5

skewb

skewb scrambled

megaminx

fto

fto dual

clock (dual)

ci-net — Vista planificada

Cubos NxN: cruz com as 6 faces quadradas. Skewb e Megaminx: faces desdobradas. Pyraminx e Square-1: planificada com ci-net (SQ1: U + barra + D).

2x2

3x3

4x4

skewb

megaminx

pyraminx

square-1

ci-back — Face traseira (Clock)

front

back

4 Modos de Cor

colorful

ci-mono

ci-outlined

fto mono

fto outlined

pyra mono

mega outlined

sq1 mono

clock outlined

Cor Personalizada

Use data-ci-color com ci-mono ou ci-outlined:

mono #e06c75

mono #61afef

fto outlined

pyra #c678dd

Esquemas de Cores

Use data-ci-scheme na vista planificada. Esquemas: wca, japanese, pastel, monokai.

wca

japanese

pastel

monokai

5 Tamanhos

Classes ci-1x a ci-10x, mais ci-15x, ci-20x, ci-30x, ci-40x e ci-50x em unidades em:

1x

2x

3x

4x

5x

6x

7x

8x

9x

10x

15x

20x

30x

40x

50x

6 Stickers Arredondados

Use data-ci-rounded (0 a 0.5). Padrão: 0.15.

0 (reto)

0.15 (padrão)

0.3

0.5 (máximo)

7 Embaralhamento (`ci-scrambled`)

Estado aleatório a cada carregamento (Square-1: scramble WCA de 10 movimentos via generateSquare1ScrambleAlg()).

3x3 iso

5x5 iso

3x3 top

3x3 net

skewb

skewb net

pyraminx

megaminx

fto

fto dual

square-1 scrambled

clock dual

data-ci-alg — Algoritmos

Aplica movimentos ao estado resolvido. Exemplos representativos por puzzle:

R U R' U' R' F R F'

x y x' y' R U R'

Skewb: y2 R U R' U'

Rw U Rw' U Rw U2 Rw'

R U R' U' B L B' L'

R U R' U L R U' L'

R-- D++ R++ D++ R-- D++ R++ D--

U R F L' D B BL BR'

(3,0) / (0,-3) / (0,3) / (-3,0) / (0,3) / (3,0) / (6,6) / (0,3) /

UR3+ DR6- DL2+ UL1- U4- R0+ D1- L5+ ALL4+

`ci-inverse` — Algoritmos inversos

Inverte a sequência de data-ci-alg automaticamente. Ex.: R U vira U' R'. Suportado em todos os puzzles com algoritmo, exceto Clock.

3x3: R U => U' R'

2x2: R U F

4x4: Rw U Rw' U2

5x5: R U2 L' F

Skewb: R U B

Pyraminx: U L' R

Megaminx: R-- D++ R++

FTO: U R F L'

Square-1: (3,0) / (0,-3) /

3x3 animate inverso

data-ci-state — Estado manual

Define stickers individualmente. Formato NxN: 6 faces com n×n letras.

estado custom

fto estado

Notação NxN (`data-ci-alg`)

Movimentos aceitos em data-ci-alg, ci-animate e ci-steps. Use espaço entre movimentos. Aspas: ' ou ' para primo; 2 para metade de giro (180° onde aplicável). A notação dos demais puzzles está na seção de cada um.

Tipo	Sintaxe	Exemplos
Face	`U R L F B D` + `'` / `2`	`R U R' U'`, `F2`
Camada	`2R`, `3U` … (nº = camada, 1 = face externa)	`2R U 2R'`
Wide	`w` ou minúscula sem prefixo numérico	`Rw`, `r`, `2Rw`
Wide explícito 1ª camada	`1f` = `F` (não wide)	`1f`, `1u`
Slices	`M E S` + `'` / `2`	`M' E`
Rotação do cubo	`x y z` + `'` / `2`	`x y x' y'`

Rotações do cubo (`x`, `y`, `z`)

Gira o puzzle inteiro em data-ci-alg. Exemplos em 4x4:

x

x'

y

y'

z

z'

x y

x y z

x y x' y'

3x3: x y x' y' R U R'

ci-inverse inverte a sequência (exceto Clock). Algoritmos inválidos são ignorados silenciosamente.

8 Modo OLL

ci-oll ativa vista top. Nos cubos NxN, FTO e Skewb, adesivos amarelos coloridos e demais em cinza; no Megaminx, face U em amarelo.

3x3 resolvido

3x3: F R U R' U' F'

3x3: R U R' U R U2 R'

megaminx

fto resolvido

fto: U R F L'

fto scrambled

skewb resolvido

skewb: R U R' U'

skewb scrambled

9 Visual Enhancements

Face Labels `ci-labels`

Letras nas faces para identificar cada lado. Ativado pela classe ci-labels. Tamanho via data-ci-label-size (multiplicador, padrão 1).

3x3 iso

3x3 top

3x3 net

3x3 front

Skewb

Pyraminx

Megaminx

FTO

Pequeno (0.5)

Grande (2)

Highlighting `data-ci-highlight`

Destacar peças específicas. Aceita notação WCA (3x3), sticker refs (U0) ou nomes de face.

UFR corner

U edges

F face

Front corners

U corners

Skewb U face

Pyraminx F

FTO U+R

Arrows / Markers `data-ci-arrows`

Setas entre stickers. Sintaxe: Face+Index>Face+Index. Estilos: ->, <->, --. Cores: :cor. Tamanho via data-ci-arrow-size (multiplicador, padrão 1).

Diagonais

Iso cross

Bidirecional

Linhas

Cross-face

Pyraminx

Skewb

Combinado

Setas finas (0.5)

Setas grossas (2.5)

10 Step-by-Step Viewer

Container div.ci-steps gera um ícone por move automaticamente.

<div class="ci-steps ci-4x" data-ci-type="3x3" data-ci-angle="iso" data-ci-alg="R U R' U' R' F R F'"></div>

Layout vertical

11 Sequence Player

Classe ci-animate com controles play/pause/step. Velocidade via data-ci-speed.

R U R' U' R' F R F'

R U R' U' B L B' L'

12 Clock

Formato de estado: "front/back/pins". Cada parte tem 9 horas (0-11). Pins: 4 binários.

Notação

Tipo	Sintaxe	Exemplos
Pino + horas	`UR3+` `DR6-` `ALL4+`	`UR3+ DR6- ALL4+`
Pin só	`U` `R` `D` `L` `UR` `DR` `DL` `UL` `ALL`	`UR` (sobe pino UR)
Virar puzzle	`y2`	`UR3+ y2 UR2-`
Multi-pin	`(UR DR)`	`(UR DR)3+`

horas custom

cor front

dual + estado

dual scrambled

Algoritmos Clock

Com data-ci-alg, a visão dual é usada automaticamente.

UR3+ DR6- DL2+ UL1- U4- R0+ D1- L5+ ALL4+

UR3+ DR6- ALL4+ y2 UR2-

U4- R3- D1+ L5+ ALL4- y2 U4+ R3- D5- L1- ALL6+

UR2- DR1+ DL1+ UL1- U4- R0+ D1- L5+ ALL4+ y2 U4+ R3- D5- L1- ALL6+

13 Square-1

Formato: "face_U/face_D". Peças: C (corner=2) ou E (edge=1). Cada face soma 12, total 8C+8E.

Por padrão mostra apenas a face U. Use ci-net para a vista planificada (U + barra central + D).

Notação

Tipo	Sintaxe	Exemplos
Turno	`(U,D)` em passos de 30°	`(3,0)`, `(0,-3)`
Slice	`/`	`(3,0) / (0,3) /`

Scramble: 10 movimentos gerados por generateSquare1ScrambleAlg().

face U (padrão)

net (U + barra + D)

scrambled

net scrambled

Algoritmos Square-1

Use data-ci-alg com notação WCA. Vista planificada (ci-net) mostra ambas camadas e barra central.

(1,0) / (-1,-1) / (0,1) / (3,0) / (0,-3) / (0,3) / (-3,0) / (0,3) /

(3,3) / (0,3) / (3,3) / (0,3) / (3,0) / (0,-3) / (0,3) / (-3,0) /

(3,0) / (0,-3) / (0,3) / (-3,0) / (0,3) / (3,0) / (6,6) / (0,3) / (3,0) /

(3,0) / (0,-3) / (0,3) / (-3,0) / (0,3) / (3,0) / (6,6) / (0,3) /

14 FTO (Face-Turning Octahedron)

Octaedro com 8 faces triangulares, cada uma subdividida em 9 stickers. Suporta vistas front, top (8 faces), ci-dual (frente + 4 faces opostas) e OLL mode.

Notação

Tipo	Sintaxe	Exemplos
Face (120°)	`U R F L D B BL BR` + `'` / `2`	`U R F L' D B BL BR'`

front

top

dual (U R F L + B BL D BR)

dual scrambled

OLL

scrambled

top scrambled

OLL scrambled

Estado: "FACE_U,FACE_R,FACE_F,FACE_L,FACE_D,FACE_B,FACE_BR,FACE_BL" — 9 letras por face.

Algoritmo: data-ci-alg com movimentos U, R, F, L, D, B, BL, BR e primes ('). No FTO, X2 equivale a X'. Modo OLL: ver seção 8.

15 Skewb

Vistas front, iso, top e net.

Notação

Tipo	Sintaxe	Exemplos
Canto	`R L U B` + `'`	`R U R' U'`
Rotação do puzzle	`x y z` + `'` / `2`	`y2 R U R' U'`

Rotações do puzzle (`x`, `y`, `z`)

x

x'

y

y'

z

z'

x y

x y z

x y x' y'

y2 R U R' U'

Vista Frontal

R U R' U' B L B' L'

R L U B' R' L' U' B

scrambled

Vista Isométrica

R U R' U' B L B' L'

R L U B' R' L' U' B

scrambled

Vista de Cima (Top)

Face U no centro, centros laterais (B, F, L, R) e dois cantos adjacentes em cada vértice.

solved

scrambled

R U R' U' B L B' L'

highlight U

Visão Planificada (Net)

R U R' U' B L B' L'

scrambled

16 Pyraminx

Vistas front, iso e net.

Notação

Tipo	Sintaxe	Exemplos
Camada (120°)	`U L R B` + `'`	`R U R' U L`
Tip (120°)	`u l r b` + `'`	`u l r b`, `R u R'`

R U R' U L R U' L'

L R U' L' R' U B L

scrambled

Tips (`u`, `l`, `r`, `b`)

Letras minúsculas giram apenas a ponta de 120°. Maiúsculas giram a camada inteira.

u

u'

l

l'

r

r'

b

b'

u l r b

U u R r

R u R' l' B r

tips + camadas

scrambled (com tips)

17 Megaminx

Vistas top e net.

Notação

Tipo	Sintaxe	Exemplos
Pochmann	`R++` `R--` `D++` `D--`	`R-- D++ R++ D++`
Face (72°)	`U F R BR BL L D DL DR DBR B DBL` + `'` / `2`	`R F L' BR BL' U`
Faces	Topo: U F R BR BL L — Base: D DL DR DBR B DBL

Pochmann

R-- D++ R++ D++ R-- D++ R++ D--

R++ D-- R++ D-- R++ D-- R-- D++

scrambled

Notação por Faces

R F L' BR BL' U R' F'

scrambled net

18 Vista 3D

Ângulos via data-ci-rotate="X,Y" (graus). Cada puzzle com sua rotação padrão.

3x3
25,35 — inclinação + rotação Y

skewb
20,40 — faces U, F e R visíveis

pyraminx
20,40 — perspectiva 3D padrão

megaminx
25,50 — face U inclinada

fto
25,50 — face frontal + topo

square-1
25,30 — cubeshape em 3D

Interativo (`ci-interactive`)

Arraste com mouse ou toque para girar o puzzle.

3x3
25,35 (padrão interativo)

skewb
20,40 (auto)

pyraminx
20,35 (padrão interativo)

megaminx
25,35 (padrão interativo)

fto
20,35 (padrão interativo)

square-1
25,30 (auto)

19 Uso Inline

Ícones se alinham com o texto como FontAwesome:

Eu resolvo o em 20 segundos! Também pratico e . O FTO é meu próximo desafio. Até o clock é divertido!

      Eu resolvo o <i class="ci ci-3x3 ci-iso ci-2x"></i> em 20 segundos!
    

20 Referência Rápida

Classes CSS

Categoria	Classes	Descrição
Puzzle	`ci-2x2` `ci-3x3` `ci-4x4` `ci-5x5` `ci-6x6` `ci-7x7`	Cubos NxN
	`ci-skewb` `ci-pyraminx` `ci-megaminx` `ci-fto` `ci-square1` `ci-clock`	Puzzles especiais
Ângulo	`ci-front` `ci-iso` `ci-top` `ci-dual` `ci-net` `ci-back`	Vista do puzzle
Cor	`ci-colorful` `ci-mono` `ci-outlined`	Modo de cor
Tamanho	`ci-1x`–`ci-10x`, `ci-15x`, `ci-20x`, `ci-30x`, `ci-40x`, `ci-50x`	Em unidades em
Estado	`ci-scrambled` `ci-oll` `ci-interactive` `ci-animate` `ci-labels` `ci-inverse`	Modifica estado / interação / visual
Container	`ci-steps` `ci-steps-vertical`	Visualizador passo a passo

Atributos data-*

Atributo	Descrição	Exemplo
`data-ci-rotate`	Rotação 3D (rotX, rotY em graus)	`"20,40"`
`data-ci-alg`	Algoritmo (notação na seção de cada puzzle)	`"R U R' U'"` `"R++ D--"` `"UR3+"` `"(3,0) /"`
`data-ci-state`	Estado manual dos stickers	`"WWW...,RRR..."`
`data-ci-rounded`	Arredondamento (0–0.5)	`"0.25"`
`data-ci-color`	Cor para mono/outlined	`"#e06c75"`
`data-ci-scheme`	Esquema de cores	`"japanese"` `"pastel"` `"monokai"`
`data-ci-theme`	Tema (claro/escuro)	`"light"` `"dark"`
`data-ci-clock-front`	Cor de fundo (clock front)	`"#1a3a5c"`
`data-ci-clock-back`	Cor de fundo (clock back)	`"#5c1a1a"`
`data-ci-speed`	Velocidade do player (`ci-animate`)	`"600"`
`data-ci-loop`	Loop automático no player	(boolean)
`data-ci-autoplay`	Inicia player automaticamente	(boolean)
`data-ci-highlight`	Destacar peças (WCA ou face)	`"UFR,UF"`
`data-ci-arrows`	Setas entre stickers	`"U0>U2"`
`data-ci-label-size`	Tamanho das letras (`ci-labels`)	`"1.5"` `"0.5"`
`data-ci-arrow-size`	Tamanho das setas	`"2"` `"0.5"`

Compatibilidade de Ângulos

Vista 3D via data-ci-rotate ou ci-interactive (arrastar para girar).

Puzzle	front	iso	top	dual	net	back	OLL	Alg	Scramble	3D
Cubos NxN	sim	sim	sim	—	sim	—	sim	sim	sim	sim
Skewb	sim	sim	sim	—	sim	—	sim	sim	sim	sim
Pyraminx	sim	—	—	—	sim	—	—	sim	sim	sim
Megaminx	sim	—	sim	—	sim	—	sim	sim	sim	sim
FTO	sim	—	sim	sim	—	—	sim	sim	sim	sim
Square-1	sim	—	—	—	sim	—	—	sim	sim	sim
Clock	sim	—	—	sim	—	sim	—	sim	sim	—

21 API JavaScript

Objeto global CubeIcons exposto após carregar cube-icons.js:

      // Renderização

      CubeIcons.render({ type: "3x3", angle: "iso", scrambled: true });

      CubeIcons.processAll();

      CubeIcons.watch();

      // Estados iniciais (createState)

      CubeIcons.createState.nxn(3);

      CubeIcons.createState.skewb();

      CubeIcons.createState.pyraminx();

      CubeIcons.createState.megaminx();

      CubeIcons.createState.fto();

      CubeIcons.createState.square1();

      CubeIcons.createState.clock();

      // Aplicar algoritmos

      CubeIcons.applyAlgorithm(state, "R U R' U'", 3);

      CubeIcons.applySkewbAlgorithm(state, "R U R' U' B L B' L'");

      CubeIcons.applyPyraminxAlgorithm(state, "R u R' U l");

      CubeIcons.applyMegaminxAlgorithm(state, "R++ D-- R++ D--");

      CubeIcons.applyFTOAlgorithm(state, "U R F L' D B BL BR'");

      CubeIcons.applySquare1Algorithm(state, "(3,0) / (0,3) /");

      CubeIcons.applyClockAlgorithm(state, "UR3+ DR6- y2");

      // Square-1 helpers

      CubeIcons.parseSquare1Moves("(3,0) /");

      CubeIcons.applySquare1MoveParsed(state, move);

      CubeIcons.sq1CanSlash(state);

      // Step viewer

      CubeIcons.getAlgorithmSteps({ type: "3x3", alg: "R U R' U'" });

      // Cores e tema

      CubeIcons.COLORS;

      CubeIcons.COLOR_SCHEMES;

      CubeIcons.setScheme("pastel");

      CubeIcons.setTheme("dark");

1 Instalação

2 Puzzles Disponíveis

Cubos NxN (2x2 a 7x7)

Puzzles Especiais

3 Ângulos de Visão

ci-front — Vista frontal (padrão)

ci-iso — Vista isométrica

ci-top — Vista de cima

ci-net — Vista planificada

ci-back — Face traseira (Clock)

4 Modos de Cor

Cor Personalizada

Esquemas de Cores

5 Tamanhos

6 Stickers Arredondados

7 Embaralhamento (ci-scrambled)

data-ci-alg — Algoritmos

ci-inverse — Algoritmos inversos

data-ci-state — Estado manual

Notação NxN (data-ci-alg)

Rotações do cubo (x, y, z)

8 Modo OLL

9 Visual Enhancements

Face Labels ci-labels

Highlighting data-ci-highlight

Arrows / Markers data-ci-arrows

10 Step-by-Step Viewer

Layout vertical

11 Sequence Player

12 Clock

Notação

Algoritmos Clock

13 Square-1

Notação

Algoritmos Square-1

14 FTO (Face-Turning Octahedron)

Notação

15 Skewb

Notação

Rotações do puzzle (x, y, z)

Vista Frontal

Vista Isométrica

Vista de Cima (Top)

Visão Planificada (Net)

16 Pyraminx

Notação

Tips (u, l, r, b)

17 Megaminx

Notação

Pochmann

Notação por Faces

18 Vista 3D

Interativo (ci-interactive)

19 Uso Inline

20 Referência Rápida

Classes CSS

Atributos data-*

Compatibilidade de Ângulos

21 API JavaScript

7 Embaralhamento (`ci-scrambled`)

`ci-inverse` — Algoritmos inversos

Notação NxN (`data-ci-alg`)

Rotações do cubo (`x`, `y`, `z`)

Face Labels `ci-labels`

Highlighting `data-ci-highlight`

Arrows / Markers `data-ci-arrows`

Rotações do puzzle (`x`, `y`, `z`)

Tips (`u`, `l`, `r`, `b`)

Interativo (`ci-interactive`)