Vansh.fyi: About this website

import { useEffect } from "react"
import { animate, Override } from "framer"

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
/*─────────────────────────────────────────────────────────
  Cue list (timestamps in seconds)
─────────────────────────────────────────────────────────*/
const cues = [
    { t: 1.4, id: "line1" },
    { t: 2.76, id: "line2a" },
    { t: 4.46, id: "line2b" },
    { t: 5.96, id: "line2c" },
    { t: 8.15, id: "line3" },
    { t: 8.69, id: "line4a" },
    { t: 10.69, id: "line4b" },
    { t: 14.07, id: "line5" },
    { t: 15.9, id: "fadeOut" },
]

/*─────────────────────────────────────────────────────────
  1 ▸  Overlay frame — keep ID so we can animate it
─────────────────────────────────────────────────────────*/
export const IntroOverlay: Override = () => ({
    id: "IntroOverlay",
})

/*─────────────────────────────────────────
 2 ▸ DREAM-MODE button  –  play-pause-reset
─────────────────────────────────────────*/
export const StartDream: Override = () => {
    console.log("StartDream override attached") // optional debug

    return {
        async onTap() {
            console.log("Dream button tapped") // optional debug

            const overlay = document.getElementById("ModeOverlay")
            const prompt = document.getElementById("volumePrompt")
            const countdown = document.getElementById("countdown")
            const audio = document.getElementById(
                "introAudio"
            ) as HTMLAudioElement | null
            if (!audio) return

            /* 0 ───────────────────────────── Safari unlock */
            audio.muted = true
            audio.currentTime = 0
            await audio.play().catch(console.error) // inside gesture → allowed
            audio.pause() // stop instantly
            audio.currentTime = 0 // rewind
            audio.muted = false // un-mute

            /* 1 ─ hide overlay immediately */
            if (overlay) {
                overlay.style.pointerEvents = "none"
                await animate(
                    "#ModeOverlay",
                    { opacity: 0 },
                    { duration: 0.25 }
                )
                overlay.remove()
            }

            /* 2 ─ show “Turn up volume” prompt */
            if (prompt) prompt.style.opacity = "1"

            for (let i = 5; i >= 1; i--) {
                const textElement = countdown.querySelector("p")
                if (textElement) {
                    textElement.textContent = `Entering the dream in ${i}`
                } else {
                    // Fallback for safety
                    countdown.textContent = `Entering the dream in ${i}`
                }
                await wait(1100)
            }
            /* 3 ─ start narration after 4.7 s */
            setTimeout(() => {
                audio.play().catch(console.error) // now Safari allows
            }, 100)

            /* 4 ─ fade prompt out after 5.0 s total */
            if (prompt) {
                await animate(
                    "#volumePrompt",
                    { opacity: 0 },
                    { delay: 0.4, duration: 0.3 }
                )
                prompt.remove()
            }
        },
    }
}
/*─────────────────────────────────────────────────────────
  3 ▸  PROFESSIONAL MODE button — simple link
─────────────────────────────────────────────────────────*/
/* PROFESSIONAL MODE button — simple navigation */
export const GoProfessional: Override = () => ({
    onTap() {
        window.location.href = "/old-home"
    },
})

/*─────────────────────────────────────────────────────────
  4 ▸  Audio / cue runner
      (fires only after Dream-mode button plays the track)
─────────────────────────────────────────────────────────*/
export const IntroAudio: Override = () => {
    useEffect(() => {
        const audio = document.getElementById(
            "introAudio"
        ) as HTMLAudioElement | null
        if (!audio) return

        /* Run cue loop only when audio is actually playing */
        audio.addEventListener("playing", () => {
            const step = () => {
                const t = audio.currentTime
                cues.forEach(({ id, t: cue }) => {
                    const node = document.getElementById(
                        id
                    ) as HTMLElement | null
                    if (node && !node.dataset.shown && t >= cue) {
                        node.dataset.shown = "true"
                        trigger(id, node)
                    }
                })
                if (!audio.paused) requestAnimationFrame(step)
            }
            requestAnimationFrame(step)
            /* 1-B  Fade in “Skip intro” after 3 seconds  */
            setTimeout(() => {
                const btn = document.getElementById("skipBtn")
                if (btn) animate(btn, { opacity: 1 }, { duration: 1 })
            }, 3000) // 3000 ms = 3 s
        })
    }, [])

    return {}
}

/*─────────────────────────────────────────────────────────
  5 ▸  Skip-intro link  (optional layer)
─────────────────────────────────────────────────────────*/
export const SkipIntro: Override = () => ({
    onTap() {
        const audio = document.getElementById(
            "introAudio"
        ) as HTMLAudioElement | null
        audio?.pause()

        animate(
            "#IntroOverlay",
            { opacity: 0 },
            {
                duration: 0.4,
                onComplete: () => {
                    localStorage.setItem("dreamSeen", "true")
                    window.location.href = "/old-home"
                },
            }
        )
    },
})

/*─────────────────────────────────────────────────────────
  6 ▸  Trigger helper
─────────────────────────────────────────────────────────*/
function trigger(id: string, node?: HTMLElement) {
    if (id === "fadeOut") {
        animate(
            "#IntroOverlay",
            { opacity: 0 },
            {
                duration: 0.8,
                onComplete: () => (window.location.href = "/old-home"),
            }
        )
    } else if (node) {
        node.style.opacity = "0"
        animate(node, { opacity: 1 }, { duration: 0.6, ease: "easeOut" })
    }
}