{"id":625,"date":"2025-12-10T18:41:37","date_gmt":"2025-12-10T23:41:37","guid":{"rendered":"https:\/\/mikeloucas.com\/phatkunt\/?page_id=625"},"modified":"2026-03-17T15:56:36","modified_gmt":"2026-03-17T19:56:36","slug":"video-scroll","status":"publish","type":"page","link":"https:\/\/mikeloucas.com\/phatkunt\/","title":{"rendered":"video scroll"},"content":{"rendered":"<div id=\"cs-content\" class=\"cs-content\"><div class=\"x-section e625-e1 mhd-0 mhd-1 mhd-2 mhd-3 mhd-4\" id=\"preloaderOverlay\"><div class=\"x-row x-container max width e625-e2 mhd-18 mhd-19 mhd-1a mhd-1b mhd-1c mhd-1d mhd-1e mhd-1f mhd-1g mhd-24 mhd-25\"><div class=\"x-row-inner\"><div class=\"x-col e625-e3 mhd-2m mhd-2n mhd-2o\"><!-- Preloader Overlay -->\n<style>\n\/* Preloader overlay styling *\/\n#preloaderOverlay {\n    background: #000;\n    opacity: 0.9; \/* start almost black *\/\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column; \/* in case you add more content vertically *\/\n}\n\n\/* Button inside overlay *\/\n#preloaderOverlay button#preloaderEnter {\n    padding: 1em 2em;\n    font-size: 1.2rem;\n  font-family: 'eras-demi';\n    cursor: pointer;\n    background: #222;\n    color: #fff;\n    border: 2px solid #fff;\n    border-radius: 8px;\n}\n<\/style>\n\n<button id=\"preloaderEnter\">\n    Enter<br>8 Ball + Red Button = Audio\/Scroll\n  \n<\/button>\n\n\n\n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    \/\/ ==== PAGE STUFF (preloader\/video) ====\n    const preloaderBtn = document.getElementById(\"preloaderEnter\");\n    const overlay = document.getElementById(\"preloaderOverlay\");\n    const video = document.getElementById(\"rubeVideo\");\n\n    document.documentElement.style.overflow = \"hidden\"; \/\/ freeze scroll\n\n    \/\/ ==== JUNGLE MUSIC ENGINE ====\n    let ctx, master;\n    let active = false; \/\/ music starts only after unlock\n    const BPM = 168;\n    const STEP = (60 \/ BPM) \/ 4;\n    let step = 0;\n    let nextNoteTime = 0;\n    let schedulerTimer = null;\n    const LOOKAHEAD = 30;\n    const SCHEDULE_AHEAD = 0.18;\n    let bassBus;\n\n    \/\/ SCROLL VELOCITY (optional, can be ignored)\n    let lastScrollY = window.scrollY;\n    let lastScrollTime = performance.now();\n    let scrollVelocity = 0;\n    window.addEventListener(\"scroll\", () => {\n        const now = performance.now();\n        const dy = Math.abs(window.scrollY - lastScrollY);\n        const dt = now - lastScrollTime || 16;\n        scrollVelocity = Math.min((dy \/ dt) * 0.015, 1);\n        lastScrollY = window.scrollY;\n        lastScrollTime = now;\n    }, { passive: true });\n\n    \/\/ ==== INIT AUDIO ====\n    function initAudio() {\n        ctx = new (window.AudioContext || window.webkitAudioContext)();\n        master = ctx.createGain();\n        master.gain.value = 0; \/\/ muted until unlock\n        master.connect(ctx.destination);\n\n        \/\/ Bass sidechain bus\n        bassBus = ctx.createGain();\n        bassBus.gain.value = 1;\n        bassBus.connect(master);\n\n        initNoisePool();\n        initAmbientLayer(); \/\/ init ambient layer here\n    }\n\n    \/\/ STAGE FROM SCROLL\n    function getStage() {\n        const scroll = Math.min(window.scrollY \/ (document.body.scrollHeight - innerHeight), 1);\n        return Math.floor(scroll * 6);\n    }\n\n    \/\/ NOISE POOL\n    let noiseBuffer;\n    function initNoisePool() {\n        noiseBuffer = ctx.createBuffer(1, ctx.sampleRate * 0.2, ctx.sampleRate);\n        const data = noiseBuffer.getChannelData(0);\n        for (let i = 0; i < data.length; i++) {\n            data[i] = (Math.random() * 2 - 1) * Math.exp(-i \/ 1500);\n        }\n    }\n\n    \/\/ SIDECHAIN\n    function sidechain(time) {\n        bassBus.gain.cancelScheduledValues(time);\n        bassBus.gain.setValueAtTime(0.5, time);\n        bassBus.gain.exponentialRampToValueAtTime(1, time + 0.12);\n    }\n\n    \/\/ ===== SOUNDS =====\n    function sub(time) {\n        const o = ctx.createOscillator();\n        const g = ctx.createGain();\n        o.type = \"sine\";\n        o.frequency.value = 45;\n        g.gain.setValueAtTime(0.8, time);\n        g.gain.exponentialRampToValueAtTime(0.001, time + 0.6);\n        o.connect(g);\n        g.connect(bassBus);\n        o.start(time);\n        o.stop(time + 0.6);\n    }\n\n    function darkBass(time, stage) {\n        const o = ctx.createOscillator();\n        const g = ctx.createGain();\n        const lfo = ctx.createOscillator();\n        const lfoGain = ctx.createGain();\n        o.type = \"triangle\";\n        o.frequency.setValueAtTime(50 + Math.random() * 2, time);\n        lfo.frequency.value = 0.25 + stage * 0.05;\n        lfoGain.gain.value = 8 + stage * 5;\n        lfo.connect(lfoGain);\n        lfoGain.connect(o.frequency);\n        g.gain.setValueAtTime(0.6, time);\n        g.gain.exponentialRampToValueAtTime(0.001, time + 0.8);\n        o.connect(g);\n        g.connect(bassBus);\n        lfo.start(time);\n        o.start(time);\n        lfo.stop(time + 0.8);\n        o.stop(time + 0.8);\n    }\n\n    function wideBass(time) {\n        const o = ctx.createOscillator();\n        const g = ctx.createGain();\n        o.type = \"sawtooth\";\n        o.frequency.value = 38 + Math.random() * 3;\n        g.gain.setValueAtTime(0.5, time);\n        g.gain.exponentialRampToValueAtTime(0.001, time + 1.5);\n        o.connect(g);\n        g.connect(bassBus);\n        o.start(time);\n        o.stop(time + 1.5);\n    }\n\n    let lastPadTime = 0;\n    function rarePad(time, stage) {\n        if (stage < 5) return;\n        if (time - lastPadTime < 8) return;\n        if (Math.random() < 0.7) return;\n        lastPadTime = time;\n        const g = ctx.createGain();\n        g.gain.setValueAtTime(0.04, time);\n        g.gain.linearRampToValueAtTime(0.001, time + 8);\n        g.connect(master);\n        [\"triangle\", \"sawtooth\", \"triangle\"].forEach((type, i) => {\n            const o = ctx.createOscillator();\n            o.type = type;\n            o.frequency.value = 145 + i * 6 + Math.random() * 12;\n            o.connect(g);\n            o.start(time);\n            o.stop(time + 8);\n        });\n    }\n\n    \/\/ DRUMS\n    function kick(time) {\n        sidechain(time);\n        const o = ctx.createOscillator();\n        const g = ctx.createGain();\n        o.type = \"triangle\";\n        o.frequency.setValueAtTime(90, time);\n        o.frequency.exponentialRampToValueAtTime(45, time + 0.12);\n        g.gain.setValueAtTime(0.7, time);\n        g.gain.exponentialRampToValueAtTime(0.001, time + 0.14);\n        o.connect(g);\n        g.connect(master);\n        o.start(time);\n        o.stop(time + 0.15);\n    }\n\n    function snare(time) {\n        const src = ctx.createBufferSource();\n        const g = ctx.createGain();\n        src.buffer = noiseBuffer;\n        g.gain.setValueAtTime(0.9, time);\n        g.gain.exponentialRampToValueAtTime(0.001, time + 0.18);\n        src.connect(g);\n        g.connect(master);\n        src.start(time);\n    }\n\n    function hat(time) {\n        const o = ctx.createOscillator();\n        const g = ctx.createGain();\n        o.type = \"triangle\";\n        o.frequency.value = 7000 + Math.random() * 3000;\n        g.gain.setValueAtTime(0.05, time);\n        g.gain.exponentialRampToValueAtTime(0.001, time + 0.03);\n        o.connect(g);\n        g.connect(master);\n        o.start(time);\n        o.stop(time + 0.03);\n    }\n\n    \/\/ FILLS\n    function fillSnare(time) {\n        for (let i = 0; i < 3; i++) snare(time + i * STEP * 0.25);\n    }\n\n    function velocityFill(time, tension) {\n        if (tension < 0.4) return;\n        if (Math.random() < tension * 0.4) snare(time + STEP * 0.5);\n        if (tension > 0.75 && step === 14) {\n            for (let i = 0; i < 3; i++) snare(time + i * STEP * 0.2);\n        }\n    }\n\n    \/\/ ==== AMBIENT LAYER ====\n    let ambientGain, ambientOscillators = [];\n    function initAmbientLayer() {\n        ambientGain = ctx.createGain();\n        ambientGain.gain.value = 0.01; \/\/ start very quiet\n        ambientGain.connect(master);\n\n        const types = [\"triangle\",\"sawtooth\",\"triangle\"];\n        for(let i=0;i<types.length;i++){\n            const o = ctx.createOscillator();\n            o.type = types[i];\n            o.frequency.value = 150 + Math.random()*40;\n            o.detune.value = (Math.random()-0.5)*30;\n            o.connect(ambientGain);\n            o.start();\n            ambientOscillators.push(o);\n        }\n    }\n\n    function updateAmbientLayer(stage) {\n        if(!ambientGain) return;\n        \/\/ Scroll volume: increase near bottom\n        const scroll = Math.min(window.scrollY \/ (document.body.scrollHeight - innerHeight),1);\n        ambientGain.gain.setTargetAtTime(0.01 + scroll*0.05, ctx.currentTime, 0.5);\n\n        \/\/ Scroll pitch: lower pitch as you scroll down\n        ambientOscillators.forEach((o,i)=>{\n            const baseFreq = 150 + i*10;\n            const pitchDown = baseFreq*(1 - scroll*0.4); \/\/ pitch down to 60% at bottom\n            o.frequency.setTargetAtTime(pitchDown, ctx.currentTime, 0.5);\n        });\n    }\n\n    \/\/ SEQUENCER\n    function playStep(time) {\n        if(!active) return;\n        const stage = getStage();\n        const isBarStart = step===0;\n\n        \/\/ Jungle base instruments\n        if(step%8===0) sub(time);\n        if(step%8===0 && stage>0) darkBass(time, stage);\n        if(stage>3 && step%16===0) wideBass(time);\n        if(step%16===0) rarePad(time, stage);\n        if(stage>1 && (step===0||step===6||step===10)) kick(time);\n        if(stage>2 && (step===4||step===12||(stage>5 && step===8))) snare(time);\n        if(stage>3 && (step===2||step===10)) snare(time);\n        if(stage>4 && step%2===1 && step%4!==3) hat(time);\n        if(isBarStart && stage>4 && Math.random()<0.15) fillSnare(time+STEP*12);\n        if(stage>3) velocityFill(time, scrollVelocity);\n\n        \/\/ Ambient layer update\n        updateAmbientLayer(stage);\n\n        step = (step+1)%16;\n    }\n\n    function scheduler() {\n        scrollVelocity *= 0.92;\n        while(nextNoteTime < ctx.currentTime + SCHEDULE_AHEAD){\n            playStep(nextNoteTime);\n            nextNoteTime += STEP;\n        }\n    }\n\n    function startLoop() {\n        if(schedulerTimer) return;\n        step=0;\n        nextNoteTime = ctx.currentTime+0.2;\n        schedulerTimer = setInterval(scheduler, LOOKAHEAD);\n    }\n\n    function stopLoop() {\n        clearInterval(schedulerTimer);\n        schedulerTimer = null;\n    }\n\n    \/\/ ==== PRELOADER CLICK ====\n    preloaderBtn.addEventListener(\"click\", async ()=>{\n        overlay.style.transition=\"opacity 0.8s ease\";\n        overlay.style.opacity=0;\n        setTimeout(()=>overlay.remove(),800);\n\n        video.play().catch(()=>console.warn(\"Video autoplay blocked\"));\n        if(!ctx) initAudio();\n        if(ctx.state===\"suspended\") await ctx.resume();\n\n        \/\/ unlock music only after 10.5s\n        video.addEventListener(\"timeupdate\", function unlockMusic(){\n            if(video.currentTime>=10.5){\n                active = true;\n                master.gain.cancelScheduledValues(ctx.currentTime);\n                master.gain.linearRampToValueAtTime(0.35, ctx.currentTime+0.5);\n                startLoop();\n                document.documentElement.style.overflow=\"\";\n                video.removeEventListener(\"timeupdate\", unlockMusic);\n            }\n        });\n    });\n\n    \/\/ Optional toggle button\n    const toggle = document.getElementById(\"toggle\");\n    toggle.onclick = ()=>{\n        if(!ctx) initAudio();\n        active = !active;\n        toggle.textContent = active ? \"Sound OFF\" : \"Sound ON\";\n        active ? startLoop() : stopLoop();\n    };\n});\n<\/script>\n\n<\/div><\/div><\/div><\/div><div class=\"x-section e625-e5 mhd-0 mhd-1 mhd-2 mhd-5 mhd-6\"><div class=\"x-row e625-e6 mhd-18 mhd-19 mhd-1a mhd-1b mhd-1d mhd-1h mhd-1i mhd-1j mhd-26 mhd-27\"><div class=\"x-row-inner\"><div class=\"x-col e625-e7 mhd-2m mhd-2n\"><div class=\"video-container\">\n\t<video id=\"rubeVideo\" muted playsinline>\n\t\t<source src=\"https:\/\/assets.codepen.io\/83740\/Rube%20Goldberg%20Machine.mp4\" type=\"video\/mp4\">\n\t<\/video>\n\t<div id=\"timelineLine\"><\/div>\n<\/div>\n<div id=\"spiral\" class=\"spiral\"><\/div>\n<div id=\"spiral2\" class=\"spiral\"><\/div>\n\n<style>\n\/* Spiral container *\/\n#spiral, #spiral2 {\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: 5%;\n  transform: translateY(-50%);\n  z-index: 10;\n}\n\n.spiral {\n  position: absolute;\n  left: 5%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  color: #e0ecef;\n  font-family: \"sans-serif\";\n  opacity: 1;\n  transition: opacity 0.5s ease-out, max-height 0.5s ease-out, padding 0.5s ease-out;\n  max-height: 500px; \/* arbitrary large to allow collapse *\/\n  padding: 0;\n}\n\n\/* Houdini CSS property for Chrome\/Safari *\/\n@property --angle {\n  syntax: '<angle>';\n  initial-value: 0deg;\n  inherits: false;\n}\n\n\/* Spiral animation *\/\n@keyframes spiral {\n  0% { --angle: 0deg; }\n  100% { --angle: 360deg; }\n}\n\n\/* Characters *\/\n.character {\n  font-size: clamp(1.8rem, 2.5vw, 2.8rem);\n  color: white;\n  text-transform: uppercase;\n  transform: translateY(calc(sin(var(--angle)) * 100px)) \n             scale(calc(cos(var(--angle)) * 0.5 + 0.5));\n  animation: spiral 4s linear infinite;\n  transform-origin: left center;\n  animation-delay: calc(var(--i) * 0.1s);\n}\n\n@media (max-width: 768px) { \n  #spiral, #spiral2 {\n    left: 50%;               \n    top: 50%;               \n    transform: translate(-50%, -50%);\n  }\n}\n\n@media (max-width: 480px) {\n  #spiral, #spiral2 {\n    position: absolute; \/* keep absolute *\/\n    left: 50%;\n    top: 130%;\n    transform: translate(-50%, -0%);\n    \/* do not use display:flex or justify-content *\/\n  }\n\n  .character {\n    font-size: 1.2rem; \/* optional smaller font for mobile *\/\n  }\n}\n\n\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const VIDEO_TRIGGER_TIME = 10.5;\n  const STAGGER = 100; \/\/ ms between letters appearing\n  const wordsStart = \"WAIT FOR THE 8 BALL\";\n\n  \/\/ Random final text options\n  const finalOptions = [\n    \"BATTERIES INCLUDED\",\n    \"FULLY CHARGED\",\n    \"SELF STARTER\",\n \t\t\"AUTONOMOUS MODE\",\n    \"I MAKE IT HAPPEN\"\n  ];\n\n  \/\/ Pick a random final text\n  const wordsEnd = finalOptions[Math.floor(Math.random() * finalOptions.length)];\n\n  const spiralA = document.querySelector(\"#spiral\");\n  const spiralB = document.querySelector(\"#spiral2\");\n\n  \/\/ Build initial spirals\n  const createSpiral = (container, text, offset = 0) => {\n    container.innerHTML = \"\";\n    text.split(\"\").forEach((char, i) => {\n      const div = document.createElement(\"div\");\n      div.innerText = char;\n      div.classList.add(\"character\");\n      div.style.setProperty('--i', i + offset);\n      container.append(div);\n    });\n  };\n\n  createSpiral(spiralA, wordsStart, 0);\n  createSpiral(spiralB, wordsStart, wordsStart.length);\n\n  let finalStarted = false;\n\n  const video = document.getElementById('rubeVideo');\n  if(video){\n    video.addEventListener('timeupdate', () => {\n      if(!finalStarted && video.currentTime >= VIDEO_TRIGGER_TIME){\n        finalStarted = true;\n        startDepthLetters();\n      }\n    });\n  }\n\n  const startDepthLetters = () => {\n    const charsA = Array.from(spiralA.children);\n    const charsB = Array.from(spiralB.children);\n\n    \/\/ Remove extra old letters beyond new text\n    charsA.slice(wordsEnd.length).forEach(el => el.remove());\n    charsB.slice(wordsEnd.length).forEach(el => el.remove());\n\n    wordsEnd.split(\"\").forEach((char, i) => {\n      setTimeout(() => {\n        const elA = charsA[i];\n        const elB = charsB[i];\n\n        if (!elA || !elB) return; \/\/ skip if somehow missing\n\n        elA.innerText = char;\n        elB.innerText = char;\n\n        \/\/ Animate from depth\n        elA.style.transform = \"translateY(80px) scale(0.2)\";\n        elB.style.transform = \"translateY(80px) scale(0.2)\";\n\n        let startTime = null;\n        const duration = 800;\n\n        const animate = (time) => {\n          if (!startTime) startTime = time;\n          const elapsed = time - startTime;\n          const progress = Math.min(elapsed \/ duration, 1);\n          const ease = 1 - Math.pow(1 - progress, 3);\n\n          const translateY = 80 * (1 - ease);\n          const scale = 0.2 + 0.8 * ease;\n\n          elA.style.transform = `translateY(${translateY}px) scale(${scale})`;\n          elB.style.transform = `translateY(${translateY}px) scale(${scale})`;\n\n          if (progress < 1) {\n            requestAnimationFrame(animate);\n          } else {\n            elA.style.transform = \"none\";\n            elB.style.transform = \"none\";\n\n            \/\/ Hide secondary spiral only after the last letter is done\n            if (i === wordsEnd.length - 1) {\n              spiralB.style.display = \"none\";\n            }\n          }\n        };\n\n        requestAnimationFrame(animate);\n      }, i * STAGGER);\n    });\n  };\n});\n<\/script>\n\n\n\n\n\n\n\n\n\n<\/div><div class=\"x-col e625-e10 mhd-2n mhd-2p\"><div class=\"lines\">\n  <div class=\"line\"><\/div>\n  <div class=\"line\"><\/div>\n  <div class=\"line\"><\/div>\n<\/div>\n\n<style>\n\/* Container is promoted to its own GPU layer to smooth Firefox scrolling *\/\n.lines {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100vh;\n    margin: auto;\n    width: 90vw;\n    transform: translateZ(0);\n    will-change: transform;\n}\n\n.line {\n  position: absolute;\n  width: 1px;\n  height: 100%;\n  top: 0;\n  left: 50%;\n  background: rgba(255, 255, 255, 0.1);\n  overflow: hidden;\n}\n\n.line::after {\n  content: '';\n  display: block;\n  position: absolute;\n  height: 15vh;\n  width: 100%;\n  top: -50%;\n  left: 0;\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 0) 0%,\n    #ffffff 75%,\n    #ffffff 100%\n  );\n\n  \/* only vertical drop + subtle fade *\/\n  opacity: 0.8;\n  animation: drop 7s infinite, fade 7s infinite;\n  animation-fill-mode: forwards;\n  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);\n  will-change: transform;\n}\n\n.line:nth-child(1) {\n  margin-left: -25%;\n}\n\n.line:nth-child(1)::after {\n  animation-delay: 2s;\n}\n\n.line:nth-child(3) {\n  margin-left: 25%;\n}\n\n.line:nth-child(3)::after {\n  animation-delay: 2.5s;\n}\n\n\/* vertical drop optimized for Firefox\/Chrome\/Edge *\/\n@keyframes drop {\n  0%   { transform: translateY(0); }\n  100% { transform: translateY(150vh); } \/* slightly shorter to reduce jank *\/\n}\n\n\/* subtle opacity variation *\/\n@keyframes fade {\n  0%, 100% { opacity: 0.8; }\n  50% { opacity: 1; }\n}\n<\/style>\n<\/div><\/div><\/div><\/div><div class=\"x-section e625-e12 mhd-0 mhd-1 mhd-2 mhd-3 mhd-7 mhd-8 mhd-9\"><div class=\"x-row e625-e13 mhd-19 mhd-1a mhd-1b mhd-1e mhd-1f mhd-1g mhd-1h mhd-1k mhd-1l mhd-1m mhd-1n mhd-1o mhd-24 mhd-28 mhd-l\"><div class=\"x-row-inner\"><div class=\"x-col e625-e14 mhd-2n mhd-2q\"><div class=\"animation-container\">\n    <div class=\"text-container\">\n        <div id=\"perspective-box\">\n            <div class=\"blur-hed\">Michael<\/div>\n            <div class=\"blur-hed2\">Loucas<\/div>\n            <div class=\"blur-dek\">the maker of things<\/div>\n            <div class=\"blur-dek\">\u2022 Web Developer<\/div>\n            <div class=\"blur-dek\">\u2022 Multimedia Producer<\/div>\n            <div class=\"blur-dek\">\u2022 Print Graphics Video<\/div>\n            <div class=\"blur-byline\">Instructor<\/div>\n            <div class=\"blur-byline2\">e-Learning<\/div>\n            <div class=\"blur-byline3\">Record Producer<\/div>\n            <div class=\"blur-byline4\">E-Commerce<\/div>\n        <\/div>\n    <\/div>\n<\/div><\/div><\/div><\/div><div class=\"x-row e625-e16 mhd-19 mhd-1a mhd-1b mhd-1e mhd-1f mhd-1g mhd-1h mhd-1l mhd-1n mhd-1p mhd-24 mhd-29 mhd-l\"><div class=\"x-row-inner\"><div class=\"x-col e625-e17 mhd-2n mhd-2q mhd-2r mhd-2s mhd-2t mhd-2u mhd-2v\"><span class=\"x-image e625-e18 mhd-38 mhd-39 mhd-m black-face\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/mikeloucas.com\/phatkunt\/wp-content\/uploads\/2025\/12\/mikeblackshadow-c-1.png?fit=445%2C678&amp;ssl=1\" width=\"445\" height=\"678\" alt=\"Michael E. Loucas Black Face\" loading=\"lazy\"><\/span><\/div><\/div><\/div><\/div><div class=\"x-section e625-e19 mhd-0 mhd-1 mhd-2 mhd-3 mhd-8 mhd-9 mhd-a\"><div class=\"x-row x-container max width e625-e20 mhd-19 mhd-1a mhd-1b mhd-1d mhd-1e mhd-1f mhd-1g mhd-1h mhd-1o mhd-1q mhd-1r mhd-24 mhd-2a mhd-n mhd-o stoneRow\"><div class=\"x-row-inner\"><div class=\"x-col e625-e21 mhd-2n mhd-2w\"><div id=\"text-reveal-section\" class=\"SCRLR-root\">\n  <div class=\"SCRLR-stage\">\n    <p class=\"SCRLR-text glow-border\" id=\"SCRLR-text-section\">\n      <span class=\"SCRLR-span\">OVER 1,000,000<br>assets created<br>in over 25 years.<br>Yes...<br>you read that right.<br>\u2014 I have no fingers.\n      <\/span>\n    <\/p>\n  <\/div>\n        <img class=\"brightenUp\" style=\"position:absolute; z-index:-1; width: 100%; height: 100%; object-fit: contain; opacity: 0.9;\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/mikeloucas.com\/phatkunt\/wp-content\/uploads\/2025\/12\/caves.jpeg?fit=896%2C1664&amp;ssl=1\" alt=\"Image\" loading=\"lazy\">\n<\/div>\n\n\n\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n<\/div><\/div><\/div><\/div><div class=\"x-section e625-e23 mhd-1 mhd-3 mhd-9 mhd-b mhd-c mhd-d mhd-e mhd-f confetti dropFade\"><div class=\"x-bg\" aria-hidden=\"true\"><div class=\"x-bg-layer-upper-image\"><\/div><\/div><div class=\"x-row x-container max width e625-e24 mhd-19 mhd-1a mhd-1b mhd-1c mhd-1d mhd-1e mhd-1f mhd-1g mhd-1k mhd-24 mhd-2b\"><div class=\"x-row-inner\"><div class=\"x-col e625-e25 mhd-2n mhd-2x\"><section class=\"slant-section\" id=\"skuSection\">\n  <h3 class=\"slant-subtitle\">Creative Production<\/h3>\n  <h1 class=\"slant-title\">\n    <span class=\"slant-star fontawesome-star\"><\/span> \n    <span>Multimedia Solutions Pro<\/span> \n    <span class=\"slant-star fontawesome-star\"><\/span>\n  <\/h1>\n<\/section>\n\n<style>\n\n\n\/* fontawesome *\/\n[class*=\"fontawesome-\"]:before {\n  font-family: 'FontAwesome', sans-serif;\n}\n\n\/* Base styling *\/\n.slant-section {\n  position: absolute;\n  width: 100%;\n  min-width: 300px;\n  text-align: center;\n  top: 50%;\n  transform: translateY(-50%) matrix(1,0,0,1,0,0); \/* start straight *\/\n  transition: transform 0.1s linear; \/* optional smoothing for rapid scroll *\/\n  padding: 0 10px;\n}\n\n.slant-title {\n  font-family: \"anton\", Sans-serif;\n  text-transform: uppercase;\n  font-weight: 400;\n  font-size: 70px;\n  margin: 10px;\n  color: #ffffff;\n  text-shadow: 2px 2px 41px #196f3d, 4px 4px 2px #28a745;\n}\n\n.slant-title span {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n.slant-star {\n  font-size: 20px;\n  color: #28a745;\n}\n\n.slant-subtitle {\n  font-family: \"ERASBD\", Sans-serif;\n  text-transform: uppercase;\n  font-weight: 700;\n  font-size: 30px;\n  letter-spacing: 0.1em;\n  margin-bottom: 10px;  \n  position: relative;\n  color: #ffffff;\n}\n\n.slant-subtitle:before,\n.slant-subtitle:after {\n  content: \" \";\n  position: absolute;\n  width: 100px;\n height: 18px;\n    border-top: 3px solid #28a745;\n    border-bottom: 6px dotted #28a745;\n}\n\n.slant-subtitle:before { margin: 5px 0 0 -110px; }\n.slant-subtitle:after { margin: 5px 0 0 10px; }\n\n\/* Responsive breakpoints *\/\n@media (max-width: 1200px) { .slant-title { font-size: 60px; } .slant-subtitle { font-size: 25px; } }\n@media (max-width: 992px) { .slant-title { font-size: 50px; } .slant-subtitle { font-size: 17px; } }\n@media (max-width: 768px) { .slant-title { font-size: 40px; } .slant-subtitle { font-size: 14px; } }\n@media (max-width: 576px) { \n  .slant-title { font-size: 23px; } \n  .slant-subtitle { font-size: 16px; } \n  .slant-subtitle:before, .slant-subtitle:after { width: 60px; } \n  .slant-subtitle:before { margin-left: -70px; } \n  .slant-subtitle:after { margin-left: 5px; } \n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const section = document.getElementById('skuSection');\n  const maxSkew = -0.20;       \/\/ maximum slant\n  const triggerPercent = 2;    \/\/ percentage of viewport height when animation starts\n\n  let ticking = false;\n\n  function updateSlant() {\n    const rect = section.getBoundingClientRect();\n    const windowHeight = window.innerHeight;\n\n    const startTrigger = windowHeight * (1 - triggerPercent \/ 100);\n    const endTrigger = 0; \/\/ top of section reaches top of viewport\n\n    let progress = (startTrigger - rect.top) \/ (startTrigger - endTrigger);\n    progress = Math.max(0, Math.min(progress, 1)); \/\/ clamp 0..1\n\n    const skewY = maxSkew * progress;\n    section.style.transform = `translateY(-50%) matrix(1, ${skewY}, 0, 1, 0, 0)`;\n    ticking = false;\n  }\n\n  function onScroll() {\n    if (!ticking) {\n      window.requestAnimationFrame(updateSlant);\n      ticking = true;\n    }\n  }\n\n  window.addEventListener('scroll', onScroll);\n  window.addEventListener('resize', updateSlant);\n  updateSlant(); \/\/ initial check\n});\n<\/script>\n<\/div><\/div><\/div><\/div><div class=\"x-section e625-e27 mhd-0 mhd-1 mhd-2 mhd-3 mhd-9\"><div class=\"x-row x-container max width e625-e28 mhd-18 mhd-19 mhd-1a mhd-1b mhd-1c mhd-1d mhd-1f mhd-1g mhd-1i mhd-1s mhd-24 mhd-2c\"><div class=\"x-row-inner\"><div class=\"x-col e625-e29 mhd-2n mhd-2w mhd-p\">\n<div class=\"myboxRotate-wrapper\">\n\t<div class=\"myboxRotate\" data-flip-start=\"0.85\" data-flip-end=\"0.55\">\n\t\t<div class=\"myboxRotate-inner\"><span>Building Websites<\/span><\/div>\n\t\tDesigning Experiences\n\t<\/div>\n<\/div>\n<div class=\"myboxRotate-wrapper\">\n\t<div class=\"myboxRotate\" data-flip-start=\"0.85\" data-flip-end=\"0.55\">\n\t\t<div class=\"myboxRotate-inner\"><span>Coding & Creating<\/span><\/div>\n\t\tMedia That Moves\n\t<\/div>\n<\/div><div class=\"myboxRotate-wrapper\">\n\t<div class=\"myboxRotate\" data-flip-start=\"0.85\" data-flip-end=\"0.55\">\n\t\t<div class=\"myboxRotate-inner\"><span>Mixing Sounds<\/span><\/div>\n\t\tMotion That Speaks\n\t<\/div>\n<\/div><div class=\"myboxRotate-wrapper\">\n\t<div class=\"myboxRotate\" data-flip-start=\"0.85\" data-flip-end=\"0.55\">\n\t\t<div class=\"myboxRotate-inner\"><span>Sharing Knowledge<\/span><\/div>\n\t\tTeaching & Inspiring\n\t<\/div>\n<\/div><div class=\"myboxRotate-wrapper\">\n\t<div class=\"myboxRotate\" data-flip-start=\"0.85\" data-flip-end=\"0.55\">\n\t\t<div class=\"myboxRotate-inner\"><span>Producing Records<\/span><\/div>\n\t\tHits That Play\n\t<\/div>\n<\/div>\n<div class=\"myboxRotate-wrapper\">\n\t<div class=\"myboxRotate\" data-flip-start=\"0.85\" data-flip-end=\"0.55\">\n\t\t<div class=\"myboxRotate-inner\"><span>Launching Stores<\/span><\/div>\n\t\tE-Commerce That Works\n\t<\/div>\n<\/div>\n<\/div><div class=\"x-col e625-e36 mhd-2n mhd-2o mhd-2r mhd-2t mhd-2u mhd-2x mhd-2y mhd-2z mhd-l mhd-q glow-border turnCurv-trigger  confetti\"><span class=\"x-image e625-e37 mhd-38 mhd-3a mhd-3b mhd-3c mhd-l mhd-r mikeinverted\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/mikeloucas.com\/phatkunt\/wp-content\/uploads\/2025\/12\/young-mike-sweater-3.png?fit=960%2C1088&amp;ssl=1\" width=\"480\" height=\"544\" alt=\"Image\" loading=\"lazy\"><\/span><div class=\"turnCurv-logo-container\">\n  <svg viewBox=\"0 0 100 100\">\n    \n    <defs>\n      <!-- White-ish glow filter -->\n      <filter id=\"whiteGlow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n        <feGaussianBlur stdDeviation=\"3\" result=\"blur\"\/>\n        <feMerge>\n          <feMergeNode in=\"blur\"\/>\n          <feMergeNode in=\"SourceGraphic\"\/>\n        <\/feMerge>\n      <\/filter>\n    <\/defs>\n\n    <!-- Outer curve -->\n    <path id=\"turnCurv-curve1\" d=\"\n      M 23,49\n      a 26.5,26.5 0 1,1 53,0\n      a 26.5,26.5 0 1,1 -53,0\n    \" \/>\n    <text class=\"turnCurv-outer-text\" filter=\"url(#whiteGlow)\">\n      <textPath xlink:href=\"#turnCurv-curve1\" startOffset=\"55%\" text-anchor=\"middle\">\n        HIGHLY RECOMMENDED\n      <\/textPath>\n    <\/text>\n     \n    <!-- Inner curve -->\n    <path id=\"turnCurv-curve2\" d=\"\n      M 30,50\n      a 10,10 0 1,1 40,0\n      a 10,10 0 1,1 -40,0\n    \" \/>\n    <text class=\"turnCurv-inner-text\" filter=\"url(#whiteGlow)\">\n      <textPath xlink:href=\"#turnCurv-curve2\" startOffset=\"42%\" text-anchor=\"middle\">\n        OVERDELIVERING\n      <\/textPath>\n    <\/text>\n    \n  <\/svg>\n<\/div>\n\n<style>\n@font-face {\n  font-family: 'ERASBD';\n  src: url('https:\/\/mikeloucas.com\/phatkunt\/wp-content\/uploads\/2025\/06\/ERASBD.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n.turnCurv-logo-container {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 570px;\n    height: 570px;\n    transform: translate(calc(-50% + 110px), calc(-50% + -150px));\n    transform-origin: center center;\n    z-index: -1;\n}\n\n.turnCurv-logo-container path {\n  fill: transparent;\n}\n\n.turnCurv-outer-text,\n.turnCurv-inner-text {\n  font-family: Futura, \"Century Gothic\", \"Apple Gothic\", \"URW Gothic L\", \"Avant Garde\", sans-serif;\n  font-weight: 600;\n  \/* subtle iOS-friendly glow *\/\n  fill: currentColor;\n  paint-order: stroke;\n  \/* smaller drop-shadow for subtle glow *\/\n  filter: drop-shadow(0 0 0.5px white) drop-shadow(0 0 0.2px white);\n  box-shadow: 0 0 10px #c42525, 0 0 20px #c42525;\n}\n\n\n\n\/* Outer text *\/\n.turnCurv-outer-text {\n  fill: #005035;\n  stroke: #199c7e;\n  stroke-width: 1.5px;\n  letter-spacing: 0.2px;\n  font-size: 9px;\n  paint-order: stroke;\n  text-shadow: 0px -2px white;\n}\n\n\/* Inner text *\/\n.turnCurv-inner-text {\n  fill: #e2a1a2;\n  stroke: #471313;\n  stroke-width: 1.6px;\n  font-size: 7px;\n  letter-spacing: -0.1px;\n  paint-order: stroke;\n  text-shadow: 0px 14px #000000;\n  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(0 0 1px #fff);\n  \/* NEW: make it behave like outer text *\/\n  transform: rotate(0deg); \/* start neutral *\/\n}\n\n\n  @media (max-width: 769px) {\n.turnCurv-logo-container {\n    width: 430px;\n    height: 510px;\n    transform: translate(calc(-50% + 60px), calc(-50% + -110px));\n}\n}\n  \n@media (max-width: 480px) {\n.turnCurv-logo-container {\n    top: 50%;\n    left: 32%;\n    width: 420px;\n    height: 380px;\n}\n}\n\n\n\n<\/style>\n\n<script>\nconst outerTextPath = document.querySelector(\".turnCurv-outer-text textPath\");\nconst innerTextPath = document.querySelector(\".turnCurv-inner-text textPath\");\nconst triggerEl = document.querySelector(\".turnCurv-trigger\");\n\n\/\/ iOS glow fix\nif (\/iPhone|iPad|iPod\/i.test(navigator.userAgent)) {\n  const outerText = document.querySelector(\".turnCurv-outer-text\");\n  const innerText = document.querySelector(\".turnCurv-inner-text\");\n\n  const glow = `\n    0 0 1px #e0fff8,\n    0 0 2px #e0fff8,\n    0 0 3px #e0fff8,\n    0 0 4px #e0fff8,\n    0 0 5px #e0fff8\n  `;\n\n  [outerText, innerText].forEach(text => {\n    text.style.textShadow = glow;\n  });\n}\n\n\/\/ animation state\nlet scrollPosOuter = 0;\nlet scrollPosInner = 0;\nlet targetRotation = 0;\nlet triggered = false;\nlet triggerPoint;\n\n\/\/ function to set triggerPoint based on viewport size\nfunction updateTriggerPoint() {\n  if (window.innerWidth <= 480) {\n    triggerPoint = window.innerHeight * 0.40; \/\/ mobile\n  } else if (window.innerWidth <= 769) {\n    triggerPoint = window.innerHeight * 0.30;  \/\/ tablet\n  } else {\n    triggerPoint = window.innerHeight * 0.35; \/\/ desktop\n  }\n}\n\n\/\/ set initial triggerPoint\nupdateTriggerPoint();\n\n\/\/ update triggerPoint on window resize\nwindow.addEventListener('resize', updateTriggerPoint);\n\n\/\/ scroll listener\nwindow.addEventListener(\"scroll\", () => {\n  if (!triggerEl) return;\n\n  const rect = triggerEl.getBoundingClientRect();\n\n  \/\/ trigger once element reaches the sweet spot\n  if (rect.top < triggerPoint && rect.bottom > 0) {\n    triggered = true;\n  }\n\n  if (triggered) {\n    const progress = triggerPoint - rect.top;\n    targetRotation = Math.max(0, progress * 0.2);\n  } else {\n    targetRotation = 0;\n  }\n});\n\n\/\/ animation loop\nfunction animate() {\n  scrollPosOuter += (targetRotation - scrollPosOuter) * 0.1;\n  scrollPosInner += (targetRotation - scrollPosInner) * 0.05;\n\n  outerTextPath.setAttribute(\"startOffset\", `${55 - scrollPosOuter}%`);\n  innerTextPath.setAttribute(\"startOffset\", `${42 - scrollPosInner}%`);\n\n  requestAnimationFrame(animate);\n}\n\nanimate();\n\n\n<\/script><\/div><\/div><\/div><div class=\"x-row x-container max width e625-e39 mhd-18 mhd-1a mhd-1b mhd-1c mhd-1d mhd-1e mhd-1f mhd-1g mhd-1t mhd-1u mhd-24 mhd-2d\"><div class=\"x-row-inner\"><div class=\"x-col e625-e40 mhd-2m mhd-2n\"><div class=\"x-text x-content e625-e41 mhd-3f mhd-3g mhd-3h mhd-3i mhd-3j dropFade\"><!-- \u201cFirst, I define your audience and the action we want them to take.\u201d -->\n<!-- From pixels to beats \u2014 25 years of making it happen... Let\u2019s Build Something. -->\nFrom pixels to beats, I keep it chill and the process is just as cool. Let\u2019s slide through it.<\/div><\/div><\/div><\/div><\/div><div class=\"x-section e625-e42 mhd-1 mhd-3 mhd-9 mhd-b mhd-d mhd-g mhd-h\"><div class=\"x-row e625-e43 mhd-18 mhd-19 mhd-1a mhd-1d mhd-1g mhd-1h mhd-1v mhd-1w mhd-24 mhd-2e mhd-o mhd-s mhd-t diagonal-stripes glow-border dropFade\"><div class=\"x-row-inner\"><div class=\"x-col e625-e44 mhd-2m mhd-2n mhd-30 mhd-o mhd-q mhd-u\"><div class=\"x-text x-content e625-e45 mhd-3f mhd-3i mhd-3j mhd-3k mhd-3l mhd-3m\"><h3><span style=\"color: #ffffff;\">I build multimedia that performs.<\/span><\/h3><\/div><div class=\"x-text x-content e625-e46 mhd-3f mhd-3i mhd-3j mhd-3l mhd-3m mhd-3n mhd-3o\">I hack\u2026 I hack the <strong>shit<\/strong> outta it! Sure, I\u2019m classically trained in hand-coded development and animation, but now I throw AI into the mix, smart not blindly.<\/div><div class=\"x-text x-content e625-e47 mhd-3f mhd-3i mhd-3j mhd-3l mhd-3n mhd-3p\">Video, web, graphics, and digital experiences get handled start to finish, from concept all the way through launch, with a focus on results that actually move the needle. I make sure the creative and technical sides work together smoothly, no gaps, no handoffs and always <strong>ON TIME<\/strong>. The work looks sharp, runs well, and actually converts assuming your team pulls their weight. lol<\/div><\/div><div class=\"x-col e625-e48 mhd-2m mhd-2n mhd-2r mhd-2u mhd-2y mhd-31 mhd-32 mhd-33 mhd-v mhd-w hide x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;5%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;reset&quot;,&quot;animationEnter&quot;:&quot;wobble&quot;,&quot;animationExit&quot;:&quot;fadeOutUp&quot;}\"><div class=\"x-text x-text-headline e625-e49 mhd-3t mhd-3u mhd-3v mhd-3w mhd-3x\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Tier 1<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e50 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-3z\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">$600<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e51 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">10 hours<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e52 mhd-3u mhd-3x mhd-41 mhd-42 mhd-43 mhd-44 mhd-45 mhd-46\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">small projects<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e53 mhd-3t mhd-3u mhd-3x mhd-44 mhd-46 mhd-47\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Paid in advanced<\/h3>\n<\/div><\/div><\/div><\/div><div class=\"x-col e625-e54 mhd-2m mhd-2n mhd-2r mhd-2u mhd-2y mhd-31 mhd-w mhd-x mhd-y hide x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;6%&quot;,&quot;offsetBottom&quot;:&quot;11%&quot;,&quot;behaviorScroll&quot;:&quot;reset&quot;,&quot;animationEnter&quot;:&quot;wobble&quot;,&quot;animationExit&quot;:&quot;fadeOutUp&quot;}\"><div class=\"x-text x-text-headline e625-e55 mhd-3t mhd-3u mhd-3v mhd-3w mhd-3x\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Tier 2<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e56 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-3z\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">$800<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e57 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">10 hours<br>+ 2 free\/hr<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e58 mhd-3u mhd-3x mhd-41 mhd-42 mhd-43 mhd-44 mhd-45 mhd-46\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">mid projects<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e59 mhd-3t mhd-3u mhd-3x mhd-44 mhd-46 mhd-47\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Paid in advanced<\/h3>\n<\/div><\/div><\/div><\/div><div class=\"x-col e625-e60 mhd-2m mhd-2n mhd-2r mhd-2u mhd-2y mhd-31 mhd-w mhd-x mhd-z hide x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;7%&quot;,&quot;offsetBottom&quot;:&quot;12%&quot;,&quot;behaviorScroll&quot;:&quot;reset&quot;,&quot;animationEnter&quot;:&quot;wobble&quot;,&quot;animationExit&quot;:&quot;fadeOutUp&quot;}\"><div class=\"x-text x-text-headline e625-e61 mhd-3t mhd-3u mhd-3v mhd-3w mhd-3x\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Tier 3<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e62 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-3z\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">$8000<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e63 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">2 momths<br>turnaround time<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e64 mhd-3u mhd-3x mhd-41 mhd-42 mhd-43 mhd-44 mhd-45 mhd-46\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">large full build projects<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e65 mhd-3t mhd-3u mhd-3x mhd-44 mhd-46 mhd-47\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">75% Paid in advanced<\/h3>\n<\/div><\/div><\/div><\/div><div class=\"x-col e625-e66 mhd-2m mhd-2n mhd-2r mhd-2u mhd-2y mhd-31 mhd-w mhd-x mhd-10 hide x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;8%&quot;,&quot;offsetBottom&quot;:&quot;13%&quot;,&quot;behaviorScroll&quot;:&quot;reset&quot;,&quot;animationEnter&quot;:&quot;wobble&quot;,&quot;animationExit&quot;:&quot;fadeOutUp&quot;}\"><div class=\"x-text x-text-headline e625-e67 mhd-3t mhd-3u mhd-3v mhd-3w mhd-3x\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">T4<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e68 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-48\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">$60\/h<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e69 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">T4 Employment<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e70 mhd-3u mhd-3x mhd-41 mhd-42 mhd-43 mhd-44 mhd-45 mhd-46\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">good for employers<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e71 mhd-3t mhd-3u mhd-3x mhd-44 mhd-46 mhd-47\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">prices are flexable<\/h3>\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"x-row x-container max width e625-e72 mhd-18 mhd-1a mhd-1b mhd-1d mhd-1e mhd-1f mhd-1g mhd-1h mhd-1u mhd-1x mhd-24 mhd-2f dropFade\"><div class=\"x-row-inner\"><div class=\"x-col e625-e73 mhd-2m mhd-2n\"><div class=\"x-text x-content e625-e74 mhd-3f mhd-3g mhd-3j mhd-3q mhd-3r\">Once I know <strong>what the client wants<\/strong>, I get to work like caffeine married cocaine. (I'm fast)<\/div><\/div><\/div><\/div><\/div><div class=\"x-section e625-e75 mhd-1 mhd-2 mhd-3 mhd-9 mhd-b mhd-g\"><div class=\"x-row e625-e76 mhd-18 mhd-1a mhd-1b mhd-1c mhd-1e mhd-1f mhd-1g mhd-1n mhd-1y mhd-1z mhd-20 mhd-24 mhd-2g\"><div class=\"x-row-inner\"><div class=\"x-col e625-e77 mhd-2n mhd-34 confetti\"><ul class=\"Words\">\n  <li class=\"Words-line\">\n    <div class=\"Words-block\">\n      <p class=\"Words-text\">Tier 1<br><span class=\"Words-subtext\">Paid in advance<\/span><\/p>\n    <\/div>\n    <div class=\"Words-block\">\n      <p class=\"Words-text\">$600<br><span class=\"Words-subtext\">10 hours<\/span><\/p>\n    <\/div>\n  <\/li>\n  <li class=\"Words-line\">\n    <div class=\"Words-block\">\n      <p class=\"Words-text\">Tier 2<br><span class=\"Words-subtext\">Paid in advance<\/span><\/p>\n    <\/div>\n    <div class=\"Words-block\">\n      <p class=\"Words-text\">$800<br><span class=\"Words-subtext\">12 hours<\/span><\/p>\n    <\/div>\n  <\/li>\n  <li class=\"Words-line\">\n    <div class=\"Words-block\">\n      <p class=\"Words-text\">Tier 3<br><span class=\"Words-subtext\">75% Paid Up Front<\/span><\/p>\n    <\/div>\n    <div class=\"Words-block\">\n      <p class=\"Words-text\">$8K<br><span class=\"Words-subtext\">2 months max<\/span><\/p>\n    <\/div>\n  <\/li>\n  <li class=\"Words-line\">\n    <div class=\"Words-block\">\n      <p class=\"Words-text\">Custom<br><span class=\"Words-subtext\">Tailored pricing<\/span><\/p>\n    <\/div>\n    <div class=\"Words-block\">\n      <p class=\"Words-text\">Flexible<br><span class=\"Words-subtext\">Development<\/span><\/p>\n    <\/div>\n  <\/li>\n<\/ul>\n\n\n<style>\n\/* Base styles *\/\n.Words {\n  display: inline-block;\n  margin: 0 auto;\n  text-align: center;\n  font-family: \"ERASBD\", sans-serif;\n  font-size: clamp(36px, 6vw, 68px);\n  font-weight: 900;\n  letter-spacing: 0px;\n  text-transform: uppercase;\n transform: translate3d(0, 0, 0) scale(1.15);\npadding: 0;\n  transform-origin: top center;\n  -webkit-font-smoothing: antialiased;\n  -webkit-font-kerning: normal;\n  -webkit-text-size-adjust: 100%;\n  cursor: pointer;\n  pointer-events: none;\n  color: whitesmoke;\n<!--   background-color: pink; -->\n}\n\n.Words-line {\n  height: 104px;\n  overflow: hidden;\n  position: relative;\n  pointer-events: auto;\n<!--   background-color: red; -->\n  border: 3px black solid;\n  line-height: 1;\n  align-items: center;\n  justify-content: center;\n}\n\n\/* Skew perspective *\/\n.Words-line:nth-child(odd) {\n  transform: skew(60deg, -30deg) scaleY(0.66667);\n}\n.Words-line:nth-child(even) {\n  transform: skew(0deg, -30deg) scaleY(1.33333);\n}\n\n\/* Horizontal offsets *\/\n.Words-line:nth-child(1) { left: 29px; }\n.Words-line:nth-child(2) { left: 77px; }\n.Words-line:nth-child(3) { left: 127px; }\n.Words-line:nth-child(4) { left: 180px; }\n\n\/* Main text *\/\n.Words-text {\n  height: 145px;\n  padding: 0px 0px;\n  line-height: unset;\n  box-sizing: border-box;\n  margin: 0;\n  transition: all 0.4s ease-in-out;\n  transform: translate3d(0, 0, 0);\n  white-space: nowrap;\n  display: block;\n}\n\n\/* Subtext *\/\n.Words-subtext {\n  display: block;\n  font-size: 0.35em;\n  font-weight: 400;\n  margin-top: 2px;\n}\n\n  @keyframes slideUpNudge {\n  0%   { transform: translate3d(0, 0, 0); }\n  50%  { transform: translate3d(0, -150px, 0); }\n  100% { transform: translate3d(0, 0, 0); }\n}\n\n.Words.nudge .Words-text {\n  animation: slideUpNudge 1s ease-in-out forwards;\n}\n\n  \n\/* Responsive breakpoints for layout only *\/\n@media (max-width: 1200px) {\n  .Words { transform: scale(1.05); padding: 0 0 0 30px; }\n  .Words-line:nth-child(1) { left: 0px; }\n  .Words-line:nth-child(2) { left: 50px; }\n  .Words-line:nth-child(3) { left: 100px; }\n  .Words-line:nth-child(4) { left: 150px; }\n}\n\n@media (max-width: 769px) {\n  .Words { transform: scale(1); padding: 0 0 0 30px; }\n  .Words-line { height: 80px; }\n}\n\n@media (max-width: 426px) {\n  .Words { margin-left: -10%;  }\n   .Words-line { height: 50px; }\n}\n\n@media (max-width: 321px) {\n  .Words { margin-left: -38%; }\n  .Words-line:nth-child(1) { left: 10px; }\n  .Words-line:nth-child(2) { left: 50px; }\n  .Words-line:nth-child(3) { left: 90px; }\n  .Words-line:nth-child(4) { left: 130px; }\n}\n\n\/* Desktop hover only *\/\n@media (hover: hover) and (pointer: fine) {\n  .Words:hover .Words-text {\n    transform: translate3d(0, -150px, 0);\n  }\n}\n\n\/* Mobile toggle via JS *\/\n.Words.is-open .Words-text {\n  transform: translate3d(0, -150px, 0);\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const words = document.querySelector('.Words');\n  if (!words) return; \/\/ safe check\n\n  \/\/ ======= Hover for desktop (unchanged) =======\n  \/\/ already in your CSS: media query handles hover\n\n  \/\/ ======= Click toggle for mobile =======\n  document.addEventListener('click', (e) => {\n    if (words.contains(e.target)) {\n      words.classList.toggle('is-open');\n    } else {\n      words.classList.remove('is-open');\n    }\n  });\n\n  \/\/ ======= Nudge on screen enter (all screens) =======\n  const observer = new IntersectionObserver((entries, obs) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        \/\/ slight delay so it feels natural\n        setTimeout(() => {\n          entry.target.classList.add('nudge');\n\n          \/\/ remove class after animation completes\n          setTimeout(() => {\n            entry.target.classList.remove('nudge');\n          }, 1000); \/\/ matches animation duration\n        }, 300);\n\n        obs.unobserve(entry.target); \/\/ only fire once\n      }\n    });\n  }, { threshold: 0.75 }); \/\/ triggers when 75% visible\n\n  observer.observe(words);\n});\n\n\n\n\n<\/script>\n\n\n\n\n    <\/div><div class=\"x-col e625-e79 mhd-2m mhd-2n mhd-2r mhd-2s mhd-35\"><span class=\"x-image e625-e80 mhd-38 mhd-3b mhd-3d mhd-o mhd-11\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/mikeloucas.com\/phatkunt\/wp-content\/uploads\/2023\/10\/unicorn-enhanced-transpartent.png?fit=1440%2C2569&amp;ssl=1\" width=\"720\" height=\"1284\" alt=\"Geometric unicorn made of colorful triangular shapes\" loading=\"lazy\"><\/span><\/div><\/div><\/div><\/div><div class=\"x-section e625-e81 mhd-0 mhd-1 mhd-2 mhd-5 mhd-e mhd-f mhd-i\"><div class=\"x-row x-container max width e625-e82 mhd-1a mhd-1b mhd-1h mhd-1i mhd-1j mhd-1n mhd-1q mhd-20 mhd-21 mhd-26 mhd-2h mhd-o mhd-12\"><div class=\"x-bg\"><div class=\"x-bg-layer-upper-img\" data-x-element-bg-layer=\"{&quot;parallaxSize&quot;:&quot;150%&quot;,&quot;parallaxDir&quot;:&quot;v&quot;,&quot;parallaxRev&quot;:false}\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/mikeloucas.com\/phatkunt\/wp-content\/uploads\/2026\/01\/wmremove-transformed.webp?fit=640%2C640&amp;ssl=1\" alt=\"Image\" loading=\"lazy\"\/><\/div><\/div><div class=\"x-row-inner\"><div class=\"x-col e625-e83 mhd-2m mhd-2n mhd-36\"><div id=\"myUniquePlaycanvasContainer\" style=\"width:100%; height:300px; position:relative;\"><\/div>\n\n<style>\n#myUniquePlaycanvasContainer {\n  width:100%;\n  height:100%;\n  margin:0;\n  padding:0;\n  position:relative;\n  overflow:hidden;\n<!--   background-color:orange; -->\n}\n\n#myUniquePlaycanvasContainer canvas {\n  position:absolute;\n  top:0;\n  left:0;\n  width:100% !important;\n  height:100% !important;\n  display:block;\n  background:transparent;\n}\n<\/style>\n\n<script type=\"module\">\nimport { Application, Color, Entity, RESOLUTION_AUTO } from \"https:\/\/esm.run\/playcanvas\";\n\n(function(){\n    const container = document.getElementById('myUniquePlaycanvasContainer');\n    const canvas = document.createElement('canvas');\n    container.appendChild(canvas);\n\n    const app = new Application(canvas, { graphicsDeviceOptions:{ alpha:true } });\n    app.setCanvasResolution(RESOLUTION_AUTO);\n    app.scene.skybox = null;\n\n    \/\/ Camera\n    const camera = new Entity();\n    camera.addComponent('camera', { \n        clearColor: new Color(0,0,0,0), \n        projection:'orthographic'\n    });\n    camera.setPosition(0,0,10);\n    app.root.addChild(camera);\n\n    \/\/ Lights\n    const redLight = new Entity();\n    redLight.addComponent('light', { type:'point', color:new Color(0.6, 0.05, 0.05), castShadows:true });\n    app.root.addChild(redLight);\n\n    const blueLight = new Entity();\n    blueLight.addComponent('light', { type:'point', color:new Color(0.06, 0.16, 0.08), castShadows:true });\n    app.root.addChild(blueLight);\n\n    \/\/ Cubes\n    const cubes = [];\n    const cubeSpacing = 1.9; \/\/ distance between cubes in world units\n    const margin = 0.9;    \/\/ extra margin around cubes\n\n    function createCube(scale = 1) {\n        const cube = new Entity();\n        cube.addComponent('render', { type: 'box', castShadows: true });\n\n        const mat = cube.render.material;\n        mat.diffuse.set(1, 1, 1);\n        mat.specular.set(0.4, 0.4, 0.4);\n        mat.shininess = 70;\n        mat.update();\n\n        cube.setLocalScale(scale, scale, scale);\n        app.root.addChild(cube);\n        return cube;\n    }\n\n    \/\/ Responsive cube scale\n    function getCubeScale() {\n        const width = container.clientWidth;\n        if (width < 600) return 0.8;  \/\/ mobile\n        if (width < 1000) return 1;   \/\/ tablet\n        return 1.5;                   \/\/ desktop\n    }\n\n    \/\/ Create cubes\n    const initialScale = getCubeScale();\n    cubes.push(createCube(initialScale));\n    cubes.push(createCube(initialScale));\n\n    \/\/ Resize and camera logic\n    function resizeCanvas(){\n        const rect = container.getBoundingClientRect();\n        canvas.width = rect.width;\n        canvas.height = rect.height;\n        app.resizeCanvas();\n\n        const aspect = rect.width \/ rect.height;\n\n        \/\/ Position cubes horizontally\n        const cubeHalfSpacing = cubeSpacing \/ 2.8;\n        cubes[0].setPosition(-cubeHalfSpacing, 0.1, 0.8);\n        cubes[1].setPosition(cubeHalfSpacing, 0, 1.5);\n\n        \/\/ Update cube scales for responsiveness\n        const newScale = getCubeScale();\n        cubes.forEach(c => c.setLocalScale(newScale, newScale, newScale));\n\n        \/\/ Calculate vertical bounds\n        let maxY = -Infinity, minY = Infinity;\n        cubes.forEach(c => {\n            const posY = c.getPosition().y;\n            const scaleY = c.getLocalScale().y;\n            maxY = Math.max(maxY, posY + scaleY\/2);\n            minY = Math.min(minY, posY - scaleY\/2);\n        });\n\n        \/\/ Set camera orthoHeight based on cubes and aspect\n        const halfHeight = (maxY - minY)\/2 + margin;\n        const halfWidth = cubeSpacing \/ 2 + margin;\n        camera.camera.orthoHeight = Math.max(halfHeight, halfWidth \/ aspect);\n        camera.camera.aspectRatio = aspect;\n\n        \/\/ Center cubes vertically\n        const centerY = (maxY + minY)\/2;\n        cubes.forEach(c => {\n            const pos = c.getPosition();\n            c.setPosition(pos.x, pos.y - centerY, pos.z);\n        });\n    }\n\n    window.addEventListener('resize', resizeCanvas);\n    resizeCanvas();\n\n    \/\/ Animation\n    app.on('update', dt=>{\n        const t = Date.now()\/1000;\n        cubes.forEach(c => c.rotate(dt*10, dt*20, dt*30));\n        redLight.setPosition(Math.sin(t)*3,0,Math.cos(t)*3);\n        blueLight.setPosition(Math.sin(t+Math.PI)*3,0,Math.cos(t+Math.PI)*3);\n    });\n\n    app.start();\n})();\n<\/script>\n\n\n<\/div><\/div><\/div><\/div><div class=\"x-section e625-e85 mhd-0 mhd-1 mhd-3 mhd-9 mhd-d mhd-h confetti\"><div class=\"x-row e625-e86 mhd-18 mhd-19 mhd-1a mhd-1h mhd-1n mhd-1w mhd-1z mhd-22 mhd-2i mhd-o mhd-s mhd-13 diagonal-stripes glow-border dropFade\"><div class=\"x-row-inner\"><div class=\"x-col e625-e87 mhd-2m mhd-2n mhd-2r mhd-2u mhd-2y mhd-31 mhd-33 mhd-37 mhd-v mhd-w x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;5%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;reset&quot;,&quot;animationEnter&quot;:&quot;fadeInDown&quot;,&quot;animationExit&quot;:&quot;fadeOutUp&quot;}\"><div class=\"x-text x-text-headline e625-e88 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Ad-Hoc Production Support<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e89 mhd-3u mhd-3v mhd-3w mhd-3x mhd-41 mhd-42 mhd-43\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Tier 1<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e90 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-3z\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">$600<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e91 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">10 hours<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e92 mhd-3u mhd-3w mhd-40 mhd-42 mhd-44 mhd-49 mhd-4a\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\"><ul>\n \t<li style=\"text-align: left;\"><span>Multimedia production and creative support<\/span><\/li>\n \t<li style=\"text-align: left;\"><span>Digital, print, motion, and technical work<\/span><\/li>\n \t<li style=\"text-align: left;\"><span>Web, code, animation, graphics, fixes, and guidance<\/span><\/li>\n \t<li style=\"text-align: left;\"><span>Used as needed, no expiry pressure<\/span><\/li>\n \t<li style=\"text-align: left;\"><span>Re-up when hours are exhausted<\/span><\/li>\n<\/ul><\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e93 mhd-3u mhd-3x mhd-42 mhd-43 mhd-44 mhd-45 mhd-46 mhd-49 mhd-4b mhd-4c\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Best for quick tasks, small builds,<br \/>\nor ongoing light support.<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e94 mhd-3u mhd-3x mhd-42 mhd-43 mhd-44 mhd-46 mhd-47 mhd-49\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Paid in advanced<\/h3>\n<\/div><\/div><\/div><\/div><div class=\"x-col e625-e95 mhd-2m mhd-2n mhd-2r mhd-2u mhd-2y mhd-31 mhd-33 mhd-37 mhd-w mhd-x mhd-14 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;5%&quot;,&quot;offsetBottom&quot;:&quot;11%&quot;,&quot;behaviorScroll&quot;:&quot;reset&quot;,&quot;animationEnter&quot;:&quot;fadeInDown&quot;,&quot;animationExit&quot;:&quot;fadeOutUp&quot;}\"><div class=\"x-text x-text-headline e625-e96 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Extended Ad-Hoc Support<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e97 mhd-3u mhd-3v mhd-3w mhd-3x mhd-41 mhd-42 mhd-43\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Tier 2<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e98 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-3z\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">$800<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e99 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">12 hours<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e100 mhd-3u mhd-3w mhd-40 mhd-44 mhd-49 mhd-4a mhd-4d\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\"><ul>\n \t<li>Same flexibility as Tier 1<\/li>\n \t<li>Better overall value for clustered work<\/li>\n \t<li>Ideal for short sprints and focused production<\/li>\n \t<li>Re-up when the bucket is empty<\/li>\n \t<li>Perfect for clients who need ongoing support<\/li>\n<\/ul><\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e101 mhd-3u mhd-3x mhd-42 mhd-44 mhd-45 mhd-46 mhd-49 mhd-4b mhd-4c mhd-4e\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">This tier rewards clients who know they\u2019ll need more time without committing to a full project.<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e102 mhd-3u mhd-3x mhd-42 mhd-43 mhd-44 mhd-46 mhd-47 mhd-49\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Paid in advanced (includes 2 bonus hours)<\/h3>\n<\/div><\/div><\/div><\/div><div class=\"x-col e625-e103 mhd-2m mhd-2n mhd-2r mhd-2u mhd-2y mhd-31 mhd-33 mhd-37 mhd-w mhd-x mhd-15 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;5%&quot;,&quot;offsetBottom&quot;:&quot;12%&quot;,&quot;behaviorScroll&quot;:&quot;reset&quot;,&quot;animationEnter&quot;:&quot;fadeInDown&quot;,&quot;animationExit&quot;:&quot;fadeOutUp&quot;}\"><div class=\"x-text x-text-headline e625-e104 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Full-Service Project Engagement<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e105 mhd-3u mhd-3v mhd-3w mhd-3x mhd-41 mhd-42 mhd-43\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Tier 3<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e106 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-3z\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">$8000<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e107 mhd-3t mhd-3u mhd-3w mhd-3x mhd-3y mhd-40\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">1\u20132 months<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e108 mhd-3u mhd-3w mhd-40 mhd-42 mhd-44 mhd-49 mhd-4a\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\"><ul>\n \t<li>End-to-end multimedia production for any format<\/li>\n \t<li>Web, code, animation, graphics, SEO, integration<\/li>\n \t<li>Planning, execution, revisions, final polish<\/li>\n \t<li>Ongoing collaboration through completion<\/li>\n<\/ul><\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e109 mhd-3u mhd-3x mhd-42 mhd-43 mhd-44 mhd-45 mhd-46 mhd-49 mhd-4c mhd-4f\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Designed for larger builds that require momentum, continuity, and a complete solution<\/h3>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e625-e110 mhd-3u mhd-3x mhd-42 mhd-43 mhd-44 mhd-46 mhd-47 mhd-49\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">75% upfront to start \/ 25% on completion<\/h3>\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"x-row x-container max width e625-e111 mhd-18 mhd-1a mhd-1b mhd-1d mhd-1e mhd-1f mhd-1g mhd-1h mhd-1u mhd-23 mhd-24 mhd-2j\"><div class=\"x-row-inner\"><div class=\"x-col e625-e112 mhd-2m mhd-2n\"><div class=\"x-text x-content e625-e113 mhd-3f mhd-3g mhd-3h mhd-3j mhd-3r dropFade\"><p>Services include, but aren&rsquo;t limited to: digital, print, motion, and technical production.<\/p><\/div><\/div><\/div><\/div><\/div><div class=\"x-section e625-e114 mhd-0 mhd-1 mhd-2 mhd-5 mhd-9 mhd-f mhd-j mhd-o mhd-16\"><div class=\"x-bg\" aria-hidden=\"true\"><div class=\"x-bg-layer-upper-image\" data-x-element-bg-layer=\"{&quot;parallaxSize&quot;:&quot;140%&quot;,&quot;parallaxDir&quot;:&quot;v&quot;,&quot;parallaxRev&quot;:false}\"><\/div><\/div><div class=\"x-row e625-e115 mhd-18 mhd-19 mhd-1a mhd-1b mhd-1c mhd-1d mhd-1e mhd-1f mhd-1g mhd-24 mhd-2k\"><div class=\"x-row-inner\"><div class=\"x-col e625-e116 mhd-2m mhd-2n\"><span class=\"x-image e625-e117 mhd-38 mhd-3b mhd-3c mhd-3e mhd-o mhd-17\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/mikeloucas.com\/phatkunt\/wp-content\/uploads\/2025\/12\/chatgpt-image-dec-22-2025-12_45_36-am-artcg.jpeg?fit=1600%2C852&amp;ssl=1\" width=\"800\" height=\"426\" alt=\"\" loading=\"lazy\"><\/span><\/div><\/div><\/div><\/div><div class=\"x-section e625-e118 mhd-0 mhd-1 mhd-2 mhd-5 mhd-k\"><div class=\"x-row x-container max width e625-e119 mhd-18 mhd-19 mhd-1a mhd-1b mhd-1c mhd-1d mhd-1e mhd-1f mhd-1g mhd-24 mhd-2l\"><div class=\"x-row-inner\"><div class=\"x-col e625-e120 mhd-2n mhd-2w\"><div class=\"x-text x-content e625-e121 mhd-3f mhd-3g mhd-3h mhd-3i mhd-3s\">mike@mikeloucas.com, 416-427-4254 | Collaboration & decades of experience in media and tech.<\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Enter8 Ball + Red Button = Audio\/Scroll Michael Loucas the maker of things \u2022 Web Developer \u2022 Multimedia Producer \u2022 Print Graphics Video Instructor e-Learning Record Producer E-Commerce OVER 1,000,000assets createdin over 25 years.Yes&#8230;you read that right.\u2014 I have no fingers. Creative Production Multimedia Solutions Pro Building Websites Designing Experiences Coding &#038; Creating Media That Moves Mixing Sounds Motion That &#8230; <\/p>\n<div><a href=\"https:\/\/mikeloucas.com\/phatkunt\/\" class=\"more-link\">Read More<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-blank-8.php","meta":{"nf_dc_page":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-625","page","type-page","status-publish","hentry","category-8","no-post-thumbnail"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/pages\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":5,"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/pages\/625\/revisions"}],"predecessor-version":[{"id":1705,"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/pages\/625\/revisions\/1705"}],"wp:attachment":[{"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/media?parent=625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/categories?post=625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mikeloucas.com\/phatkunt\/wp-json\/wp\/v2\/tags?post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}