SCP-9464-0

Link to article: SCP-9464-0.

@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 5s ease-in 1s forwards;
}

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

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

(none)

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

[[div style="text-align: right; font-size: 80%; opacity: 0.7;"]]
[https://scp-wiki.wikidot.com/scp-9464/offset/1 Go to Mobile-Friendly/][https://scp-wiki.wikidot.com/scp-9464/offset/2 Text-Only 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 5s ease-in 1s forwards;
}

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

[[html]]
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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;
        }

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

        .container {
            position: relative;
            min-height: 100vh;
            background-color: #050505;
            background-image: url("https://www.transparenttextures.com/patterns/dark-matter.png"); 
            overflow-y: auto;
            scrollbar-width: none;
        }

        .mural {
            position: relative;
            max-width: 80%;
            margin: 0 auto;
            padding: 100px 40px;
            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: 100px 60px;
            
            border-radius: 30px; 

            box-shadow: inset 0 0 80px 60px #000000;
        }

        .text-layer {
            position: relative;
            color: transparent;
            text-shadow: 0 0 8px rgba(200, 180, 140, 0);
            transition: text-shadow 0.1s ease;
            line-height: 1.8;
            font-size: 18px;
            user-select: none;
        }

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

        .item-number {
            font-size: 24px;
            font-weight: bold;
            margin: 30px 0 15px 0;
            text-align: center; 
        }

        .classification {
            font-size: 14px;
            margin-bottom: 25px;
            letter-spacing: 2px;
            text-align: center; 
        }

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

  .scp-logo {
    display: block;
    width: 150px;
    height: 150px;
    margin: 60px auto 20px auto;
    
    background: radial-gradient(
        ellipse var(--spot-rx, 600px) var(--spot-ry, 600px) at var(--cursor-x, 50vw) var(--cursor-y, 50vh),
        rgba(255, 250, 230, 1) 0%,
        rgba(220, 200, 160, 1) 30%, 
        rgba(180, 160, 120, 0.8) 60%, 
        rgba(100, 90, 70, 0.2) 85%,
        transparent 100%
    );
    background-attachment: fixed;

    -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-height, 400px);
            border-radius: 50%;
            pointer-events: none;
            
            background: radial-gradient(
                closest-side,
                transparent 0%, 
                transparent 60%, 
                rgba(255, 240, 200, 0.08) 100%
            );
            
            transform: translate(-50%, -50%);
            z-index: 1000;
            mix-blend-mode: screen;
        }

        .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));

            clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
            
            background: linear-gradient(
                90deg, 
                rgba(255, 250, 230, 0.02) 0%, 
                rgba(255, 250, 230, 0.01) 80%,
                transparent 100%
            );
            
            mask-image: radial-gradient(
                closest-side at var(--mouse-x) var(--mouse-y),
                black 50%,
                transparent 100%
            );
            -webkit-mask-image: radial-gradient(
                closest-side at var(--mouse-x) var(--mouse-y),
                black 50%,
                transparent 100%
            );
            
            pointer-events: none;
            z-index: 999;
            mix-blend-mode: screen;
        }

        .reveal-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            background: radial-gradient(
                closest-side,
                transparent 30%,
                rgba(0,0,0,0.8) 60%,
                #000000 100%
            );
            
            mask-image: radial-gradient(
                closest-side at var(--mouse-x) var(--mouse-y),
                transparent 30%, 
                black 100%
            );
            -webkit-mask-image: radial-gradient(
                closest-side at var(--mouse-x) var(--mouse-y),
                transparent 30%, 
                black 100%
            );

            pointer-events: none;
            z-index: 10;
        }

        .text-reveal {
            background: radial-gradient(
                ellipse var(--spot-rx, 800px) var(--spot-ry, 800px) at var(--mouse-x, 50%) var(--mouse-y, 50%),
                rgba(255, 250, 230, 1) 0%,
                rgba(220, 200, 160, 1) 30%, 
                rgba(180, 160, 120, 0.8) 60%, 
                rgba(100, 90, 70, 0.2) 85%,
                transparent 100%
            );
            -webkit-background-clip: text;
            background-clip: text;
        }

        .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) {
            .mural {
                padding: 80px 20px;
                box-shadow: inset 0 0 40px 30px #000000;
            }
            .header { font-size: 24px; }
            .text-layer { font-size: 14px; }
            .flashlight-beam { display: none; }
        }
    </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 text-reveal">
                <div class="item-number">ITEM #: SCP-9464</div>
                <div class="classification">OBJECT CLASS: KETER</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;

        const baseSize = 400; 

        function updateLight(eX, eY) {
    // Screen dimensions
    const w = window.innerWidth;
    const h = window.innerHeight;
    const cx = w / 2;
    const cy = h + 100;

    // Vector from center to mouse
    const dx = eX - cx;
    const dy = eY - cy;
    
    // Distance from center
    const dist = Math.sqrt(dx*dx + dy*dy);
    
    // Angle in radians
    const angle = Math.atan2(dy, dx);
    
    spot.style.left = eX + 'px';
    spot.style.top = eY + 'px';
    
    const scaleX = 1 + (dist / h) * 0.9;
    const scaleY = 1 + (dist / h) * 1.1; 
    
    const spotW = baseSize * scaleX;
    const spotH = baseSize * scaleY;
    
    beam.style.width = dist + 'px';
    beam.style.height = spotW + 'px';
    
    document.body.style.setProperty('--angle', angle + 'rad');

    document.documentElement.style.setProperty('--cursor-x', eX + 'px');
    document.documentElement.style.setProperty('--cursor-y', eY + 'px');
    
    spot.style.setProperty('--spot-width', spotW + 'px');
    spot.style.setProperty('--spot-height', spotH + 'px');
    
    const rect = mural.getBoundingClientRect();
    const relX = eX - rect.left;
    const relY = eY - rect.top;
    
    mural.style.setProperty('--mouse-x', relX + 'px');
    mural.style.setProperty('--mouse-y', relY + 'px');
    
    mural.style.setProperty('--spot-rx', (spotW / 1.1) + 'px');
    mural.style.setProperty('--spot-ry', (spotH / 1.1) + 'px');
}

        document.addEventListener('mousemove', (e) => {
            updateLight(e.clientX, e.clientY);
        });

container.addEventListener('click', () => {
    container.focus();
});

document.addEventListener('keydown', (e) => {
    if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', 'Space'].includes(e.key)) {
        const scrollAmount = e.key === 'ArrowUp' || e.key === 'ArrowDown' ? 40 : 
                           e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Space' ? window.innerHeight * 0.8 : 
                           container.scrollHeight;
        
        if (e.key === 'ArrowUp') {
            container.scrollTop -= scrollAmount;
        } else if (e.key === 'ArrowDown' || e.key === 'Space') {
            container.scrollTop += scrollAmount;
        } else if (e.key === 'PageUp') {
            container.scrollTop -= scrollAmount;
        } else if (e.key === 'PageDown') {
            container.scrollTop += scrollAmount;
        } else if (e.key === 'Home') {
            container.scrollTop = 0;
        } else if (e.key === 'End') {
            container.scrollTop = container.scrollHeight;
        }
        
        e.preventDefault();
    }
});

        let touchStartY = 0;
let touchStartTime = 0;
let isScrolling = false;

document.addEventListener('touchstart', (e) => {
    touchStartY = e.touches[0].clientY;
    touchStartTime = Date.now();
    isScrolling = false;
}, { passive: true });

document.addEventListener('touchmove', (e) => {
    const touch = e.touches[0];
    const deltaY = Math.abs(touch.clientY - touchStartY);
    const deltaX = Math.abs(touch.clientX - touchStartY);
    const timeDelta = Date.now() - touchStartTime;
    
    if (deltaY > deltaX && deltaY > 10) {
        isScrolling = true;
        return;
    }
    
    if (deltaY > 5 && timeDelta < 100) {
        isScrolling = true;
        return;
    }
    
    if (!isScrolling) {
        updateLight(touch.clientX, touch.clientY);
    }
}, { passive: true });

document.addEventListener('touchend', () => {
    isScrolling = false;
}, { passive: true });

        updateLight(window.innerWidth/2, window.innerHeight/2);
    </script>
</body>
[[/html]]

SCP-9464-0

Module Styles

Inline Styles

Includes

CSS Classes

Page Source