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

register
this is register form

aditya_sharma

3 months ago

513
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k
Modern Architecture Blog & News Grid UI Layout
A clean, minimal, and fully responsive Blog/News grid layout built with Tailwind CSS. Features a 2-column article grid with fixed title alignment, clean pagination, and a sticky sidebar with categories & CTA widget. Perfect for architectural firms, magazine portals, and CMS integrations.

Alief Malik

2 months ago

190
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Abdul Baset Bappy

1 year ago

2k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Lekhraj Ghimire

1 year ago

2.5k
background animation
background animation

Jayendra Madara

2 years ago

4k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k
Checkbox models
Tailwind Checkbox models

QQ-VVN

1 year ago

1.6k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

3k
Simple count down timer

Gopi Yadav

3 years ago

15.7k
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

2 years ago

2.9k