SCP-9464-MOBILE

Link to article: SCP-9464-MOBILE.

@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@300;500;800&display=swap');

:root {
    --main-content-width: 60rem;
    --body-font: 'Rokkitt', serif;
    --header-font: 'Rokkitt', serif;
    --UI-font: 'Rokkitt', serif;
    --basalt-UI-background-color: 0, 0, 0;
    --basalt-primary-color: 5, 5, 5; 
    --basalt-secondary-color: 0, 0, 0;
    --basalt-tertiary-color: 10, 10, 10;
    --header-background-color: 0, 0, 0;
    --basalt-page-content-font-weight: 500;
}

body {
    background-color: black;
}

h1, h2, h3, h4, h5, h6, #page-title {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-wikiwalk-nav {
    opacity: 0;
    animation: fadeIn 2.5s ease-in 1s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

text-align: right; font-size: 80%; opacity: 0.7;

```
height: 100vh; border: 0;
```

(none)

```
grain
```
```
flashlight-beam
```
```
flashlight-spot
```
```
container
```
```
mural
```
```
reveal-mask
```
```
text-layer
```
```
header
```
```
item-number
```
```
classification
```
```
scp-logo
```

[[div style="text-align: right; font-size: 80%; opacity: 0.7;"]]
[https://scp-wiki.wikidot.com/scp-9464/offset/0 Switch to Desktop/Full Version]
[[/div]]

[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@300;500;800&display=swap');

:root {
    --main-content-width: 60rem;
    --body-font: 'Rokkitt', serif;
    --header-font: 'Rokkitt', serif;
    --UI-font: 'Rokkitt', serif;
    --basalt-UI-background-color: 0, 0, 0;
    --basalt-primary-color: 5, 5, 5; 
    --basalt-secondary-color: 0, 0, 0;
    --basalt-tertiary-color: 10, 10, 10;
    --header-background-color: 0, 0, 0;
    --basalt-page-content-font-weight: 500;
}

body {
    background-color: black;
}

h1, h2, h3, h4, h5, h6, #page-title {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-wikiwalk-nav {
    opacity: 0;
    animation: fadeIn 2.5s ease-in 1s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
[[/module]]

[[html style="height: 100vh; border: 0;"]]
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>SCP-9464</title>
    <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=Rokkitt:wght@300;500;800&display=swap" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            height: 100dvh;
            background: #000000;
            font-family: 'Rokkitt', serif;
            overflow: hidden;
            cursor: none;
        }

        .container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #050505;
            background-image: url("https://www.transparenttextures.com/patterns/dark-matter.png"); 
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch; 
            scrollbar-width: none;
        }

        .container::-webkit-scrollbar { display: none; }

        .mural {
            position: relative;
            max-width: 800px;
            width: 85%;
            margin: 20vh auto 35vh auto;
            background: 
                repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0px, transparent 1px, transparent 2px, rgba(0,0,0,0.1) 3px),
                repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0px, transparent 1px, transparent 2px, rgba(0,0,0,0.1) 3px);
            padding: 60px 40px;
            border-radius: 30px; 
            box-shadow: inset 0 0 80px 60px #000000;
        }

        .text-layer {
            position: relative;
            color: #e8e0cc;
            text-shadow: 0 0 2px rgba(0,0,0,0.5);
            line-height: 1.8;
            font-size: 18px;
            user-select: none;
            z-index: 1;
        }

        .reveal-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
            background-color: #000000;
            -webkit-mask-image: radial-gradient(
                circle var(--spot-r, 450px) at var(--mouse-x, 50%) var(--mouse-y, 50%),
                transparent 15%, 
                transparent 45%,
                black 100%
            );
            mask-image: radial-gradient(
                circle var(--spot-r, 450px) at var(--mouse-x, 50%) var(--mouse-y, 50%),
                transparent 15%, 
                transparent 45%,
                black 100%
            );
        }

        .header {
            font-size: 32px;
            font-weight: 800;
            text-align: center;
            margin-bottom: 40px;
            letter-spacing: 4px;
            border-bottom: 2px solid transparent;
            padding-bottom: 20px;
        }

        p {
            margin-bottom: 15px;
            text-align: center;
            font-weight: 500;
        }

        .scp-logo {
            display: block;
            width: 150px;
            height: 150px;
            margin: 60px auto 60px auto;
            background-color: #e8e0cc;
            -webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/SCP_Foundation_%28emblem%29.svg');
            mask-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/SCP_Foundation_%28emblem%29.svg');
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
        }

        .flashlight-spot {
            position: fixed;
            width: var(--spot-width, 400px);
            height: var(--spot-width, 400px);
            border-radius: 50%;
            pointer-events: none;
            background: radial-gradient(closest-side, rgba(255, 250, 230, 0.1) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            z-index: 999;
            mix-blend-mode: screen;
            top: var(--cursor-y, -1000px);
            left: var(--cursor-x, -1000px);
        }

        .flashlight-beam {
            position: fixed;
            top: calc(100vh + 100px);
            left: 50%;
            height: 400px;
            width: 0px;
            transform-origin: left center;
            transform: translate(0, -50%) rotate(var(--angle, 0rad));
            background: linear-gradient(90deg, rgba(255, 250, 230, 0.04) 0%, rgba(255, 250, 230, 0.01) 80%, transparent 100%);
            mask-image: radial-gradient(circle at var(--cursor-x) var(--cursor-y), black 50%, transparent 100%);
            -webkit-mask-image: radial-gradient(circle at var(--cursor-x) var(--cursor-y), black 50%, transparent 100%);
            pointer-events: none;
            z-index: 998;
            mix-blend-mode: screen;
        }

        .grain {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('data:image/svg+xml,<svg xmlns="https://scpsandbox3.wikidot.com/local--files/theme:basalt/grain.png" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /><feColorMatrix type="saturate" values="0"/></filter><rect width="300" height="300" filter="url(%23n)" opacity="0.15"/></svg>');
            pointer-events: none;
            opacity: 0.3;
            z-index: 2000;
        }

        @media (max-width: 768px), (pointer: coarse) {
            body { cursor: auto; }
            .mural { 
                padding: 40px 20px 20px 20px; 
                width: 90%;
                margin: 10vh auto 15vh auto;
            }
            .flashlight-beam {
                display: block;
                position: fixed;
                bottom: -20px;
                left: 50%;
                width: 100vw;
                height: 65vh;
                transform: translateX(-50%);
                clip-path: polygon(40% 100%, 60% 100%, 90% 0%, 10% 0%);
                background: linear-gradient(
                    to top, 
                    rgba(255, 250, 230, 0.12) 0%,
                    rgba(255, 250, 230, 0.05) 60%,
                    transparent 100%
                );
                mask-image: none;
                -webkit-mask-image: none;
                pointer-events: none;
                mix-blend-mode: screen;
            }
            .flashlight-spot { 
                width: 450px; 
                height: 450px;
                background: radial-gradient(closest-side, rgba(255, 250, 230, 0.15) 0%, transparent 70%);
            }
            .text-layer { font-size: 16px; }
            .header { font-size: 24px; margin-bottom: 30px; }
            .scp-logo { margin: 40px auto 40px auto; }
        }
    </style>
</head>
<body>
    <div class="grain"></div>
    <div class="flashlight-beam" id="beam"></div>
    <div class="flashlight-spot" id="spot"></div>
    
    <div class="container">
        <div class="mural">
            <div class="reveal-mask"></div>
            <div class="text-layer">
                <div class="header"><div class="item-number">ITEM #: SCP-9464</div>
                <div class="classification">OBJECT CLASS: KETER</div></div>
                
                <p>1. If this wall still stands unbroken, then leave this place. Read these words and then depart. There is nothing here of monetary, military, or scientific value. We buried and enclosed this thing one mile beneath the ground because it was dangerous to us, and we needed to put it somewhere far away and hidden where it could not spread to our people.</p>
                <p>2. If you hear voices or see people near this wall, do not listen to them. They will sound reasonable. They will speak with authority. Cover your ears if they speak, and flee if they move towards you. They are not like you. They may offer you gifts, but you must not accept them, and if they try to leave, you must kill them.</p>
                <p>3. We considered ourselves a powerful culture, but we saw that we were like all other cultures before us, and that we would not continue to exist forever. We were arrogant, and believed that our civilisation, which we called the Foundation, uniquely deserved preservation over all others. We wanted to ensure that it would exist to shepherd and control you, the people of the future.</p>
                <p>4. Because of this, we created a sickness that spreads through words and signs, which changes the minds of the people it infects to make them become our servants and place our goals higher than any other principle. We tested this on innocent people. They began to organise themselves according to our hierarchy, becoming a mockery of our Foundation. Our leaders thought that this was good and put them to work on strange and dangerous tasks which should never be repeated.</p>
                <p>5. What we did was wrong. Because of us, there is a world behind this wall. It sustains itself through unnatural generation. The people within this world believe that the year is 2026. They have taken on names which are like and yet unlike real names and established a tyrannical caste system. Each day, they wake up and recite our briefings and safety mantras. They perform absurd tests on the objects we granted them to study, and they sacrifice innocent lives in pointless trials and experiments. People suffer and die to follow the script we gave them.</p>
                <p>6. We realised too late that we could not undo what we had done, so we did what we could to limit the carnage they could cause. They stopped listening to our leaders, and instead began to obey thirteen of their own number. Because of this, we created a new infection and spread it amongst them. We could not convince them to abandon the script, so we changed the setting: we made them believe that the world has ended, and they are all that is left. This belief is the best method of containment we could devise.</p>
                <p>7. Our Foundation is dwindling now. Our watch is no longer necessary. We are proud of much of what we achieved, because we left the world a safer, more peaceful, and better-understood place than we found it. But we did make mistakes, and ours would be a sad legacy if these ancient errors escape and undo all of our successes.</p>
                <p>8. For this reason, we ask you, the people of our future, two favours:</p>
                <p>9. Secure this place. Contain it. Protect it.</p>
                <p>10. And be better than we were.</p>
                
                <div class="scp-logo"></div>
            </div>
        </div>
    </div>

    <script>
        const spot = document.getElementById('spot');
        const beam = document.getElementById('beam');
        const container = document.querySelector('.container');
        const mural = document.querySelector('.mural');

        let mouseX = window.innerWidth / 2;
        let mouseY = window.innerHeight / 2;
        let isMobile = false;

        function checkMobile() {
            if (window.matchMedia("(pointer: coarse)").matches || window.innerWidth < 768) {
                isMobile = true;
                mouseX = window.innerWidth / 2;
                mouseY = window.innerHeight * 0.40;
            } else {
                isMobile = false;
            }
        }
        
        checkMobile();

        document.addEventListener('mousemove', (e) => {
            if (!isMobile) {
                mouseX = e.clientX;
                mouseY = e.clientY;
            }
        });

        function render() {
            document.documentElement.style.setProperty('--cursor-x', mouseX + 'px');
            document.documentElement.style.setProperty('--cursor-y', mouseY + 'px');
            
            if (!isMobile) {
                const w = window.innerWidth;
                const h = window.innerHeight;
                const cx = w / 2;
                const cy = h + 100;
                const dx = mouseX - cx;
                const dy = mouseY - cy;
                const dist = Math.sqrt(dx*dx + dy*dy);
                const angle = Math.atan2(dy, dx);
                
                beam.style.width = dist + 'px';
                beam.style.setProperty('--angle', angle + 'rad');
            }
            
            const rect = mural.getBoundingClientRect();
            const relX = mouseX - rect.left;
            const relY = mouseY - rect.top;

            mural.style.setProperty('--mouse-x', relX + 'px');
            mural.style.setProperty('--mouse-y', relY + 'px');
            
            mural.style.setProperty('--spot-r', isMobile ? '350px' : '350px');
            mural.style.setProperty('--spot-width', isMobile ? '450px' : '400px');

            requestAnimationFrame(render);
        }

        render();

        window.addEventListener('resize', () => {
            checkMobile();
            if(isMobile) {
                mouseX = window.innerWidth / 2;
                mouseY = window.innerHeight * 0.40;
            }
        });

        container.addEventListener('click', () => {
            container.focus();
        });
    </script>
</body>
[[/html]]

SCP-9464-MOBILE

Module Styles

Inline Styles

Includes

CSS Classes

Page Source