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 112

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

Profile

John

21 hours ago

4
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.9k
baseball bros
baseball

Abel Wright

7 months ago

674
Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Hamza Atig

9 months ago

888
Font testing
comparing old fonts to tailwind with clamp sizing

Sherry Lynne

2 months ago

359
Login
A login form

Anonymous

1 week ago

12
Todo List with Dark theme
Todo List with Dark theme

Muzammil Riaz

1 year ago

1.9k
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Walid Ahmad

2 years ago

2.9k
Collapsible content

Rafferty Kim

3 years ago

14.7k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

711
News feed

Bunny

3 years ago

14.2k
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

11 months ago

745