{"id":8,"date":"2026-05-23T17:38:30","date_gmt":"2026-05-23T17:38:30","guid":{"rendered":"https:\/\/justcomma.xyz\/?page_id=8"},"modified":"2026-05-23T18:38:52","modified_gmt":"2026-05-23T18:38:52","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/justcomma.xyz\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f6b2ba e-con-full e-flex e-con e-parent\" data-id=\"0f6b2ba\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa4f827 elementor-widget elementor-widget-html\" data-id=\"fa4f827\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =========================\r\nCOMMA \u2014 STRICT SWISS & NEO-BRUTALIST INTERFACE\r\nWITH MAGNETIC CURSOR INVERSION\r\n========================= -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n:root{\r\n    --bg:#f2f2ef;\r\n    --text:#0a0a0a;\r\n    --muted:rgba(0,0,0,.5);\r\n    --line:rgba(0,0,0,.08);\r\n    --line-strong:rgba(0,0,0,.15);\r\n    --ease:cubic-bezier(.16,1,.3,1);\r\n    --sidebar-width: 320px;\r\n}\r\n\r\n*{\r\n    margin:0;\r\n    padding:0;\r\n    box-sizing:border-box;\r\n}\r\n\r\nhtml,body{\r\n    width:100%;\r\n    background:var(--bg);\r\n    overflow-x:hidden;\r\n    scroll-behavior:smooth;\r\n}\r\n\r\nbody{\r\n    font-family:'Inter', sans-serif;\r\n    color:var(--text);\r\n    -webkit-font-smoothing:antialiased;\r\n    text-rendering:optimizeLegibility;\r\n    overflow-x:hidden;\r\n}\r\n\r\n\/* =========================\r\nCUSTOM INVERTED CURSOR\r\n========================= *\/\r\n\r\n@media (pointer: fine) {\r\n    body {\r\n        cursor: none; \r\n    }\r\n\r\n    .nav a, .copy-btn {\r\n        cursor: none;\r\n    }\r\n\r\n    .custom-cursor {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 108px;\r\n        height: 108px;\r\n        background-color: #fff;\r\n        border-radius: 50%;\r\n        pointer-events: none;\r\n        z-index: 9999;\r\n        mix-blend-mode: difference;\r\n        transform: translate(-50%, -50%);\r\n        transition: width 0.3s var(--ease), \r\n                    height 0.3s var(--ease),\r\n                    background-color 0.3s ease;\r\n        will-change: transform, width, height;\r\n    }\r\n\r\n    .custom-cursor.hovered {\r\n        width: 60px;\r\n        height: 60px;\r\n        background-color: rgba(255, 255, 255, 0.1);\r\n        border: 1px solid rgba(255, 255, 255, 0.5);\r\n        backdrop-filter: blur(2px);\r\n        mix-blend-mode: normal;\r\n    }\r\n}\r\n\r\n\/* =========================\r\nGLOBAL & ARCHITECTURAL GRID\r\n========================= *\/\r\n\r\n.comma-app{\r\n    position:relative;\r\n    width:100%;\r\n    overflow:hidden;\r\n    background:var(--bg);\r\n    padding-left: var(--sidebar-width);\r\n}\r\n\r\n.swiss-grid-system {\r\n    position: fixed;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n    display: flex;\r\n    padding-left: var(--sidebar-width);\r\n}\r\n\r\n.swiss-grid-system .v-line {\r\n    flex: 1;\r\n    height: 100vh;\r\n    border-right: 1px solid var(--line);\r\n}\r\n\r\n.swiss-grid-system .h-line {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    width: 100vw;\r\n    height: 1px;\r\n    background: var(--line);\r\n    transform: translateY(-50%);\r\n}\r\n\r\n.comma-grain{\r\n    position:fixed;\r\n    inset:0;\r\n    pointer-events:none;\r\n    opacity:.06;\r\n    background-image:\r\n        radial-gradient(circle at 20% 20%, rgba(0,0,0,.4) .5px, transparent .5px),\r\n        radial-gradient(circle at 80% 80%, rgba(0,0,0,.4) .5px, transparent .5px);\r\n    background-size:3px 3px;\r\n    z-index:2;\r\n}\r\n\r\n\/* =========================\r\nSIDEBAR (LEFT NAV)\r\n========================= *\/\r\n\r\n.sidebar{\r\n    position:fixed;\r\n    top:0;\r\n    left:0;\r\n    width:var(--sidebar-width);\r\n    height:100vh;\r\n    padding:50px 40px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:space-between;\r\n    z-index:100;\r\n    border-right:1px solid var(--line-strong);\r\n    background:var(--bg);\r\n}\r\n\r\n.brand{\r\n    font-family:'Space Grotesk', sans-serif;\r\n    font-size:2.5rem;\r\n    font-weight:700;\r\n    letter-spacing:-.06em;\r\n    line-height:1;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.nav{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:16px;\r\n    margin-top: 60px;\r\n    flex-grow: 1;\r\n}\r\n\r\n.nav a, .copy-btn{\r\n    text-decoration:none;\r\n    color:var(--text);\r\n    border:1px solid var(--text);\r\n    padding:16px 20px;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-size:.7rem;\r\n    font-weight:700;\r\n    letter-spacing:.05em;\r\n    text-transform:uppercase;\r\n    text-align: center;\r\n    position:relative;\r\n    background:var(--bg);\r\n    transition: box-shadow 0.2s var(--ease), background 0.2s, color 0.2s;\r\n    z-index: 10;\r\n}\r\n\r\n.nav a:hover, .copy-btn:hover{\r\n    box-shadow: 4px 4px 0px var(--text);\r\n    background: var(--text);\r\n    color: var(--bg);\r\n}\r\n\r\n\/* CA BOX *\/\r\n\r\n.ca-module{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:14px;\r\n    margin-top: auto;\r\n}\r\n\r\n.ca-label{\r\n    font-family:'JetBrains Mono', monospace;\r\n    font-size:.65rem;\r\n    font-weight:700;\r\n    letter-spacing:.05em;\r\n    text-transform:uppercase;\r\n    color:var(--text);\r\n    border-bottom: 1px solid var(--text);\r\n    padding-bottom: 8px;\r\n}\r\n\r\n.ca-address{\r\n    font-family:'JetBrains Mono', monospace;\r\n    font-size:.75rem;\r\n    color:var(--muted);\r\n    word-break:break-all;\r\n    line-height:1.5;\r\n}\r\n\r\n.copy-btn.copied {\r\n    transform: translate(0px, 0px) !important;\r\n    box-shadow: 0px 0px 0px var(--text) !important;\r\n    background: var(--text);\r\n    color: var(--bg);\r\n}\r\n\r\n\/* =========================\r\nSECTION SYSTEM\r\n========================= *\/\r\n\r\n.panel{\r\n    position:relative;\r\n    width:100%;\r\n    height:100vh;\r\n    display:flex;\r\n    align-items:center;\r\n    overflow:hidden;\r\n    z-index:10;\r\n}\r\n\r\n.panel-content{\r\n    position:relative;\r\n    width: 100%;\r\n    padding: 0 5vw;\r\n    display:flex;\r\n    align-items:center;\r\n    z-index:20;\r\n}\r\n\r\n.left{\r\n    position:relative;\r\n    z-index: 2;\r\n    width: 65%;\r\n}\r\n\r\n.label{\r\n    font-family:'JetBrains Mono', monospace;\r\n    font-size:.7rem;\r\n    font-weight: 700;\r\n    letter-spacing:.1em;\r\n    text-transform:uppercase;\r\n    color:var(--text);\r\n    margin-bottom:30px;\r\n    display: inline-block;\r\n    background: var(--text);\r\n    color: var(--bg);\r\n    padding: 6px 12px;\r\n}\r\n\r\n.title{\r\n    font-family:'Space Grotesk', sans-serif;\r\n    font-size:clamp(5rem, 8vw, 9.5rem);\r\n    line-height:.85;\r\n    letter-spacing:-.05em;\r\n    font-weight:700;\r\n    text-transform: uppercase;\r\n    margin-left: -5px;\r\n}\r\n\r\n.desc{\r\n    margin-top:40px;\r\n    max-width:440px;\r\n    font-family: 'Inter', sans-serif;\r\n    font-size:1.15rem;\r\n    line-height:1.6;\r\n    font-weight: 400;\r\n    color:var(--muted);\r\n}\r\n\r\n\/* RIGHT: MODERN ANIMATED COMMA *\/\r\n\r\n.right{\r\n    position:absolute;\r\n    right:-5%;\r\n    top:50%;\r\n    z-index:1; \r\n    pointer-events:none;\r\n    transform: translateY(-50%);\r\n}\r\n\r\n.modern-comma-anim {\r\n    font-family:'Space Grotesk', sans-serif;\r\n    font-size: clamp(25rem, 40vw, 45rem);\r\n    line-height: 0.5;\r\n    font-weight: 700;\r\n    color: var(--text);\r\n    animation: modernSway 14s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;\r\n    transform-origin: center 80%;\r\n    opacity: 0.08; \r\n}\r\n\r\n@keyframes modernSway {\r\n    0% { \r\n        transform: translateY(-30px) rotate(-4deg) scale(0.9); \r\n        filter: blur(16px); \r\n    }\r\n    50% { \r\n        filter: blur(2px); \r\n    }\r\n    100% { \r\n        transform: translateY(30px) rotate(4deg) scale(1.1); \r\n        filter: blur(12px); \r\n    }\r\n}\r\n\r\n\/* =========================\r\nCINEMATIC BLUR MORPH\r\n========================= *\/\r\n\r\n.morph .label, .morph .desc {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);\r\n}\r\n\r\n.morph .title {\r\n    opacity: 0;\r\n    filter: blur(20px);\r\n    transform: translateY(40px) scale(0.95);\r\n    transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;\r\n}\r\n\r\n.morph .right {\r\n    opacity: 0;\r\n    transform: translateY(-40%) scale(0.8);\r\n    transition: all 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;\r\n}\r\n\r\n.morph.active .label, \r\n.morph.active .desc {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.morph.active .title {\r\n    opacity: 1;\r\n    filter: blur(0px);\r\n    transform: translateY(0) scale(1);\r\n}\r\n\r\n.morph.active .right {\r\n    opacity: 1;\r\n    transform: translateY(-50%) scale(1);\r\n}\r\n\r\n\/* PROGRESS BAR *\/\r\n\r\n.progress{\r\n    position:fixed;\r\n    right:40px;\r\n    top:50%;\r\n    transform:translateY(-50%);\r\n    z-index:200;\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:24px;\r\n}\r\n\r\n.dot{\r\n    width:6px;\r\n    height:6px;\r\n    background:var(--line-strong);\r\n    transition:all .4s var(--ease);\r\n}\r\n\r\n.dot.active{\r\n    background:var(--text);\r\n    transform:scaleY(4);\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n\r\n@media(max-width:980px){\r\n    .comma-app {\r\n        padding-left: 0;\r\n        padding-top: 100px;\r\n    }\r\n\r\n    .swiss-grid-system {\r\n        padding-left: 0;\r\n    }\r\n\r\n    .sidebar {\r\n        width: 100%;\r\n        height: auto;\r\n        position: relative;\r\n        flex-direction: column;\r\n        border-right: none;\r\n        border-bottom: 1px solid var(--text);\r\n        padding: 30px 20px;\r\n        z-index: 100;\r\n    }\r\n\r\n    .nav {\r\n        margin-top: 30px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .panel-content{\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    .left {\r\n        width: 100%;\r\n    }\r\n\r\n    .right {\r\n        position: absolute;\r\n        right: -10%;\r\n        top: 40%;\r\n        transform: translateY(0);\r\n        z-index: 0;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"custom-cursor\"><\/div>\r\n\r\n<div class=\"comma-app\">\r\n\r\n    <div class=\"swiss-grid-system\">\r\n        <div class=\"v-line\"><\/div>\r\n        <div class=\"v-line\"><\/div>\r\n        <div class=\"v-line\"><\/div>\r\n        <div class=\"v-line\"><\/div>\r\n        <div class=\"h-line\"><\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"comma-grain\"><\/div>\r\n\r\n    <aside class=\"sidebar\">\r\n        <div class=\"brand\">COMMA<\/div>\r\n\r\n        <div class=\"nav\">\r\n            <a href=\"#\" target=\"_blank\">X (Twitter)<\/a>\r\n            <a href=\"#\" target=\"_blank\">Telegram<\/a>\r\n            <a href=\"#\" target=\"_blank\">Dexscreener<\/a>\r\n            <a href=\"#\" target=\"_blank\">Pump Swap<\/a>\r\n        <\/div>\r\n\r\n        <div class=\"ca-module\">\r\n            <div class=\"ca-label\">Contract<\/div>\r\n            <div class=\"ca-address\" id=\"contractAddress\">NULL<\/div>\r\n            <button class=\"copy-btn\" onclick=\"copyCA()\">Copy CA<\/button>\r\n        <\/div>\r\n    <\/aside>\r\n\r\n    <div class=\"progress\">\r\n        <div class=\"dot active\"><\/div>\r\n        <div class=\"dot\"><\/div>\r\n        <div class=\"dot\"><\/div>\r\n        <div class=\"dot\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- SECTION 1 -->\r\n    <section class=\"panel morph active\">\r\n        <div class=\"panel-content\">\r\n            <div class=\"left\">\r\n                <div class=\"label\">S.01 \/ CONTINUATION<\/div>\r\n                <h1 class=\"title\">\r\n                    Nothing truly<br>\r\n                    ends.\r\n                <\/h1>\r\n                <p class=\"desc\">\r\n                    COMMA exists between silence and acceleration. A subtle interruption that keeps movement alive without ever reaching a final stop.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"right\">\r\n                <div class=\"modern-comma-anim\">,<\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"panel morph\">\r\n        <div class=\"panel-content\">\r\n            <div class=\"left\">\r\n                <div class=\"label\">S.02 \/ RHYTHM<\/div>\r\n                <h1 class=\"title\">\r\n                    Motion by<br>\r\n                    restraint.\r\n                <\/h1>\r\n                <p class=\"desc\">\r\n                    Every transition inside COMMA moves with intention. Slow momentum, editorial spacing, and rhythmic interaction create a system that feels alive.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"right\">\r\n                <div class=\"modern-comma-anim\" style=\"animation-delay: -3s; animation-duration: 15s;\">,<\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"panel morph\">\r\n        <div class=\"panel-content\">\r\n            <div class=\"left\">\r\n                <div class=\"label\">S.03 \/ SIGNAL<\/div>\r\n                <h1 class=\"title\">\r\n                    Pause before<br>\r\n                    impact.\r\n                <\/h1>\r\n                <p class=\"desc\">\r\n                    COMMA transforms stillness into anticipation. Minimal forms, cinematic whitespace, and fluid movement create a futuristic publishing atmosphere.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"right\">\r\n                <div class=\"modern-comma-anim\" style=\"animation-delay: -6s; animation-direction: reverse;\">,<\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 4 -->\r\n    <section class=\"panel morph\">\r\n        <div class=\"panel-content\">\r\n            <div class=\"left\">\r\n                <div class=\"label\">S.04 \/ CONTINUE<\/div>\r\n                <h1 class=\"title\">\r\n                    The sentence<br>\r\n                    moves.\r\n                <\/h1>\r\n                <p class=\"desc\">\r\n                    COMMA was never designed to conclude. It exists as an infinite transition system built around rhythm, continuation, and visual momentum.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"right\">\r\n                <div class=\"modern-comma-anim\" style=\"animation-delay: -9s; animation-duration: 10s;\">,<\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\/* =========================\r\nCUSTOM CURSOR & MAGNETIC EFFECT\r\n========================= *\/\r\nconst cursor = document.querySelector('.custom-cursor');\r\nconst interactables = document.querySelectorAll('.nav a, .copy-btn');\r\n\r\nlet mouseX = window.innerWidth \/ 2;\r\nlet mouseY = window.innerHeight \/ 2;\r\nlet cursorX = mouseX;\r\nlet cursorY = mouseY;\r\n\r\nwindow.addEventListener('mousemove', (e) => {\r\n    mouseX = e.clientX;\r\n    mouseY = e.clientY;\r\n});\r\n\r\nfunction animateCursor() {\r\n    cursorX += (mouseX - cursorX) * 0.15;\r\n    cursorY += (mouseY - cursorY) * 0.15;\r\n    \r\n    if(cursor) {\r\n        cursor.style.transform = `translate(${cursorX}px, ${cursorY}px) translate(-50%, -50%)`;\r\n    }\r\n    requestAnimationFrame(animateCursor);\r\n}\r\nif(window.matchMedia(\"(pointer: fine)\").matches) {\r\n    animateCursor();\r\n}\r\n\r\ninteractables.forEach(el => {\r\n    el.addEventListener('mouseenter', () => {\r\n        cursor.classList.add('hovered');\r\n    });\r\n    \r\n    el.addEventListener('mouseleave', () => {\r\n        cursor.classList.remove('hovered');\r\n        el.style.transform = ''; \r\n    });\r\n\r\n    el.addEventListener('mousemove', (e) => {\r\n        const rect = el.getBoundingClientRect();\r\n        const x = e.clientX - rect.left - rect.width \/ 2;\r\n        const y = e.clientY - rect.top - rect.height \/ 2;\r\n        \r\n        \/\/ Offset magnet dikombinasikan dengan offset brutalist agar tidak kaku\r\n        el.style.transform = `translate(calc(-4px + ${x * 0.2}px), calc(-4px + ${y * 0.2}px))`;\r\n    });\r\n});\r\n\r\n\/* =========================\r\nCOPY CA SCRIPT\r\n========================= *\/\r\nfunction copyCA() {\r\n    const caText = document.getElementById(\"contractAddress\").innerText;\r\n    const btn = document.querySelector(\".copy-btn\");\r\n    \r\n    navigator.clipboard.writeText(caText).then(() => {\r\n        btn.innerText = \"COPIED!\";\r\n        btn.classList.add(\"copied\");\r\n        \r\n        setTimeout(() => {\r\n            btn.innerText = \"COPY CA\";\r\n            btn.classList.remove(\"copied\");\r\n        }, 2000);\r\n    }).catch(err => {\r\n        console.error('Failed to copy CA', err);\r\n    });\r\n}\r\n\r\n\/* =========================\r\nBLUR & SCROLL OBSERVER\r\n========================= *\/\r\nconst morphs = document.querySelectorAll('.morph');\r\nconst dots = document.querySelectorAll('.dot');\r\n\r\nconst observer = new IntersectionObserver((entries)=>{\r\n    entries.forEach(entry=>{\r\n        if(entry.isIntersecting){\r\n            morphs.forEach(el=>el.classList.remove('active'));\r\n            entry.target.classList.add('active');\r\n            \r\n            const index = [...morphs].indexOf(entry.target);\r\n            dots.forEach(d=>d.classList.remove('active'));\r\n            if(dots[index]) dots[index].classList.add('active');\r\n        }\r\n    });\r\n},{\r\n    threshold: 0.45\r\n});\r\n\r\nmorphs.forEach(section=>{\r\n    observer.observe(section);\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>COMMA X (Twitter) Telegram Dexscreener Pump Swap Contract NULL Copy CA S.01 \/ CONTINUATION Nothing truly ends. COMMA exists between silence and acceleration. A subtle interruption that keeps movement alive without ever reaching a final stop. , S.02 \/ RHYTHM Motion by restraint. Every transition inside COMMA moves with intention. Slow momentum, editorial spacing, and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/justcomma.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justcomma.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/justcomma.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/justcomma.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/justcomma.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":70,"href":"https:\/\/justcomma.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/justcomma.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/justcomma.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}