Interactive 3D Morphing Globe - Sphere to Star

3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

This tailwind example is contributed by Visernic, on 10-Jun-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Card Hero Other

Author Visernic

Tailwind v3.4 429 1

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta name="author" content="Mostafa Niloy">
    <meta name="copyright" content="Visernic Limited">
    <meta name="description" content="3D Morphing Globe built by Mostafa Niloy - Visernic Limited">

<title>3D Morphing Globe | Visernic Limited</title>

body {
            @apply m-0 bg-black text-white overflow-hidden font-['Inter',sans-serif];
        }

/* Custom Layer for complex states that JS relies on */
        @layer components {
            .theme-button.active {
                @apply scale-110 border-white shadow-[0_0_12px_rgba(255,255,255,0.5)];
            }
            .glass-panel {
                @apply bg-white/10 backdrop-blur-[15px] rounded-2xl border border-white/20 shadow-[0_8px_32px_0_rgba(0,0,0,0.37)_inset_0_1px_1px_rgba(255,255,255,0.2)];
            }
        }
    </style>
</head>
<body class="relative w-screen h-screen">

<div class="absolute bottom-3 right-4 z-50 text-white/30 text-xs font-mono pointer-events-none select-none tracking-wider">
        © Built by <span class="font-bold text-white/50">Mostafa Niloy</span> | visernic.com
    </div>

<label id="shape-toggle-container" for="shape-toggle-input" class="absolute top-5 max-sm:top-4 left-1/2 -translate-x-1/2 z-20 p-1 bg-white/10 backdrop-blur-[15px] rounded-full border border-white/20 shadow-[0_4px_20px_rgba(0,0,0,0.3)] flex items-center cursor-pointer">
        <input type="checkbox" id="shape-toggle-input" class="peer hidden">
        <span class="px-5 py-2 text-sm font-semibold text-white/70 transition-colors duration-400 select-none z-10">Sphere</span>
        <span class="px-5 py-2 text-sm font-semibold text-white/70 transition-colors duration-400 select-none z-10">Star</span>
        
        <div id="shape-toggle-highlighter" class="absolute top-[5px] left-[5px] w-[calc(50%-5px)] h-[calc(100%-10px)] bg-white/15 backdrop-blur-[5px] rounded-full border border-white/20 shadow-[0_2px_10px_rgba(0,0,0,0.2)_inset_0_1px_1px_rgba(255,255,255,0.2)] transition-transform duration-400 ease-[cubic-bezier(0.25,1,0.5,1)] z-0 peer-checked:translate-x-full"></div>
    </label>

<div id="controls-panel" class="glass-panel absolute z-10 p-[15px] cursor-move select-none top-5 right-5 max-sm:w-auto max-sm:left-1/2 max-sm:-translate-x-1/2 max-sm:top-auto max-sm:bottom-5 max-sm:cursor-default transition-opacity duration-200">
        <div id="theme-selector-title" class="font-semibold text-[15px] mb-3 text-center text-white/90">Theme</div>
        <div class="grid grid-cols-3 gap-2.5 justify-items-center">
            <button class="theme-button w-[30px] h-[30px] rounded-full border-2 border-white/30 cursor-pointer transition-all duration-200 outline-none hover:scale-110 hover:border-white/70 focus:scale-110 focus:border-white/70 bg-gradient-to-tr from-[#084bd6] via-[#06338d] to-[#1a88f6]" id="theme-1" data-theme="0" aria-label="Theme 1"></button>
            <button class="theme-button w-[30px] h-[30px] rounded-full border-2 border-white/30 cursor-pointer transition-all duration-200 outline-none hover:scale-110 hover:border-white/70 focus:scale-110 focus:border-white/70 bg-gradient-to-tr from-[#F59E0B] via-[#DC2626] to-[#7F1D1D]" id="theme-2" data-theme="1" aria-label="Theme 2"></button>
            <button class="theme-button w-[30px] h-[30px] rounded-full border-2 border-white/30 cursor-pointer transition-all duration-200 outline-none hover:scale-110 hover:border-white/70 focus:scale-110 focus:border-white/70 bg-gradient-to-tr from-[#10B981] via-[#FACC15] to-[#FB923C]" id="theme-4" data-theme="2" aria-label="Theme 3"></button>
        </div>
    </div>

import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
        import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
        import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

const config = {
            activePaletteIndex: 1,
            isMorphed: false,
            morphProgress: 0,
        };

const colorPalettes = [
            [new THREE.Color(0x4F46E5), new THREE.Color(0x7C3AED), new THREE.Color(0xC026D3), new THREE.Color(0xDB2777)],
            [new THREE.Color(0x084bd6), new THREE.Color(0x007efe), new THREE.Color(0x1a88f6), new THREE.Color(0x06338d)],
            [new THREE.Color(0x10B981), new THREE.Color(0xA3E635), new THREE.Color(0xFACC15), new THREE.Color(0xFB923C)]
        ];

const controls = new OrbitControls(camera, renderer.domElement);
        Object.assign(controls, { enableDamping: true, dampingFactor: 0.05, rotateSpeed: 0.5, minDistance: 10, maxDistance: 100, autoRotate: true, autoRotateSpeed: 0.1, enablePan: false });
        const composer = new EffectComposer(renderer);
        composer.addPass(new RenderPass(scene, camera));
        const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.3, 0.3, 0.7);
        composer.addPass(bloomPass);
        composer.addPass(new FilmPass(0.25, 0.5, 2048, false));
        composer.addPass(new OutputPass());

let morphableGeometries;

function createMorphableGeometries() {
            const scale = 15;
            const baseGeometry = new THREE.IcosahedronGeometry(scale, 5);
            const sphereVertices = [];
            const spherePositions = baseGeometry.attributes.position.array;

morphableGeometries = {
                sphereNodePositions: sphereVertices.flatMap(v => [v.x, v.y, v.z]),
                starNodePositions: starVertices.flatMap(v => [v.x, v.y, v.z]),
                sphereConnectionPositions,
                starConnectionPositions
            };
        }

let nodesMesh, connectionsMesh;

function createVisualization() {
            if (nodesMesh) scene.remove(nodesMesh);
            if (connectionsMesh) scene.remove(connectionsMesh);

const palette = colorPalettes[config.activePaletteIndex];
            
            const nodeGeometry = new THREE.BufferGeometry();
            nodeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(morphableGeometries.sphereNodePositions, 3));
            nodeGeometry.morphAttributes.position = [new THREE.Float32BufferAttribute(morphableGeometries.starNodePositions, 3)];
            
            const nodeColors = new Float32Array(morphableGeometries.sphereNodePositions.length);
            for (let i = 0; i < morphableGeometries.sphereNodePositions.length / 3; i++) {
                const color = palette[Math.floor(Math.random() * palette.length)];
                nodeColors[i*3] = color.r;
                nodeColors[i*3+1] = color.g;
                nodeColors[i*3+2] = color.b;
            }
            nodeGeometry.setAttribute('color', new THREE.Float32BufferAttribute(nodeColors, 3));
            
            const nodeMaterial = new THREE.ShaderMaterial({
                uniforms: pulseUniforms,
                vertexShader: nodeShader.vertexShader,
                fragmentShader: nodeShader.fragmentShader,
                transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
                morphTargets: true
            });
            nodesMesh = new THREE.Points(nodeGeometry, nodeMaterial);
            nodesMesh.morphTargetInfluences = [0];
            scene.add(nodesMesh);

const connectionGeometry = new THREE.BufferGeometry();
            connectionGeometry.setAttribute('position', new THREE.Float32BufferAttribute(morphableGeometries.sphereConnectionPositions, 3));
            connectionGeometry.morphAttributes.position = [new THREE.Float32BufferAttribute(morphableGeometries.starConnectionPositions, 3)];
            
            const connectionColors = [];
            for(let i = 0; i < morphableGeometries.sphereConnectionPositions.length / 6; i++) {
                const color = palette[Math.floor(Math.random() * palette.length)];
                connectionColors.push(color.r, color.g, color.b, color.r, color.g, color.b);
            }
            connectionGeometry.setAttribute('color', new THREE.Float32BufferAttribute(connectionColors, 3));
            
            const connectionMaterial = new THREE.ShaderMaterial({
                uniforms: pulseUniforms,
                vertexShader: connectionShader.vertexShader,
                fragmentShader: connectionShader.fragmentShader,
                transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
                morphTargets: true
            });
            connectionsMesh = new THREE.LineSegments(connectionGeometry, connectionMaterial);
            connectionsMesh.morphTargetInfluences = [0];
            scene.add(connectionsMesh);
        }

const raycaster = new THREE.Raycaster();
        const pointer = new THREE.Vector2();
        let lastPulseIndex = 0;
        function triggerPulse(clientX, clientY) {
            pointer.x = (clientX / window.innerWidth) * 2 - 1;
            pointer.y = -(clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(pointer, camera);
            
            const sphere = new THREE.Sphere(new THREE.Vector3(0,0,0), 15);
            const intersectionPoint = new THREE.Vector3();
            if (raycaster.ray.intersectSphere(sphere, intersectionPoint)) {
                const time = clock.getElapsedTime();
                lastPulseIndex = (lastPulseIndex + 1) % 3;
                pulseUniforms.uPulsePositions.value[lastPulseIndex].copy(intersectionPoint);
                pulseUniforms.uPulseTimes.value[lastPulseIndex] = time;
            }
        }

window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            composer.setSize(window.innerWidth, window.innerHeight);
        });

renderer.domElement.addEventListener('click', (e) => {
            if (e.target.closest('#shape-toggle-container') || e.target.closest('#controls-panel')) return;
            triggerPulse(e.clientX, e.clientY);
        });
        renderer.domElement.addEventListener('touchstart', (e) => {
            if (e.target.closest('#shape-toggle-container') || e.target.closest('#controls-panel')) return;
            e.preventDefault();
            if (e.touches.length > 0) {
                triggerPulse(e.touches[0].clientX, e.touches[0].clientY);
            }
        }, { passive: false });
        
        document.querySelectorAll('.theme-button').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                updateTheme(parseInt(btn.dataset.theme, 10));
                document.querySelectorAll('.theme-button').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
            });
        });

document.getElementById('shape-toggle-input').addEventListener('change', (e) => {
            config.isMorphed = e.target.checked;
        });
        
        const clock = new THREE.Clock();
        function animate() {
            requestAnimationFrame(animate);
            const t = clock.getElapsedTime();
            pulseUniforms.uTime.value = t;

const morphTarget = config.isMorphed ? 1 : 0;
            config.morphProgress = THREE.MathUtils.lerp(config.morphProgress, morphTarget, 0.05);
            
            if (nodesMesh && connectionsMesh) {
                nodesMesh.morphTargetInfluences[0] = config.morphProgress;
                connectionsMesh.morphTargetInfluences[0] = config.morphProgress;
            }

starField.rotation.y += 0.0001;
            controls.update();
            composer.render();
        }

function init() {
            createMorphableGeometries();
            createVisualization();
            
            document.querySelectorAll('.theme-button').forEach(b => b.classList.remove('active'));
            document.querySelector(`.theme-button[data-theme="${config.activePaletteIndex}"]`).classList.add('active');

animate();
        }
        init();
    </script>
</body>
</html>

Related Examples

cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Background image section

Marc

2 years ago

7.3k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k
Payment Cards

Shammi Nethupul

2 years ago

3k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

1.9k
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.8k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.6k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.3k