Samin Brutal Magic

by Samin Sami

HTML

<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=Space+Grotesk:wght@300;500;700&family=Syncopate:wght@700&display=swap"
        rel="stylesheet">

    <div class="noise"></div>
    <div id="cursor"></div>

    <nav class="brutal-nav">
        <a href="https://www.alerak.studio" class="nav-logo magnetic" style="text-decoration: none;">SAMIN</a>
        <ul class="nav-menu">
            <li><a href="#" class="nav-link magnetic" data-text="WORK">WORK</a></li>
            <li><a href="#" class="nav-link magnetic" data-text="ABOUT">ABOUT</a></li>
            <li><a href="#" class="nav-link magnetic" data-text="LABS">LABS</a></li>
        </ul>
        <button class="cta-btn magnetic"><span>LET'S TALK</span></button>
    </nav>

    <div id="scroll-content">
        <section class="hero">
            <div class="hero-title-container">
                <h1>
                    <div class="word">BRUTAL</div><br>
                    <div class="word">MAGIC</div>
                </h1>
            </div>

            <div class="tape-wrapper">
                <div class="tape-text">
                    SAMIN SAMI ✦ SCROLL VELOCITY ✦ INTERACTIVE SYSTEMS ✦ SAMIN SAMI ✦ SCROLL VELOCITY ✦
                    INTERACTIVE SYSTEMS ✦
                </div>
            </div>
        </section>

        <section class="section-dark">
            <p class="big-text">
                WE BUILD <span>DIGITAL EXPERIENCES</span> THAT DEFY GRAVITY. NO TEMPLATES. NO LIMITS. JUST <span>PURE
                    CODE</span> AND <span>RAW AESTHETICS</span>.
            </p>
        </section>

        <section class="section-dark" style="justify-content: flex-end; text-align: right;">
            <p class="big-text">
                INTERACTION<br>
                <span>REDEFINED</span>
           ...

CSS

:root {
            --bg: #030303;
            /* Slightly darker */
            --fg: #e0e0e0;
            --accent: #ccff00;
            --secondary: #ff00ff;
            /* Neon magenta */
            --danger: #ff3333;
            --easing: cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        /* --- GRAIN OVERLAY --- */
        .noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9998;
            opacity: 0.07;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* --- SCROLL CONTENT WRAPPER --- */
        #scroll-content {
            will-change: transform;
            /* Smooth skewing performance */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            cursor: none;
        }

        body {
            background-color: var(--bg);
            color: var(--fg);
            font-family: 'Space Grotesk', sans-serif;
            overflow-x: hidden;
            overflow-y: scroll;
            /* Force vertical scroll */
        }

        /* --- CURSOR --- */
        #cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            background: var(--accent);
            border-radius: 50%;
            pointer-events: none;
            mix-blend-mode: difference;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width 0.3s var(--easing), height 0.3s var(--easing), transform 0.05s...

JavaScript

const words = document.querySelectorAll('.hero h1 .word');
        words.forEach(word => {
            const text = word.innerText;
            word.innerHTML = '';
            text.split('').forEach(char => {
                const span = document.createElement('span');
                span.classList.add('char');
                span.innerText = char;
                word.appendChild(span);
            });
        });

        // --- MAGNET & CURSOR ---
        const cursor = document.getElementById('cursor');
        const magneticElements = document.querySelectorAll('.magnetic');

        let mouseX = 0, mouseY = 0;
        let cursorX = 0, cursorY = 0;

        window.addEventListener('mousemove', e => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });

        function lerp(start, end, factor) {
            return start + (end - start) * factor;
        }

        function animateCursor() {
            cursorX = lerp(cursorX, mouseX, 0.15);
            cursorY = lerp(cursorY, mouseY, 0.15);
            cursor.style.transform = `translate(${cursorX}px, ${cursorY}px) translate(-50%, -50%)`;
            requestAnimationFrame(animateCursor);
        }
        animateCursor();

        magneticElements.forEach(el => {
            el.addEventListener('mousemove', (e) => {
                const rect = el.getBoundingClientRect();
                const centerX = rect.left + rect.width / 2;
                const centerY = rect.top + rect.height / 2;
                const dist = 0.5; // Magnetic strength

                const moveX = (e.clientX - centerX) * dist;
                const moveY = (e.clientY - centerY) * dist;

                el.style.transform = `translate(${moveX}px, ${moveY}px)`;
                cursor.classList.add('magnet');
            });

            el.addEventListener('mouseleave', () => {
                el.style.transform = 'translate(0, 0)';
               ...