{"id":2,"date":"2026-10-02T13:36:14","date_gmt":"2026-10-02T13:36:14","guid":{"rendered":"https:\/\/www.snugvoid.com\/?page_id=2"},"modified":"2026-10-02T18:02:29","modified_gmt":"2026-10-02T16:02:29","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/www.snugvoid.com\/","title":{"rendered":"SnugVoid Landing Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-160735f e-flex e-con-boxed e-con e-parent\" data-id=\"160735f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba9a0d5 elementor-widget elementor-widget-html\" data-id=\"ba9a0d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"starfield-container\">\r\n\r\n    <canvas id=\"starfield\"><\/canvas>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<style>\r\n\r\n    #starfield-container {\r\n\r\n        position: relative;\r\n\r\n        width: 100%;\r\n\r\n        height: 100%;\r\n\r\n        min-height: 100dvh;\r\n\r\n        overflow: hidden;\r\n\r\n        background: #000;\r\n\r\n    }\r\n\r\n\r\n\r\n    #starfield {\r\n\r\n        position: absolute;\r\n\r\n        inset: 0;\r\n\r\n        width: 100%;\r\n\r\n        height: 100%;\r\n\r\n        display: block;\r\n\r\n        pointer-events: none;\r\n\r\n    }\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n\r\n\r\n    const container = document.getElementById('starfield-container');\r\n\r\n    const canvas = document.getElementById('starfield');\r\n\r\n\r\n\r\n    if (!container || !canvas) return;\r\n\r\n\r\n\r\n    const ctx = canvas.getContext('2d', { alpha: false });\r\n\r\n\r\n\r\n    let width = 0;\r\n\r\n    let height = 0;\r\n\r\n    let centerX = 0;\r\n\r\n    let centerY = 0;\r\n\r\n\r\n\r\n    \/\/ =========================================================\r\n\r\n    \/\/ SETTINGS\r\n\r\n    \/\/ =========================================================\r\n\r\n\r\n\r\n    const NUM_STARS = 1200;\r\n\r\n\r\n\r\n    \/\/ Movement speed\r\n\r\n    const SPEED = 0.5;\r\n\r\n\r\n\r\n    \/\/ Perspective\r\n\r\n    const FOV = 400;\r\n\r\n\r\n\r\n    \/\/ Maximum distance\r\n\r\n    const MAX_DEPTH = 2000;\r\n\r\n\r\n\r\n    \/\/ Closest distance before star respawns\r\n\r\n    const NEAR_PLANE = 20;\r\n\r\n\r\n\r\n    \/\/ Maximum star size\r\n\r\n    const MAX_SIZE = 2.5;\r\n\r\n\r\n\r\n\r\n\r\n    \/\/ =========================================================\r\n\r\n    \/\/ RESIZE TO ELEMENTOR CONTAINER\r\n\r\n    \/\/ =========================================================\r\n\r\n\r\n\r\n    function resize() {\r\n\r\n\r\n\r\n        const rect = container.getBoundingClientRect();\r\n\r\n\r\n\r\n        width = Math.max(1, rect.width);\r\n\r\n        height = Math.max(1, rect.height);\r\n\r\n\r\n\r\n        const dpr = window.devicePixelRatio || 1;\r\n\r\n\r\n\r\n        canvas.width = width * dpr;\r\n\r\n        canvas.height = height * dpr;\r\n\r\n\r\n\r\n        canvas.style.width = width + 'px';\r\n\r\n        canvas.style.height = height + 'px';\r\n\r\n\r\n\r\n        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n\r\n\r\n\r\n        centerX = width \/ 2;\r\n\r\n        centerY = height \/ 2;\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n\r\n    \/\/ Watch Elementor container size\r\n\r\n    const resizeObserver = new ResizeObserver(resize);\r\n\r\n\r\n\r\n    resizeObserver.observe(container);\r\n\r\n\r\n\r\n    resize();\r\n\r\n\r\n\r\n\r\n\r\n    \/\/ =========================================================\r\n\r\n    \/\/ STAR\r\n\r\n    \/\/ =========================================================\r\n\r\n\r\n\r\n    class Star {\r\n\r\n\r\n\r\n        constructor() {\r\n\r\n            this.reset(true);\r\n\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n        \/\/ -----------------------------------------------------\r\n\r\n        \/\/ Generate a sophisticated random star color\r\n\r\n        \/\/ -----------------------------------------------------\r\n\r\n\r\n\r\n        generateColor() {\r\n\r\n\r\n\r\n            const random = Math.random();\r\n\r\n\r\n\r\n            let hue;\r\n\r\n            let saturation;\r\n\r\n            let lightness;\r\n\r\n\r\n\r\n            \/*\r\n\r\n                Distribution:\r\n\r\n\r\n\r\n                0 - 55%   : white \/ pale stars\r\n\r\n                55 - 70% : blue\r\n\r\n                70 - 80% : cyan\r\n\r\n                80 - 88% : violet\r\n\r\n                88 - 94% : pink\r\n\r\n                94 - 98% : yellow\r\n\r\n                98 - 100%: orange\r\n\r\n            *\/\r\n\r\n\r\n\r\n            if (random < 0.55) {\r\n\r\n\r\n\r\n                \/\/ Almost white\r\n\r\n                hue = Math.random() * 360;\r\n\r\n                saturation = 3 + Math.random() * 12;\r\n\r\n                lightness = 88 + Math.random() * 10;\r\n\r\n\r\n\r\n            } else if (random < 0.70) {\r\n\r\n\r\n\r\n                \/\/ Blue\r\n\r\n                hue = 205 + Math.random() * 25;\r\n\r\n                saturation = 35 + Math.random() * 45;\r\n\r\n                lightness = 72 + Math.random() * 20;\r\n\r\n\r\n\r\n            } else if (random < 0.80) {\r\n\r\n\r\n\r\n                \/\/ Cyan\r\n\r\n                hue = 175 + Math.random() * 25;\r\n\r\n                saturation = 35 + Math.random() * 45;\r\n\r\n                lightness = 72 + Math.random() * 20;\r\n\r\n\r\n\r\n            } else if (random < 0.88) {\r\n\r\n\r\n\r\n                \/\/ Violet\r\n\r\n                hue = 255 + Math.random() * 35;\r\n\r\n                saturation = 30 + Math.random() * 50;\r\n\r\n                lightness = 70 + Math.random() * 22;\r\n\r\n\r\n\r\n            } else if (random < 0.94) {\r\n\r\n\r\n\r\n                \/\/ Pink \/ magenta\r\n\r\n                hue = 310 + Math.random() * 40;\r\n\r\n                saturation = 30 + Math.random() * 45;\r\n\r\n                lightness = 72 + Math.random() * 20;\r\n\r\n\r\n\r\n            } else if (random < 0.98) {\r\n\r\n\r\n\r\n                \/\/ Yellow\r\n\r\n                hue = 40 + Math.random() * 20;\r\n\r\n                saturation = 35 + Math.random() * 40;\r\n\r\n                lightness = 75 + Math.random() * 20;\r\n\r\n\r\n\r\n            } else {\r\n\r\n\r\n\r\n                \/\/ Rare warm orange\r\n\r\n                hue = 15 + Math.random() * 25;\r\n\r\n                saturation = 35 + Math.random() * 40;\r\n\r\n                lightness = 72 + Math.random() * 20;\r\n\r\n            }\r\n\r\n\r\n\r\n            return `hsl(${hue}, ${saturation}%, ${lightness}%)`;\r\n\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n        \/\/ -----------------------------------------------------\r\n\r\n        \/\/ Reset star\r\n\r\n        \/\/ -----------------------------------------------------\r\n\r\n\r\n\r\n        reset(initial = false) {\r\n\r\n\r\n\r\n            \/\/ Large invisible 3D field\r\n\r\n            this.x =\r\n\r\n                (Math.random() - 0.5) * 5000;\r\n\r\n\r\n\r\n            this.y =\r\n\r\n                (Math.random() - 0.5) * 5000;\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Scatter stars through depth\r\n\r\n            this.z = initial\r\n\r\n                ? Math.random() * MAX_DEPTH\r\n\r\n                : MAX_DEPTH;\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Natural variation in star size\r\n\r\n            this.baseSize =\r\n\r\n                0.5 + Math.random() * 1.2;\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Unique color for this star\r\n\r\n            this.color =\r\n\r\n                this.generateColor();\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Slight brightness variation\r\n\r\n            this.brightness =\r\n\r\n                0.65 + Math.random() * 0.35;\r\n\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n        \/\/ -----------------------------------------------------\r\n\r\n        \/\/ Update position\r\n\r\n        \/\/ -----------------------------------------------------\r\n\r\n\r\n\r\n        update() {\r\n\r\n\r\n\r\n            \/\/ Move toward camera\r\n\r\n            this.z -= SPEED;\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Respawn when passing camera\r\n\r\n            if (this.z < NEAR_PLANE) {\r\n\r\n\r\n\r\n                this.reset();\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n        \/\/ -----------------------------------------------------\r\n\r\n        \/\/ Draw star\r\n\r\n        \/\/ -----------------------------------------------------\r\n\r\n\r\n\r\n        draw() {\r\n\r\n\r\n\r\n            \/\/ 3D \u2192 2D projection\r\n\r\n            const scale = FOV \/ this.z;\r\n\r\n\r\n\r\n            const px =\r\n\r\n                centerX + this.x * scale;\r\n\r\n\r\n\r\n            const py =\r\n\r\n                centerY + this.y * scale;\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Calculate star size\r\n\r\n            const size =\r\n\r\n                Math.max(\r\n\r\n                    1,\r\n\r\n                    Math.min(\r\n\r\n                        this.baseSize * scale,\r\n\r\n                        MAX_SIZE\r\n\r\n                    )\r\n\r\n                );\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ -------------------------------------------------\r\n\r\n            \/\/ Opacity\r\n\r\n            \/\/ -------------------------------------------------\r\n\r\n\r\n\r\n            let opacity = this.brightness;\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Fade in from deep space\r\n\r\n            if (this.z > MAX_DEPTH - 400) {\r\n\r\n\r\n\r\n                opacity *=\r\n\r\n                    (MAX_DEPTH - this.z) \/ 400;\r\n\r\n            }\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Fade out before reaching camera\r\n\r\n            else if (this.z < 250) {\r\n\r\n\r\n\r\n                opacity *=\r\n\r\n                    (this.z - NEAR_PLANE) \/\r\n\r\n                    (250 - NEAR_PLANE);\r\n\r\n            }\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ Clamp opacity\r\n\r\n            opacity =\r\n\r\n                Math.max(\r\n\r\n                    0,\r\n\r\n                    Math.min(opacity, 1)\r\n\r\n                );\r\n\r\n\r\n\r\n\r\n\r\n            \/\/ -------------------------------------------------\r\n\r\n            \/\/ Draw only visible stars\r\n\r\n            \/\/ -------------------------------------------------\r\n\r\n\r\n\r\n            if (\r\n\r\n                opacity > 0.01 &&\r\n\r\n                px >= 0 &&\r\n\r\n                px <= width &&\r\n\r\n                py >= 0 &&\r\n\r\n                py <= height\r\n\r\n            ) {\r\n\r\n\r\n\r\n                ctx.fillStyle = this.color;\r\n\r\n\r\n\r\n                ctx.globalAlpha = opacity;\r\n\r\n\r\n\r\n\r\n\r\n                ctx.fillRect(\r\n\r\n                    Math.floor(px),\r\n\r\n                    Math.floor(py),\r\n\r\n                    size,\r\n\r\n                    size\r\n\r\n                );\r\n\r\n\r\n\r\n\r\n\r\n                \/\/ Reset alpha\r\n\r\n                ctx.globalAlpha = 1;\r\n\r\n            }\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n\r\n    \/\/ =========================================================\r\n\r\n    \/\/ CREATE STARS\r\n\r\n    \/\/ =========================================================\r\n\r\n\r\n\r\n    const stars = [];\r\n\r\n\r\n\r\n    for (\r\n\r\n        let i = 0;\r\n\r\n        i < NUM_STARS;\r\n\r\n        i++\r\n\r\n    ) {\r\n\r\n\r\n\r\n        stars.push(\r\n\r\n            new Star()\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n\r\n    \/\/ =========================================================\r\n\r\n    \/\/ ANIMATION\r\n\r\n    \/\/ =========================================================\r\n\r\n\r\n\r\n    function animate() {\r\n\r\n\r\n\r\n        \/\/ Clear background\r\n\r\n        ctx.fillStyle = '#000';\r\n\r\n\r\n\r\n        ctx.globalAlpha = 1;\r\n\r\n\r\n\r\n        ctx.fillRect(\r\n\r\n            0,\r\n\r\n            0,\r\n\r\n            width,\r\n\r\n            height\r\n\r\n        );\r\n\r\n\r\n\r\n\r\n\r\n        \/\/ Update and draw stars\r\n\r\n        for (\r\n\r\n            let i = 0;\r\n\r\n            i < stars.length;\r\n\r\n            i++\r\n\r\n        ) {\r\n\r\n\r\n\r\n            stars[i].update();\r\n\r\n\r\n\r\n            stars[i].draw();\r\n\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n        \/\/ Continue animation\r\n\r\n        requestAnimationFrame(\r\n\r\n            animate\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n\r\n    \/\/ =========================================================\r\n\r\n    \/\/ START\r\n\r\n    \/\/ =========================================================\r\n\r\n\r\n\r\n    animate();\r\n\r\n\r\n\r\n})();\r\n\r\n<\/script> \r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69603f8 elementor-widget elementor-widget-html\" data-id=\"69603f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<audio id=\"snugvoid-music\" loop preload=\"auto\">\r\n    <source src=https:\/\/www.snugvoid.com\/wp-content\/uploads\/2026\/10\/snugvoid.mp3 type=\"audio\/mpeg\">\r\n<\/audio>\r\n\r\n<script>\r\n(function () {\r\n\r\n    const audio = document.getElementById('snugvoid-music');\r\n\r\n    if (!audio) return;\r\n\r\n    audio.volume = 0.5;\r\n\r\n    function startMusic() {\r\n        audio.play().catch(function () {\r\n            \/\/ Browser blocked autoplay.\r\n            \/\/ Music will start after the visitor interacts.\r\n        });\r\n    }\r\n\r\n    \/\/ Try immediately\r\n    startMusic();\r\n\r\n    \/\/ If autoplay was blocked, start after first interaction\r\n    document.addEventListener('click', startMusic, { once: true });\r\n    document.addEventListener('touchstart', startMusic, { once: true });\r\n    document.addEventListener('keydown', startMusic, { once: true });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.snugvoid.com\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.snugvoid.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.snugvoid.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.snugvoid.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.snugvoid.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":86,"href":"https:\/\/www.snugvoid.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/www.snugvoid.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/www.snugvoid.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}