Simpler text cube with just random characters (implement your own props)

SimpleTextCube.tsx

import React, { useState, useEffect } from ‘react’;

const TextCube = () => {
const [faceTexts, setFaceTexts] = useState([’’, ‘’, ‘’, ‘’, ‘’, ‘’]);

// Character sets for each face to make them visually distinct
const charSets = [
‘@#$%^&*()_+-={}[]|:;<>?,./~`!’, // Front
’XOXOXO#$%^&*’, // Right
‘01’, // Top
‘▓░█▒▓░█▒’, // Back
‘/\|_-’, // Left
‘+-=*~.:’, // Bottom
];

// Maximum characters to display per face
const maxChars = 140;

useEffect(() => {
const interval = setInterval(() => {
setFaceTexts(prev => prev.map((text, index) => {
const charSet = charSets[index];
const newChar = charSet[Math.floor(Math.random() * charSet.length)];
const newText = text + newChar;
// Keep only the last maxChars characters
return newText.slice(-maxChars);
}));
}, 100);

```
return () => clearInterval(interval);
```

}, []);

const faceStyles = {
front: {
transform: ‘translateZ(100px)’,
color: ‘#0ff’,
background: ‘rgba(0, 255, 255, 0.05)’,
borderColor: ‘rgba(0, 255, 255, 0.3)’,
},
right: {
transform: ‘rotateY(90deg) translateZ(100px)’,
color: ‘#f0f’,
background: ‘rgba(255, 0, 255, 0.05)’,
borderColor: ‘rgba(255, 0, 255, 0.3)’,
},
top: {
transform: ‘rotateX(90deg) translateZ(100px)’,
color: ‘#ff0’,
background: ‘rgba(255, 255, 0, 0.05)’,
borderColor: ‘rgba(255, 255, 0, 0.3)’,
},
back: {
transform: ‘rotateY(180deg) translateZ(100px)’,
color: ‘#0f0’,
background: ‘rgba(0, 255, 0, 0.05)’,
borderColor: ‘rgba(0, 255, 0, 0.3)’,
},
left: {
transform: ‘rotateY(-90deg) translateZ(100px)’,
color: ‘#f80’,
background: ‘rgba(255, 136, 0, 0.05)’,
borderColor: ‘rgba(255, 136, 0, 0.3)’,
},
bottom: {
transform: ‘rotateX(-90deg) translateZ(100px)’,
color: ‘#88f’,
background: ‘rgba(136, 136, 255, 0.05)’,
borderColor: ‘rgba(136, 136, 255, 0.3)’,
},
};

const containerStyle = {
width: ‘100vw’,
height: ‘100vh’,
display: ‘flex’,
justifyContent: ‘center’,
alignItems: ‘center’,
background: ‘#1a1a1a’,
perspective: ‘1000px’,
margin: 0,
padding: 0,
};

const cubeStyle = {
width: ‘200px’,
height: ‘200px’,
position: ‘relative’,
transformStyle: ‘preserve-3d’,
animation: ‘rotate 10s infinite linear’,
};

const faceBaseStyle = {
position: ‘absolute’,
width: ‘200px’,
height: ‘200px’,
display: ‘flex’,
alignItems: ‘center’,
justifyContent: ‘center’,
fontSize: ‘14px’,
lineHeight: ‘1’,
overflow: ‘hidden’,
wordBreak: ‘break-all’,
padding: ‘10px’,
boxSizing: ‘border-box’,
border: ‘1px solid’,
fontFamily: ‘monospace’,
};

return (
<div style={containerStyle}>
<style>{`@keyframes rotate { from { transform: rotateX(-20deg) rotateY(30deg); } to { transform: rotateX(-20deg) rotateY(390deg); } }`}</style>
<div style={cubeStyle}>
{Object.entries(faceStyles).map(([face, style], index) => (
<div
key={face}
style={{
…faceBaseStyle,
…style,
borderColor: style.borderColor,
}}
>
<p style={{ margin: 0, letterSpacing: ‘2px’ }}>
{faceTexts[index]}
</p>
</div>
))}
</div>
</div>
);
};

export default TextCube;