The Life of a Singularity

The Life of a Singularity is the story of one powerful idea evolving into endless possibilities. It symbolizes innovation, intelligence, and the continuous pursuit of creating smarter, faster, and more connected experiences.

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

Other

Author Lokesh H

Tailwind v3.4 63

Fork Fullscreen

<div id="vignette"></div>
<div id="overlay">
    <div class="header">
        <div class="title" id="main-title">Stable Singularity</div>
        <div class="status-pill" id="status-text">Topology: Nominal</div>
    </div>
    <div class="hud-bottom">
        <div>
            <div class="metric">MASS_INDEX: <span class="val">4.2M SOL</span></div>
            <div class="metric">LENSING: <span class="val" id="lensing-val">SCHWARZSCHILD</span></div>
        </div>
        <div style="text-align: right">
            <div class="metric">RELATIVITY: <span class="val" id="vel-val">0.45c</span></div>
            <div class="metric">RADIATION: <span class="val">DETECTION ON</span></div>
        </div>
    </div>
</div>

const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(60, 30, 60);

const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.6;
    document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.03;
    controls.autoRotate = true;
    controls.autoRotateSpeed = 0.4;

const coreGroup = new THREE.Group();
    scene.add(coreGroup);

const bhMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
    const bhGeo = new THREE.SphereGeometry(4, 64, 64);
    coreGroup.add(new THREE.Mesh(bhGeo, bhMat));

const instancedDisk = new THREE.InstancedMesh(streakGeo, diskMaterial, instanceCount);
    const dummy = new THREE.Object3D();

for (let i = 0; i < instanceCount; i++) {
        const r = 5 + Math.pow(Math.random(), 1.3) * 40;
        const angle = Math.random() * Math.PI * 2;
        dummy.position.set(Math.cos(angle) * r, (Math.random() - 0.5) * (8 / r), Math.sin(angle) * r);
        dummy.lookAt(dummy.position.x + Math.sin(angle), dummy.position.y, dummy.position.z - Math.cos(angle));
        dummy.updateMatrix();
        instancedDisk.setMatrixAt(i, dummy.matrix);
    }
    scene.add(instancedDisk);

const config = [
        { 
            title: "Stable Singularity", status: "Topology: Nominal", 
            morph: 0.1, compress: 1.0, intensity: 1.0, rotate: 0.4, camY: 25, camDist: 85, orbit: 1.0,
            color: "#00f3ff", vel: "0.45c"
        },
        { 
            title: "Accretion Turbulence", status: "Topology: Fluctuating", 
            morph: 4.5, compress: 1.15, intensity: 1.4, rotate: 1.5, camY: 45, camDist: 95, orbit: 1.8,
            color: "#ffaa00", vel: "0.78c"
        },
        { 
            title: "Relativistic Collapse", status: "Topology: Critical", 
            morph: 0.8, compress: 0.38, intensity: 3.5, rotate: 5.0, camY: 12, camDist: 55, orbit: 4.5,
            color: "#ff0044", vel: "0.99c"
        }
    ];

let stateIdx = 0;
    const mainTitle = document.getElementById('main-title');
    const statusText = document.getElementById('status-text');
    const velVal = document.getElementById('vel-val');
    const camControl = { distance: 85 };

setInterval(transition, 10000);

const clock = new THREE.Clock();
    function animate() {
        const time = clock.getElapsedTime();
        diskMaterial.uniforms.uTime.value = time;
        auraMat.uniforms.uTime.value = time;
        instancedDisk.rotation.y += 0.0005;
        const currentDir = new THREE.Vector3().subVectors(camera.position, controls.target).normalize();
        camera.position.x = controls.target.x + currentDir.x * camControl.distance;
        camera.position.z = controls.target.z + currentDir.z * camControl.distance;
        controls.update();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });

animate();
</script>

Related Examples

Font testing
comparing old fonts to tailwind with clamp sizing

Sherry Lynne

1 month ago

358
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

473
Indented Media Panels

Sherry Lynne

1 month ago

79
hello world
by salvator

Anonymous

1 year ago

1.2k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

KULDEEP

1 year ago

1.1k
Calculator
A Basic Calculator

Debbie F

2 years ago

2.4k
lachisa
Lachisa is a modern and innovative solution designed to simplify everyday experiences through smart technology, seamless performance, and user-friendly design. It empowers users with efficiency, reliability, and a future-ready approach.

Lokesh H

2 months ago

331
Organization Hierarchy list

Anonymous

3 years ago

9.8k
mailer
gmail style

МОЙДОЫР

10 months ago

737
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
chat bar
live chat

gidy

1 year ago

2.2k
Invoice
Invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k