<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html lang="id">
    <head>
    <head>
        <script>!function(e,t,a,r,g){e[r]=e[r]||[],e[r].push({"gtm.start":new Date().getTime(),event:"gtm.js"});var n=t.getElementsByTagName(a)[0],s=t.createElement(a);s.async=!0,s.src="https://www.googletagmanager.com/gtm.js?id="+g+("dataLayer"!=r?"&l="+r:""),n.parentNode.insertBefore(s,n)}(window,document,"script","dataLayer","GTM-5DPDT7G5");</script>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>XMTN - Halaman Tidak Ditemukan</title>
        <meta name="description" content="Setiap bisnis memiliki cerita uniknya. Itulah mengapa kami fokus pada pembuatan custom software, aplikasi, dan website untuk mencerminkan esensi dan tujuan khusus perusahaan Anda.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="title" content="XMTN eStudio">
        <meta name="keywords" content="developer,app,web,mobile,game,indonesia">
        <meta name="robots" content="index, follow">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta property="og:title" content="XMTN eStudio">
        <meta property="og:url" content="https://xmtn.net">
        <meta property="og:image" content="https://xmtn.net/images/logo-xmtn-red.svg">
        <meta property="og:description" content="Setiap bisnis memiliki cerita uniknya. Itulah mengapa kami fokus pada pembuatan custom software, aplikasi, dan website untuk mencerminkan esensi dan tujuan khusus perusahaan Anda.">
        <meta property="og:type" content="website">

        <meta name="twitter:card" content="summary">
        <meta property="twitter:title" content="XMTN eStudio">
        <meta name="twitter:image" content="https://xmtn.net/images/logo-xmtn-red.svg">
        <meta property="twitter:description" content="Setiap bisnis memiliki cerita uniknya. Itulah mengapa kami fokus pada pembuatan custom software, aplikasi, dan website untuk mencerminkan esensi dan tujuan khusus perusahaan Anda.">


            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
            <style>*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
    .clearfix:before, .clearfix:after { content: ''; display: table; }
    .clearfix:after { clear: both; }

    body {
        background: black;
        margin:0;
        padding:0;
        font-family: "Silkscreen", serif;
    font-weight: 700;
    font-style: normal;
    position: absolute;
    top: 0; left:0;right:0;bottom:0;
    overflow: hidden;

    }

    #main-canvas {
        background: black;
        /* background: radial-gradient(circle, rgba(183,240,255,1) 0%, rgba(145,211,227,1) 40%, rgba(87,195,223,1) 100%); */
    }

    a {
        color: #ffffff;
        text-decoration: none;
    }

    a:hover, a:focus {
        color: #34495e;
    }

    section {
        padding: 1em;
        text-align: center;
    }
    </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="superimposed"  class="rowdies-bold" style="text-align:center;color:white;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;">
            <svg version="1.1" id="logo" viewBox="0 0 334 131" style="width:600px; max-width: 70%;">
                    <style type="text/css" id="style1">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style>
                    <path class="st0" d="M163.97,26.57c6.4,1.81,9.44,5.9,10.45,12.65c2.86,19.2,6.35,38.31,9.56,57.46c0.8,4.78-1.82,8.88-6.04,9.64   c-5.77,1.04-9.43-1.16-10.31-6.74c-2.06-12.99-3.88-26.02-5.8-39.02c-0.25-1.74-0.58-3.48-1.37-5.26   c-2.93,10.16-5.88,20.31-8.81,30.47c-1.3,4.52-2.5,9.05-3.84,13.57c-1.48,5.03-4.19,7.1-9.12,7.11c-4.99,0-7.65-1.93-9.14-7.06   c-4.02-13.76-7.94-27.55-11.91-41.34c-0.25-0.87-0.62-1.71-1.27-3.49c-2.15,14.79-4.21,28.57-6.12,42.37   c-0.95,6.82-2.98,9.33-8.18,9.49c-6.13,0.18-9.52-3.41-8.61-9.58c1.43-9.79,3.09-19.54,4.72-29.29c1.55-9.27,3.55-18.49,4.64-27.82   c0.79-6.85,3.8-11.21,10.37-13.14c0.97,0,1.93,0,2.9,0c6.22,1.76,9.16,6.19,10.81,12.21c3.2,11.71,6.84,23.3,10.31,34.93   c0.35,1.18,0.83,2.31,1.58,4.34c4.11-13.79,8.13-26.52,11.64-39.37c1.72-6.29,4.93-10.56,11.37-12.12   C162.52,26.57,163.24,26.57,163.97,26.57z"
                    id="path1" style="enable-background:new 0 0 334 131;fill:#FFFFFF;fill-opacity:1" />
                    <path class="st0" d="M304.01,26.57c5.67,1.78,7.13,5.97,7.1,11.46c-0.13,19.45-0.03,38.9-0.07,58.35   c-0.02,7.17-3.79,11.24-9.63,9.79c-2.55-0.63-5.21-2.64-6.87-4.77c-10.46-13.42-20.67-27.05-30.96-40.61   c-0.8-1.04-1.62-2.07-2.85-3.64c-0.12,1.57-0.26,2.55-0.26,3.55c-0.02,12.2,0,24.4-0.02,36.6c-0.01,5.98-2.92,9.14-8.28,9.14   c-5.31,0-8.32-3.22-8.33-9.16c-0.03-19.82,0.12-39.62-0.1-59.43c-0.06-5.68,1.67-9.57,7.29-11.28c0.72,0,1.45,0,2.18,0   c3.5,1.53,6.2,4.53,8.46,7.45c10.28,13.23,20.25,26.69,30.36,40.07c0.51,0.68,1.15,1.25,2.27,2.44c0-13.48,0.15-26.13-0.07-38.76   c-0.1-5.42,1.45-9.37,6.86-11.19C302.07,26.57,303.04,26.57,304.01,26.57z"
                    id="path2" style="enable-background:new 0 0 334 131;fill:#FFFFFF;fill-opacity:1" />
                    <path class="st0" d="M66.39,63.95c6.73,9.03,13.37,17.93,19.99,26.85c0.86,1.16,1.74,2.33,2.42,3.6c2.23,4.2,1.39,8.38-2.03,10.59   c-3.71,2.38-8.68,1.78-11.37-1.82c-5.15-6.86-10.08-13.88-15.09-20.83c-1.05-1.46-2.12-2.9-3.44-4.72   c-4.39,6.07-8.54,11.84-12.71,17.59c-1.84,2.54-3.61,5.14-5.54,7.62c-3.01,3.87-8.07,4.66-11.89,1.98   c-3.36-2.35-3.92-6.64-1.42-11.02c0.36-0.62,0.73-1.25,1.16-1.83c14.45-19.95,28.87-39.93,43.43-59.81   c1.42-1.93,3.59-3.76,5.79-4.6c3.25-1.22,6.47-0.22,8.76,2.66c2.12,2.67,2.13,6.28-0.17,9.43c-5.04,6.93-10.2,13.78-15.31,20.68   C68.14,61.48,67.32,62.66,66.39,63.95z"
                    id="path3" style="enable-background:new 0 0 334 131;fill:#ff0000;fill-opacity:1" />
                    <path class="st0"
                    d="M221.4,42.82c0,17.44,0,34.35-0.01,51.27c0,1.82,0.03,3.64-0.13,5.44c-0.35,3.8-3.03,6.45-6.76,6.85   c-4.61,0.48-8.03-1.36-9.14-5.26c-0.48-1.71-0.61-3.57-0.61-5.36c-0.05-16.2-0.03-32.39-0.03-48.59c0-1.33,0-2.64,0-4.51   c-3.94,0-7.64,0.04-11.34-0.01c-5.19-0.07-7.88-2.55-7.97-7.25c-0.09-4.6,3.05-7.87,8.02-7.92c13.17-0.11,26.34-0.14,39.53-0.06   c4.88,0.03,8,3.34,7.95,7.97c-0.05,4.71-2.72,7.28-7.9,7.42C229.28,42.91,225.56,42.82,221.4,42.82z"
                    id="path4" style="enable-background:new 0 0 334 131;fill:#FFFFFF;fill-opacity:1" />
                    <path class="st0"
                    d="M38.48,29.5c6.11,0.03,11.39,5.34,11.23,11.29c-0.16,5.91-5.33,10.98-11.23,11.02   c-6.07,0.06-11.36-5.14-11.43-11.2C26.99,34.71,32.37,29.49,38.48,29.5z"
                    id="path5" style="enable-background:new 0 0 334 131;fill:#ff0000;fill-opacity:1" />
                    </svg>
            <h1 style="display:block;margin-top:20px;"><small>Halaman tidak ditemukan</small></h1>
            <a href="https://xmtn.net">Kembali ke halaman utama</a>
        </div>

		<div class="container demo-1">
            <div id="large-header" class="large-header">
                <canvas id="main-canvas"></canvas>
            </div>
		</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" ></script>

<script>

    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

    $( document ).ready(function() {
        initPage();
    });


    function initPage() {
        initHeader();
        initAnimation();
        addListeners();

    }

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: width/2, y: height/2};

        console.log(width);

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('main-canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        ctx = canvas.getContext('2d');

        // create points
        points = [];
        for(var x = 0; x < width; x = x + width/10) {
            for(var y = 0; y < height; y = y + height/20) {
                var px = x + Math.random()*width/10;
                var py = y + Math.random()*height/10;
                var p = {x: px, originX: px, y: py, originY: py };
                points.push(p);
            }
        }

        // for each point find the 5 closest points
        for(var i = 0; i < points.length; i++) {
            var closest = [];
            var p1 = points[i];
            for(var j = 0; j < points.length; j++) {
                var p2 = points[j]
                if(!(p1 == p2)) {
                    var placed = false;
                    for(var k = 0; k < 3; k++) {
                        if(!placed) {
                            if(closest[k] == undefined) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }

                    for(var k = 0; k < 3; k++) {
                        if(!placed) {
                            if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }

        // assign a circle to each point
        for(var i in points) {
            var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
            points[i].circle = c;
        }
    }

    // Event handling
    function addListeners() {
        if(!('ontouchstart' in window)) {
            window.addEventListener('mousemove', mouseMove);
        }
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function mouseMove(e) {
        var posx = posy = 0;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)    {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }

    function scrollCheck() {
        if(document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    // animation
    function initAnimation() {
        animate();
        for(var i in points) {
            shiftPoint(points[i]);
        }
    }

    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in points) {
                // detect points in range
                if(Math.abs(getDistance(target, points[i])) < 4000) {
                    points[i].active = 0.3;
                    points[i].circle.active = 0.6;
                } else if(Math.abs(getDistance(target, points[i])) < 20000) {
                    points[i].active = 0.1;
                    points[i].circle.active = 0.3;
                } else if(Math.abs(getDistance(target, points[i])) < 40000) {
                    points[i].active = 0.02;
                    points[i].circle.active = 0.1;
                } else {
                    points[i].active = 0;
                    points[i].circle.active = 0;
                }

                drawLines(points[i]);
                points[i].circle.draw();
            }
        }
        requestAnimationFrame(animate);
    }

    function shiftPoint(p) {
        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
            onComplete: function() {
                shiftPoint(p);
            }});
    }

    // Canvas manipulation
    function drawLines(p) {
        if(!p.active) return;
        for(var i in p.closest) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.closest[i].x, p.closest[i].y);
            ctx.strokeStyle = 'rgba(255,255,255,'+ p.active+')';
            ctx.stroke();
        }
    }

    function Circle(pos,rad,color) {
        var _this = this;

        // constructor
        (function() {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        })();

        this.draw = function() {
            if(!_this.active) return;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 4 * Math.PI, false);
            ctx.fillStyle = 'rgba(255,255,255,'+ _this.active+')';
            ctx.fill();
        };
    }

    // Util
    function getDistance(p1, p2) {
        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
    }


(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
            || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
</script>
	</body>
</html>
<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Object Caching 19/52 objects using Disk
Page Caching using Disk: Enhanced 
Database Caching 1/11 queries in 0.005 seconds using Disk

Served from: xmtn.net @ 2026-06-11 00:54:33 by W3 Total Cache
-->