Pattern Composition Heading Component

<section class="w-screen h-screen overflow-hidden bg-[#FF3333] text-[#111111] selection:bg-[#111111] selection:text-[#FF3333] relative" style="font-family: 'Inter', sans-serif;">
<style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Playfair+Display:ital,wght@1,400&display=swap');
    </style>

<canvas id="gridCanvas" class="absolute inset-0 z-0 pointer-events-none"></canvas>

<main class="relative z-10 w-full h-full p-6 md:p-10 flex flex-col">
        
        <!-- Logo Mark -->
        <div class="absolute top-[6%] left-[4%] font-serif italic text-3xl md:text-5xl font-normal text-[#111111] z-30">e.</div>

        <!-- Typography Composition (Constrained bottom to prevent overlap) -->
        <div class="absolute inset-x-0 top-0 bottom-[25%] flex flex-col justify-center gap-1 md:gap-3 z-20 pointer-events-none px-4 md:px-10 pt-12 md:pt-16">
            
            <!-- 'the' -->
            <div class="relative self-start ml-[6%]">
                <h1 class="text-[13vw] leading-[0.85] tracking-tight font-medium text-[#111111] mix-blend-multiply">the</h1>
                <span class="absolute top-[50%] -right-[12%] text-xs font-normal text-[#111111] opacity-70">(A1)</span>
            </div>
            
            <!-- 'system' -->
            <div class="relative self-end mr-[4%]">
                <h1 class="text-[15vw] leading-[0.85] tracking-tight font-medium text-[#F5F5F0]">system</h1>
                <span class="absolute top-[20%] -left-[12%] text-xs font-normal text-[#111111] opacity-70">(A2)</span>
            </div>

            <!-- 'balance' -->
            <div class="relative self-start ml-[2%]">
                <h1 class="text-[16vw] leading-[0.85] tracking-tight font-medium text-[#F5F5F0]">balance</h1>
                <span class="absolute top-[10%] -right-[10%] text-xs font-normal text-[#111111] opacity-70">(A3)</span>
                <span class="absolute top-[45%] -right-[40%] text-sm md:text-base font-normal text-[#111111] whitespace-nowrap">Guide the User Journey</span>
            </div>

            <!-- 'you' & 'will' -->
            <div class="flex justify-between w-full px-[10%] mt-2">
                <div class="relative">
                    <h1 class="text-[13vw] leading-[0.85] tracking-tight font-medium text-[#111111] mix-blend-multiply">you</h1>
                    <span class="absolute top-[60%] -right-[20%] text-xs font-normal text-[#111111] opacity-70">(A4)</span>
                </div>
                <div class="relative">
                    <h1 class="text-[13vw] leading-[0.85] tracking-tight font-medium text-[#111111] mix-blend-multiply">will</h1>
                </div>
            </div>

            <!-- 'shape' -->
            <div class="relative self-end mr-[14%] mt-2">
                <h1 class="text-[15vw] leading-[0.85] tracking-tight font-medium text-[#111111] mix-blend-multiply">shape</h1>
                <span class="absolute top-[30%] -left-[15%] text-xs font-normal text-[#111111] opacity-70">(A5)</span>
                <span class="absolute top-[65%] -left-[60%] text-sm md:text-base font-normal text-[#111111] whitespace-nowrap">Structure, Rhythm &amp; Space</span>
            </div>
            
        </div>

        <!-- Paragraph with Border Gradient -->
        <div class="absolute bottom-[8%] left-[4%] w-[85%] md:w-[42%] group cursor-default z-30">
            <div class="absolute inset-[-16px] opacity-0 group-hover:opacity-100 transition-opacity duration-700 rounded-xl pointer-events-none" style="padding: 1px; background: linear-gradient(135deg, rgba(245,245,240,0.6), transparent, rgba(17,17,17,0.4)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;">
            </div>
            <p class="relative z-10 text-sm md:text-base font-normal leading-relaxed text-[#111111] text-justify">
                An integrated framework transcends basic aesthetics; it establishes the core principles that power usability, structure, and flow. Whether building a digital experience, a brand mark, or a tangible object, defined constraints ensure effortless interaction and visual harmony.
            </p>
        </div>

        <!-- Interactive CTA with Border Gradient -->
        <div class="absolute bottom-[8%] right-[4%] z-30 group cursor-pointer">
            <div class="absolute inset-[-12px] opacity-0 group-hover:opacity-100 transition-opacity duration-700 rounded-xl pointer-events-none" style="padding: 1px; background: linear-gradient(135deg, rgba(245,245,240,0.8), transparent, rgba(17,17,17,0.6)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;">
            </div>
            <div class="relative z-10 flex items-center gap-3 text-sm md:text-base font-normal text-[#111111] text-right leading-tight">
                <span class="transition-transform duration-500 group-hover:-translate-x-1">Start Building<br>Now</span>
                <iconify-icon icon="solar:arrow-right-up-linear" class="text-2xl transition-all duration-500 group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:text-[#F5F5F0]"></iconify-icon>
            </div>
        </div>

        <!-- Footer -->
        <div class="absolute bottom-[3%] left-[4%] text-xs font-normal tracking-widest uppercase text-[#111111] opacity-80 z-30">
            ELIAS VANCE • UI DEVELOPER
        </div>
        <span class="absolute bottom-[3%] right-[4%] text-lg font-normal text-[#111111] opacity-70 z-30">(A6)</span>

    </main>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
        const canvas = document.getElementById('gridCanvas');
        const ctx = canvas.getContext('2d');
        let width, height;
        let mouseX = window.innerWidth / 2;
        let mouseY = window.innerHeight / 2;
        let targetMouseX = mouseX;
        let targetMouseY = mouseY;
        let time = 0;

        function resize() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        }
        
        window.addEventListener('resize', resize);
        resize();

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

        window.addEventListener('touchmove', (e) => {
            targetMouseX = e.touches[0].clientX;
            targetMouseY = e.touches[0].clientY;
        });

        function draw() {
            ctx.clearRect(0, 0, width, height);
            
            ctx.strokeStyle = 'rgba(17, 17, 17, 0.12)';
            ctx.lineWidth = 1;

            mouseX += (targetMouseX - mouseX) * 0.08;
            mouseY += (targetMouseY - mouseY) * 0.08;

            const cols = 12;
            const rows = 12;
            const cellWidth = width / cols;
            const cellHeight = height / rows;

            ctx.beginPath();

            for (let i = 1; i < cols; i++) {
                let x = i * cellWidth;
                ctx.moveTo(x, 0);
                for (let y = 0; y <= height; y += 40) {
                    let dx = x - mouseX;
                    let dy = y - mouseY;
                    let dist = Math.sqrt(dx * dx + dy * dy);
                    let distortion = Math.max(0, 150 - dist) * 0.15; 
                    let xOffset = (dx / dist) * distortion || 0;
                    xOffset += Math.sin(time + y * 0.01) * 2;
                    ctx.lineTo(x + xOffset, y);
                }
            }

            for (let i = 1; i < rows; i++) {
                let y = i * cellHeight;
                ctx.moveTo(0, y);
                for (let x = 0; x <= width; x += 40) {
                    let dx = x - mouseX;
                    let dy = y - mouseY;
                    let dist = Math.sqrt(dx * dx + dy * dy);
                    let distortion = Math.max(0, 150 - dist) * 0.15;
                    let yOffset = (dy / dist) * distortion || 0;
                    yOffset += Math.cos(time + x * 0.01) * 2;
                    ctx.lineTo(x, y + yOffset);
                }
            }

            ctx.stroke();
            time += 0.02;
            requestAnimationFrame(draw);
        }
        
        draw();
    </script>
</section>