JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Divestiture and Growth Story</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
        #timeline { 
            position: absolute; 
            bottom: 10px; 
            left: 50%; 
            transform: translateX(-50%);
            color: white; 
            font-size: 20px; 
            font-family: Arial, sans-serif; 
            background: rgba(0,0,0,0.7); 
            padding: 10px 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div id="timeline">Starting Story...</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
    let scene, camera, renderer, cubes = [];
    let timeline = document.getElementById('timeline');
    let phases = [];

    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
        camera.position.set(0, 20, 100); // Adjusted camera to see all objects

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Add light to the scene
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(0, 20, 20);
        scene.add(light);

        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

        // Phase 1: Initial Divestiture
        addCube(0, 0, personColor(0x00ff00), "350 People", 1000);
        addCube(20, 0, personColor(0x00ff00), "130 Product", 1500);

        // Phase 2: Three Verticals
        addCube(-20, -20, verticalColor(0x5bc0de), "3 Cloud", 3000);
        addCube(0, -20, verticalColor(0x5bc0de), "15 Teams", 3500);

        // Phase 3:...