Component Lab

// Pixel Drift — Originkit
// Originkit — props baked into the default export.
"use client"

import * as React from "react"
import { useEffect, useRef } from "react"
const RenderTarget = {
    current: () => "preview",
    canvas: "canvas",
    export: "export",
    thumbnail: "thumbnail",
    preview: "preview",
}

/**
 * ParticleText — text rendered as a dense field of colored particles that
 * get displaced by the cursor like a black hole carving a void out of a
 * star field: particles whose origins fall within the cursor's radius are
 * pushed outward to sit on the ring at the radius edge; particles outside
 * the radius rest at their origins. A stationary cursor = a stationary void.
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 * @framerIntrinsicWidth 600
 * @framerIntrinsicHeight 600
 */
function __OriginkitBase_ParticleText(props: Props) {
    props = { ...COMPONENT_DEFAULTS, ...props }
    const {
        text,
        colors,
        mode,
        replay,
        position,
        particleSize,
        particleCount,
        mouseEnabled,
        mouseRadius,
        mouseForce,
        fontSize,
        autoFit,
        transition,
        style,
    } = props

    const containerRef = useRef<HTMLDivElement | null>(null)
    const canvasRef = useRef<HTMLCanvasElement | null>(null)
    const rafRef = useRef<number | null>(null)
    const pointerRef = useRef({ x: -99999, y: -99999, active: false })
    // Animated formation value 0→1 (0 = at spawn / invisible, 1 = fully formed).
    // Rate-based (not timeline-based) so appear and dissolve can be interrupted
    // mid-way and continue from the CURRENT partial state — the fix for the
    // whole-text snap that happened when reversing restarted the timeline.
    const formValRef = useRef(0)
    const lastFrameRef = useRef<number | null>(null)
    // hidden = draw nothing (particles absent); reverse = ease toward 0 to
    // dissolve out. Driven by the mode triggers below.
    const hiddenRef = useRef(false)
    const reverseRef = useRef(false)
    // Freeze ONLY on true static renders (export / thumbnail). The Framer
    // canvas and Preview run the live rAF loop so particles form and respond
    // to control changes while editing. Gating on useIsStaticRenderer() (true
    // on canvas) is what previously froze it to a single warm-up frame.
    const renderTarget = RenderTarget.current()
    const isStatic =
        renderTarget === RenderTarget.export ||
        renderTarget === RenderTarget.thumbnail

    const colorsKey = Array.isArray(colors) ? colors.join("|") : ""
    // Stable dependency key for the Transition object (new identity each render).
    const transitionKey = JSON.stringify(transition ?? {})

    const mcEnabled = !!mouseEnabled
    const mcRadius = typeof mouseRadius === "number" ? mouseRadius : 150
    const mcForce = typeof mouseForce === "number" ? mouseForce : 6

    useEffect(() => {
        const container = containerRef.current
        const canvas = canvasRef.current
        if (!container || !canvas) return
        const ctx = canvas.getContext("2d", { alpha: true })
        if (!ctx) return

        const palette =
            Array.isArray(colors) && colors.length > 0
                ? colors
                : ["#40ffaa", "#40aaff", "#ff40aa", "#aa40ff"]

        let count = 0
        let ox: Float32Array = new Float32Array(0)
        let oy: Float32Array = new Float32Array(0)
        // Spawn positions (random) — kept so formation can interpolate spawn→origin.
        let sx: Float32Array = new Float32Array(0)
        let sy: Float32Array = new Float32Array(0)
        let px: Float32Array = new Float32Array(0)
        let py: Float32Array = new Float32Array(0)
        // Cursor repulsion offset from home (SVGParticles model).
        let repX: Float32Array = new Float32Array(0)
        let repY: Float32Array = new Float32Array(0)
        let cIdx: Uint8Array = new Uint8Array(0)

        // Mouse-speed + smoothed-position state for the repulsion engine.
        let prevMx = -99999
        let prevMy = -99999
        let mouseSpeed = 0
        let smoothX = -99999
        let smoothY = -99999

        let cssW = 0
        let cssH = 0
        let dpr = 1

        const sampleText = () => {
            const W = cssW
            const H = cssH
            if (W <= 0 || H <= 0) return

            const off = document.createElement("canvas")
            off.width = Math.max(1, Math.floor(W * dpr))
            off.height = Math.max(1, Math.floor(H * dpr))
            const offCtx = off.getContext("2d", { willReadFrequently: true })
            if (!offCtx) return
            offCtx.scale(dpr, dpr)

            const fontFamily =
                'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'

            const maxW = W * 0.92
            const maxH = H * 0.92
            let effectiveSize = Math.max(8, fontSize)
            if (autoFit) {
                effectiveSize = fitFontSize(
                    offCtx,
                    text || "",
                    fontFamily,
                    maxW,
                    maxH,
                    Math.max(8, fontSize)
                )
            }

            // Width/height guard — always shrink so the text can never spill
            // past the canvas edges (where it'd be clipped and sampled cut).
            // Runs whether or not Auto Fit is on, so a large Font Size just
            // scales down to fit instead of losing its outer letters.
            offCtx.font = `700 ${effectiveSize}px ${fontFamily}`
            const gm = offCtx.measureText(text || "")
            const gW = gm.width || 1
            const gH =
                (gm.actualBoundingBoxAscent || effectiveSize * 0.8) +
                (gm.actualBoundingBoxDescent || effectiveSize * 0.2)
            const fitScale = Math.min(1, maxW / gW, maxH / gH)
            if (fitScale < 1)
                effectiveSize = Math.max(8, effectiveSize * fitScale)

            offCtx.clearRect(0, 0, W, H)
            offCtx.fillStyle = "#fff"
            offCtx.font = `700 ${effectiveSize}px ${fontFamily}`
            offCtx.textAlign = "center"
            offCtx.textBaseline = "middle"
            offCtx.fillText(text || "", W / 2, H / 2)

            const img = offCtx.getImageData(
                0,
                0,
                Math.floor(W * dpr),
                Math.floor(H * dpr)
            )
            const data = img.data

            // Particle Count (1–50): higher = denser. Same sampling-gap formula
            // as SVGParticles — gap = 150 / count, independent of particle size.
            const pCount = Math.max(1, Math.min(50, particleCount))
            const stride = Math.max(2, Math.round(150 / pCount))

            let candidates = 0
            for (let y = 0; y < H; y += stride) {
                for (let x = 0; x < W; x += stride) {
                    const ix = Math.floor(x * dpr)
                    const iy = Math.floor(y * dpr)
                    const idx = (iy * img.width + ix) * 4 + 3
                    if (data[idx] > 128) candidates++
                }
            }

            const downsample =
                candidates > 30000 ? Math.ceil(candidates / 30000) : 1
            const allocCount = Math.min(candidates, 30000)

            const newOx = new Float32Array(allocCount)
            const newOy = new Float32Array(allocCount)
            const newSx = new Float32Array(allocCount)
            const newSy = new Float32Array(allocCount)
            const newPx = new Float32Array(allocCount)
            const newPy = new Float32Array(allocCount)
            const newC = new Uint8Array(allocCount)

            let i = 0
            let seen = 0
            for (let y = 0; y < H && i < allocCount; y += stride) {
                for (let x = 0; x < W && i < allocCount; x += stride) {
                    const ix = Math.floor(x * dpr)
                    const iy = Math.floor(y * dpr)
                    const idx = (iy * img.width + ix) * 4 + 3
                    if (data[idx] > 128) {
                        if (seen % downsample === 0) {
                            newOx[i] = x
                            newOy[i] = y
                            // Spawn OUTSIDE the canvas — a random point on a ring
                            // beyond the edges — so particles fly in from outside
                            // and dissolve back out the same way.
                            const ang = Math.random() * Math.PI * 2
                            const rad =
                                Math.max(W, H) * (0.6 + Math.random() * 0.5)
                            const rx = W / 2 + Math.cos(ang) * rad
                            const ry = H / 2 + Math.sin(ang) * rad
                            newSx[i] = rx
                            newSy[i] = ry
                            newPx[i] = rx
                            newPy[i] = ry
                            newC[i] = Math.floor(Math.random() * palette.length)
                            i++
                        }
                        seen++
                    }
                }
            }

            count = i
            ox = newOx
            oy = newOy
            sx = newSx
            sy = newSy
            px = newPx
            py = newPy
            repX = new Float32Array(allocCount)
            repY = new Float32Array(allocCount)
            cIdx = newC
            // Re-sampling = a fresh layout, so replay the formation from spawn.
            formValRef.current = 0
            lastFrameRef.current = null
        }

        const fitFontSize = (
            measureCtx: CanvasRenderingContext2D,
            label: string,
            family: string,
            maxW: number,
            maxH: number,
            cap: number
        ) => {
            if (!label) return cap
            let lo = 8
            let hi = cap
            let best = lo
            for (let iter = 0; iter < 12; iter++) {
                const mid = (lo + hi) / 2
                measureCtx.font = `700 ${mid}px ${family}`
                const m = measureCtx.measureText(label)
                const w = m.width
                const h =
                    (m.actualBoundingBoxAscent || mid * 0.8) +
                    (m.actualBoundingBoxDescent || mid * 0.2)
                if (w <= maxW && h <= maxH) {
                    best = mid
                    lo = mid
                } else {
                    hi = mid
                }
            }
            return Math.max(8, Math.floor(best))
        }

        const resize = () => {
            const rect = container.getBoundingClientRect()
            const w = Math.floor(rect.width)
            const h = Math.floor(rect.height)
            if (w <= 0 || h <= 0) return
            dpr = Math.max(
                1,
                Math.min(
                    2,
                    typeof window !== "undefined"
                        ? window.devicePixelRatio || 1
                        : 1
                )
            )
            cssW = w
            cssH = h
            canvas.width = Math.floor(cssW * dpr)
            canvas.height = Math.floor(cssH * dpr)
            ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
            sampleText()
        }

        resize()

        // Mode setup — both modes start hidden and wait for their trigger.
        //  • onHover: form in on pointerenter, dissolve out on leave.
        //  • onEnter: form when the component scrolls into view at Position;
        //    Replay re-forms on every re-entry, otherwise it plays once.
        reverseRef.current = false
        hiddenRef.current = true
        formValRef.current = 0

        const formIn = () => {
            reverseRef.current = false
            hiddenRef.current = false
        }
        const formOut = () => {
            reverseRef.current = true
        }

        let tryEnter: (() => void) | null = null
        const enterTimers: ReturnType<typeof setTimeout>[] = []

        const ro = new ResizeObserver(() => {
            resize()
            if (isStatic) staticDraw()
            tryEnter?.()
        })
        ro.observe(container)

        const onMove = (e: PointerEvent) => {
            if (!mcEnabled) return
            const rect = canvas.getBoundingClientRect()
            const scaleX = rect.width > 0 ? cssW / rect.width : 1
            const scaleY = rect.height > 0 ? cssH / rect.height : 1
            const mx = (e.clientX - rect.left) * scaleX
            const my = (e.clientY - rect.top) * scaleY
            if (prevMx > -9000) {
                const ddx = mx - prevMx
                const ddy = my - prevMy
                mouseSpeed = Math.sqrt(ddx * ddx + ddy * ddy)
            }
            prevMx = mx
            prevMy = my
            pointerRef.current.x = mx
            pointerRef.current.y = my
            pointerRef.current.active = true
        }
        const onLeave = () => {
            pointerRef.current.x = -99999
            pointerRef.current.y = -99999
            pointerRef.current.active = false
            prevMx = -99999
            prevMy = -99999
        }
        canvas.addEventListener("pointermove", onMove)
        canvas.addEventListener("pointerleave", onLeave)
        canvas.addEventListener("pointercancel", onLeave)

        let io: IntersectionObserver | null = null
        let sentinel: HTMLDivElement | null = null
        if (mode === "onHover") {
            container.addEventListener("pointerenter", formIn)
            container.addEventListener("pointerleave", formOut)
        } else {
            sentinel = document.createElement("div")
            sentinel.style.position = "absolute"
            sentinel.style.left = "0"
            sentinel.style.width = "1px"
            sentinel.style.height = "1px"
            sentinel.style.pointerEvents = "none"
            if (position === "middle") sentinel.style.top = "50%"
            else if (position === "below") sentinel.style.bottom = "0"
            else sentinel.style.top = "0"
            container.appendChild(sentinel)

            let entered = false
            const enter = () => {
                if (entered) return
                entered = true
                formIn()
                if (!replay) io?.disconnect()
            }
            tryEnter = () => {
                if (entered || typeof window === "undefined") return
                const r = container.getBoundingClientRect()
                if (r.width === 0 && r.height === 0) return
                const vh = window.innerHeight || 0
                const vw = window.innerWidth || 0
                const y =
                    position === "middle"
                        ? r.top + r.height / 2
                        : position === "below"
                          ? r.bottom
                          : r.top
                const onScreen =
                    r.right >= 0 && r.left <= vw && r.bottom >= 0 && y <= vh
                if (onScreen) enter()
            }
            io = new IntersectionObserver(
                ([entry]) => {
                    if (entry.isIntersecting) {
                        enter()
                    } else if (replay) {
                        entered = false
                        hiddenRef.current = true
                        reverseRef.current = false
                        formValRef.current = 0
                    }
                },
                { threshold: 0 }
            )
            io.observe(sentinel)
            tryEnter()
            enterTimers.push(
                setTimeout(() => tryEnter?.(), 60),
                setTimeout(() => tryEnter?.(), 250),
                setTimeout(() => tryEnter?.(), 600)
            )
        }

        const buckets: number[][] = palette.map(() => [])

        const easeFn = resolveEasingFn(transition)
        const formMs = Math.max(0, resolveDuration(transition) * 1000)

        const drawFrame = () => {
            ctx.clearRect(0, 0, cssW, cssH)

            const pr = pointerRef.current
            const drawSize = Math.max(1, particleSize / 4)
            const half = drawSize / 2

            const now =
                typeof performance !== "undefined" ? performance.now() : 0
            const last = lastFrameRef.current ?? now
            const dt = Math.min(64, Math.max(0, now - last))
            lastFrameRef.current = now
            const reverse = reverseRef.current
            const target = reverse ? 0 : 1
            let v = formValRef.current
            if (isStatic || formMs <= 0) {
                v = target
            } else {
                const stepv = dt / formMs
                if (v < target) v = Math.min(target, v + stepv)
                else if (v > target) v = Math.max(target, v - stepv)
            }
            formValRef.current = v
            if (reverse && v <= 0) hiddenRef.current = true
            if (hiddenRef.current) return
            const forming = v < 1
            const factor = easeFn(v)

            const hitSpeed = mouseSpeed
            mouseSpeed *= 0.88
            const active = !forming && mcEnabled && pr.active
            if (active) {
                const lerpFactor = Math.max(0.08, 0.3 - hitSpeed * 0.006)
                if (smoothX < -9000) {
                    smoothX = pr.x
                    smoothY = pr.y
                } else {
                    smoothX += (pr.x - smoothX) * lerpFactor
                    smoothY += (pr.y - smoothY) * lerpFactor
                }
            } else {
                smoothX = -99999
                smoothY = -99999
            }
            const mx = smoothX
            const my = smoothY
            const repCutoff = Math.max(1, mcRadius)
            const repCutoffSq = repCutoff * repCutoff
            const rF = mcForce

            for (let b = 0; b < buckets.length; b++) buckets[b].length = 0

            for (let i = 0; i < count; i++) {
                const oxi = ox[i]
                const oyi = oy[i]

                if (forming) {
                    px[i] = sx[i] + (oxi - sx[i]) * factor
                    py[i] = sy[i] + (oyi - sy[i]) * factor
                    buckets[cIdx[i]].push(i)
                    continue
                }

                let inZone = false
                if (active) {
                    const dx = oxi - mx
                    const dy = oyi - my
                    const distSq = dx * dx + dy * dy
                    if (distSq > 0 && distSq < repCutoffSq) {
                        const dist = Math.sqrt(distSq)
                        const nx = dx / dist
                        const ny = dy / dist
                        const falloff = 1 - dist / repCutoff
                        const push = falloff * hitSpeed * rF * 0.05
                        repX[i] += nx * push
                        repY[i] += ny * push
                        const targetRepX = nx * (repCutoff - dist)
                        const targetRepY = ny * (repCutoff - dist)
                        repX[i] += (targetRepX - repX[i]) * 0.06
                        repY[i] += (targetRepY - repY[i]) * 0.06
                        inZone = true
                    }
                }
                if (!inZone) {
                    repX[i] *= 0.97
                    repY[i] *= 0.97
                }

                px[i] = oxi + repX[i]
                py[i] = oyi + repY[i]

                buckets[cIdx[i]].push(i)
            }

            ctx.globalAlpha = forming ? Math.min(1, Math.max(0, factor)) : 1
            for (let b = 0; b < buckets.length; b++) {
                const bucket = buckets[b]
                if (bucket.length === 0) continue
                ctx.fillStyle = palette[b]
                for (let k = 0; k < bucket.length; k++) {
                    const i = bucket[k]
                    ctx.fillRect(px[i] - half, py[i] - half, drawSize, drawSize)
                }
            }
            ctx.globalAlpha = 1
        }

        const staticDraw = () => {
            hiddenRef.current = false
            reverseRef.current = false
            for (let i = 0; i < count; i++) {
                px[i] = ox[i]
                py[i] = oy[i]
            }
            drawFrame()
        }

        const removeTriggers = () => {
            container.removeEventListener("pointerenter", formIn)
            container.removeEventListener("pointerleave", formOut)
            io?.disconnect()
            sentinel?.remove()
            enterTimers.forEach(clearTimeout)
        }

        if (isStatic) {
            staticDraw()
            return () => {
                canvas.removeEventListener("pointermove", onMove)
                canvas.removeEventListener("pointerleave", onLeave)
                canvas.removeEventListener("pointercancel", onLeave)
                removeTriggers()
                ro.disconnect()
            }
        }

        const loop = () => {
            drawFrame()
            rafRef.current = requestAnimationFrame(loop)
        }
        rafRef.current = requestAnimationFrame(loop)

        return () => {
            if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
            canvas.removeEventListener("pointermove", onMove)
            canvas.removeEventListener("pointerleave", onLeave)
            canvas.removeEventListener("pointercancel", onLeave)
            removeTriggers()
            ro.disconnect()
        }
    }, [
        mode, replay, position, text, colorsKey, particleSize, particleCount,
        mcEnabled, mcRadius, mcForce, fontSize, autoFit, transitionKey, isStatic,
    ])

    return (
        <div
            ref={containerRef}
            style={{
                position: "relative",
                width: "100%",
                height: "100%",
                minWidth: 800,
                minHeight: 300,
                overflow: "hidden",
                ...style,
            }}
        >
            <canvas
                ref={canvasRef}
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}
            />
        </div>
    )
}

type Props = {
    text: string
    colors: string[]
    mode: "onEnter" | "onHover"
    replay: boolean
    position: "above" | "middle" | "below"
    particleSize: number
    particleCount: number
    mouseEnabled: boolean
    mouseRadius: number
    mouseForce: number
    fontSize: number
    autoFit: boolean
    transition: TransitionValue
    style?: React.CSSProperties
}

const COMPONENT_DEFAULTS = {
    text: "PIXEL DRIFT",
    colors: ["#FFFFFF", "#1995FA", "#FFFFFF"],
    mode: "onEnter",
    replay: true,
    position: "above",
    particleSize: 12,
    particleCount: 50,
    mouseEnabled: true,
    mouseRadius: 50,
    mouseForce: 30,
    fontSize: 80,
    autoFit: false,
    transition: { type: "tween", duration: 0, ease: "linear" },
}

export default function ParticleText(props: Record<string, unknown>) {
  return <__OriginkitBase_ParticleText {...props} />
}

// Appear Text — Originkit
// Using component defaults.
"use client";

import * as React from "react";
import { useMemo } from "react";
import { motion } from "framer-motion";

type Transition = {
    type?: string;
    stiffness?: number;
    damping?: number;
    mass?: number;
    ease?: string;
    duration?: number;
};

type Props = {
    text?: string;
    font?: React.CSSProperties;
    textColor?: string;
    backgroundColor?: string;
    rowCount?: number;
    repeatCount?: number;
    rowGap?: number;
    wordGap?: number;
    expandDurationSec?: number;
    holdDurationSec?: number;
    horizontalShiftPx?: number;
    zoomScalePct?: number;
    transition?: Transition;
    style?: React.CSSProperties;
};

export default function KineticTextGrid(props: Props) {
    const {
        text = "APPEAR TEXT",
        font = {
            fontFamily: "Inter",
            fontWeight: 700,
            fontSize: 64,
            lineHeight: "1.5em",
            letterSpacing: "0em",
            textAlign: "left",
        },
        textColor = "#FFFFFF",
        backgroundColor = "#000000",
        rowCount = 5,
        repeatCount = 5,
        rowGap = 16,
        wordGap = 24,
        expandDurationSec = 1,
        holdDurationSec = 1,
        horizontalShiftPx = 80,
        zoomScalePct = 115,
        transition = {
            type: "tween",
            stiffness: 800,
            damping: 60,
            mass: 1,
            ease: "easeInOut",
            duration: 1,
        },
        style,
    } = props;

    // Keep counts odd for an exact geometric center
    const safeRowCount = rowCount % 2 === 0 ? rowCount + 1 : rowCount;
    const centerRowIndex = Math.floor(safeRowCount / 2);
    const safeRepeatCount =
        repeatCount % 2 === 0 ? repeatCount + 1 : repeatCount;
    const centerWordIndex = Math.floor(safeRepeatCount / 2);

    const rows = useMemo(
        () => Array.from({ length: safeRowCount }, (_, i) => i),
        [safeRowCount]
    );
    const words = useMemo(
        () => Array.from({ length: safeRepeatCount }, (_, i) => i),
        [safeRepeatCount]
    );

    const fontStyles = (font ?? {}) as React.CSSProperties;
    const maxZoomScale = zoomScalePct / 100;

    // How offset the grid is at rest, as a fraction of the full drift.
    // > 0 so rows are always staggered (never a flat, aligned grid).
    const HOME_FACTOR = 0.4;

    const ease = (transition as any)?.ease ?? "easeInOut";

    // ---- Timeline (seconds) — no gap between the in-beat and the wipe ----
    const motionSec = Math.max(0.1, expandDurationSec);
    const holdSec = Math.max(0, holdDurationSec);

    const tIn = motionSec; // zoomed + spread (all visible)
    const tWipe = tIn + motionSec; // wiped; one word left, centered, scale 1
    const tWord = tWipe + holdSec; // single-word hold ends
    const tReset = tWord + 0.4; // non-center rows back to home (hidden)
    const tReveal = tReset + motionSec * 0.7;
    const total = tReveal + Math.max(0.2, holdSec * 0.4);
    const n = (t: number) => t / total;

    const seq = (times: number[]) => ({
        duration: total,
        times,
        ease,
        repeat: Infinity,
    });

    const VISIBLE = "inset(0% 0% 0% 0%)";

    return (
        <div
            style={{
                width: "100%",
                height: "100%",
                backgroundColor,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                position: "relative",
                ...style,
            }}
        >
            {/* Zoom in during the spread; ease back to scale 1 during the wipe
                so the surviving word settles at normal size */}
            <motion.div
                animate={{ scale: [1, maxZoomScale, 1, 1] }}
                transition={seq([0, n(tIn), n(tWipe), 1])}
                style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: rowGap,
                    position: "relative",
                    willChange: "transform",
                }}
            >
                {rows.map((rowIndex) => {
                    const isCenterRow = rowIndex === centerRowIndex;
                    const distanceFromCenterY = rowIndex - centerRowIndex;
                    const direction = rowIndex % 2 === 0 ? 1 : -1;

                    const speedMultiplier =
                        0.7 + (Math.abs(distanceFromCenterY) % 3) * 0.45;
                    const driftFull =
                        direction * horizontalShiftPx * speedMultiplier;
                    const driftHome = driftFull * HOME_FACTOR;

                    const wipeLTR = rowIndex % 2 === 0;
                    const hidden = wipeLTR
                        ? "inset(0% 0% 0% 100%)"
                        : "inset(0% 100% 0% 0%)";

                    // Center row: home → spread → center (during wipe) → hold
                    // centered → back to home. Others: home → spread → hold →
                    // back to home (hidden), never touching 0.
                    const xAnim = isCenterRow
                        ? {
                              values: [
                                  driftHome, driftFull, 0, 0, driftHome, driftHome,
                              ],
                              times: [0, n(tIn), n(tWipe), n(tReset), n(tReveal), 1],
                          }
                        : {
                              values: [
                                  driftHome, driftFull, driftFull, driftHome, driftHome,
                              ],
                              times: [0, n(tIn), n(tWord), n(tReset), 1],
                          };

                    return (
                        <motion.div
                            key={rowIndex}
                            animate={{ x: xAnim.values }}
                            transition={seq(xAnim.times)}
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                gap: wordGap,
                                whiteSpace: "nowrap",
                                willChange: "transform",
                            }}
                        >
                            {words.map((wordIndex) => {
                                const isCenterWord =
                                    isCenterRow && wordIndex === centerWordIndex;

                                // The one word that survives — never wiped
                                if (isCenterWord) {
                                    return (
                                        <span
                                            key={wordIndex}
                                            style={{
                                                color: textColor,
                                                lineHeight: 1,
                                                display: "inline-block",
                                                clipPath: VISIBLE,
                                                ...fontStyles,
                                            }}
                                        >
                                            {text}
                                        </span>
                                    );
                                }

                                const denom = Math.max(1, safeRepeatCount - 1);
                                const sweepT = wipeLTR
                                    ? wordIndex / denom
                                    : (safeRepeatCount - 1 - wordIndex) / denom;

                                const wipeWindow = tWipe - tIn;
                                const perWipe = wipeWindow * 0.5;
                                const wStartOut =
                                    tIn + sweepT * (wipeWindow - perWipe);
                                const wEndOut = wStartOut + perWipe;

                                const revealWindow = tReveal - tReset;
                                const perReveal = revealWindow * 0.5;
                                const wStartIn =
                                    tReset + sweepT * (revealWindow - perReveal);
                                const wEndIn = wStartIn + perReveal;

                                return (
                                    <motion.span
                                        key={wordIndex}
                                        animate={{
                                            clipPath: [
                                                VISIBLE, VISIBLE, hidden, hidden, VISIBLE, VISIBLE,
                                            ],
                                        }}
                                        transition={seq([
                                            0, n(wStartOut), n(wEndOut), n(wStartIn), n(wEndIn), 1,
                                        ])}
                                        style={{
                                            color: textColor,
                                            lineHeight: 1,
                                            display: "inline-block",
                                            clipPath: VISIBLE,
                                            willChange: "clip-path",
                                            ...fontStyles,
                                        }}
                                    >
                                        {text}
                                    </motion.span>
                                );
                            })}
                        </motion.div>
                    );
                })}
            </motion.div>
        </div>
    );
}

// Scramble Text — Originkit
// Originkit — props baked into the default export.
"use client"

import { useState, useEffect, useRef, useLayoutEffect, Fragment } from "react"

const GLITCH_CHARS_UPPER = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const GLITCH_CHARS_LOWER = "abcdefghijklmnopqrstuvwxyz"
const WAVE_CURSOR_CHARS = "░▒▓█"

function cubicBezier(x1: number, y1: number, x2: number, y2: number) {
    const cx = 3 * x1
    const bx = 3 * (x2 - x1) - cx
    const ax = 1 - cx - bx
    const cy = 3 * y1
    const by = 3 * (y2 - y1) - cy
    const ay = 1 - cy - by
    const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t
    const sampleY = (t: number) => ((ay * t + by) * t + cy) * t
    const sampleDX = (t: number) => (3 * ax * t + 2 * bx) * t + cx
    return (x: number) => {
        let t = x
        for (let i = 0; i < 8; i++) {
            const dx = sampleX(t) - x
            const d = sampleDX(t)
            if (Math.abs(dx) < 1e-6) break
            if (d === 0) break
            t -= dx / d
        }
        return sampleY(Math.max(0, Math.min(1, t)))
    }
}

function makeEaseFn(ease: any): (t: number) => number {
    if (Array.isArray(ease) && ease.length === 4)
        return cubicBezier(ease[0], ease[1], ease[2], ease[3])
    switch (ease) {
        case "linear": return (t) => t
        case "easeIn": return (t) => t * t
        case "easeOut": return (t) => 1 - (1 - t) * (1 - t)
        case "easeInOut":
            return (t) => (t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t))
        default:
            return (t) => 1 - (1 - t) * (1 - t)
    }
}

type EnterMode = "none" | "oneLine" | "multiLine" | "random"
type HoverMode =
    | "none"
    | "diffusionOneLine"
    | "diffusionMultiLine"
    | "waveOneLine"
    | "waveMultiLine"
type CharState = { char: string; locked: boolean; flickering: boolean }
type WordEntry = { text: string; gap: string; pi: number; wiInPara: number; globalWi: number }
type CharInfo = { id: string; cx: number; lineTop: number }

/**
 * @framerSupportedLayoutWidth fixed
 * @framerSupportedLayoutHeight fixed
 * @framerIntrinsicWidth 1020
 * @framerIntrinsicHeight 240
 */
function __OriginkitBase_GlitchCharReveal(props: any) {
    props = { ...COMPONENT_DEFAULTS, ...props }
    const { words, enterAnimation, hoverAnimation, color, font, tag } = props
    const Tag = (tag ?? "p") as any
    const glitchColor = color

    // ── Enter props ──────────────────────────────────────────────────────
    const enterMode: EnterMode = enterAnimation?.mode ?? "oneLine"
    const enterEase: any = enterAnimation?.ease ?? { type: "tween", duration: 2, ease: "easeOut" }
    const enterDuration: number = enterEase?.duration ?? 2
    const enterEaseCurve: any = enterEase?.ease ?? "easeOut"
    const enterScrambleIntensity: number = enterAnimation?.scrambleIntensity ?? 50
    const enterReplay: boolean = enterAnimation?.replay ?? false
    const enterPosition: string = enterAnimation?.position ?? "above"
    const enterRestState: string = enterAnimation?.restState ?? "solid"
    const enterFlickerEnabled: boolean = enterAnimation?.flickerEnabled ?? false
    const enterFlickerColor: string = enterAnimation?.flickerColor ?? "#ff4400"
    const enterFlickerIntensity: number = enterAnimation?.flickerIntensity ?? 50
    const enterFlickerSpeed: number = enterAnimation?.flickerSpeed ?? 10

    // ── Hover props ──────────────────────────────────────────────────────
    const hoverType: string = hoverAnimation?.type ?? "none"
    const hoverLines: string = hoverAnimation?.lines ?? "oneLine"
    const hoverMode: HoverMode =
        hoverType === "diffusion"
            ? hoverLines === "oneLine" ? "diffusionOneLine" : "diffusionMultiLine"
            : hoverType === "wave"
              ? hoverLines === "oneLine" ? "waveOneLine" : "waveMultiLine"
              : "none"

    const hoverRadius: number = hoverAnimation?.radius ?? 2
    const hoverCollapse: boolean = hoverAnimation?.collapse ?? false
    const hoverCollapseTime: number = hoverAnimation?.collapseTime ?? 1
    const hoverGlitchChars: string = hoverAnimation?.glitchChars ?? "abcdefghijklmnopqrstuvwxyz"
    const hoverGlitchShuffle: boolean = hoverAnimation?.glitchShuffle ?? true
    const hoverFlickerEnabled: boolean = hoverAnimation?.flickerEnabled ?? false
    const hoverFlickerColor: string = hoverAnimation?.flickerColor ?? "#ff4400"
    const hoverFlickerIntensity: number = hoverAnimation?.flickerIntensity ?? 50
    const hoverFlickerSpeed: number = hoverAnimation?.flickerSpeed ?? 10
    const waveEase: any = hoverAnimation?.waveEase ?? { type: "tween", duration: 1.5, ease: "linear" }
    const waveDuration: number = waveEase?.duration ?? 1.5
    const waveEaseCurve: any = waveEase?.ease ?? "linear"
    const waveShuffleLimitEnabled: boolean = hoverAnimation?.waveShuffleLimitEnabled ?? false
    const waveShuffleLimitValue: number = hoverAnimation?.waveShuffleLimitValue ?? 10

    // ── Font ─────────────────────────────────────────────────────────────
    const typeface = font
    const textAlign: string = (typeface as any)?.textAlign ?? "left"
    const spanStyle = typeface
        ? Object.fromEntries(Object.entries(typeface).filter(([k]) => k !== "textAlign"))
        : {}

    // Split into words while preserving the exact whitespace run that precedes
    // each word (gap). Spaces are kept verbatim — rendered, counted in layout,
    // but never scrambled or hovered.
    const paragraphs: { text: string; gap: string }[][] = (words as string)
        .split("\n")
        .map((line) => {
            const tokens = line.match(/\s+|\S+/g) ?? []
            const out: { text: string; gap: string }[] = []
            let pendingGap = ""
            for (const tok of tokens) {
                if (/^\s+$/.test(tok)) pendingGap += tok
                else { out.push({ text: tok, gap: pendingGap }); pendingGap = "" }
            }
            return out
        })
        .filter((p) => p.length > 0)

    const allWords: WordEntry[] = []
    paragraphs.forEach((paraWords, pi) => {
        paraWords.forEach(({ text, gap }, wiInPara) => {
            allWords.push({ text, gap, pi, wiInPara, globalWi: allWords.length })
        })
    })

    // ── Refs ─────────────────────────────────────────────────────────────
    const containerRef = useRef<HTMLDivElement | null>(null)
    const ghostRefs = useRef<(HTMLSpanElement | null)[]>([])
    const charRefs = useRef<Record<string, HTMLSpanElement | null>>({})

    const hoverModeRef = useRef(hoverMode)
    const hoverRadiusRef = useRef(hoverRadius)
    // ...remaining hover-prop refs mirrored the same way (omitted here for
    // length; each prop above gets a matching useRef + a useEffect syncing
    // it whenever the prop changes, so the mouse-move handler below always
    // reads current values without re-subscribing).

    // ── State ────────────────────────────────────────────────────────────
    const [lineGroups, setLineGroups] = useState<number[][]>([])
    const [displays, setDisplays] = useState<Record<string, CharState>>({})
    const [placedChars, setPlacedChars] = useState<Record<number, number[]>>({})
    const [shouldAnimate, setShouldAnimate] = useState(false)
    const [enterAnimComplete, setEnterAnimComplete] = useState(false)
    const [hoverDisplays, setHoverDisplays] = useState<Record<string, string>>({})
    const [hoverFlickerSet, setHoverFlickerSet] = useState<Set<string>>(new Set())

    const hasPlayedRef = useRef(false)

    // ── Line detection: measures each word's ghost span to group words into
    // visual lines (needed because "oneLine" mode reveals line by line) ────
    const detectLines = () => {
        const allLines: number[][] = []
        paragraphs.forEach((_, pi) => {
            const paraEntries = allWords.filter((w) => w.pi === pi)
            const measured = paraEntries
                .map((w) => ({
                    globalWi: w.globalWi,
                    top: ghostRefs.current[w.globalWi]
                        ? Math.round(ghostRefs.current[w.globalWi]!.getBoundingClientRect().top)
                        : -1,
                }))
                .filter((m) => m.top >= 0)
            const tops = [...new Set(measured.map((m) => m.top))].sort((a, b) => a - b)
            tops.forEach((top) =>
                allLines.push(measured.filter((m) => m.top === top).map((m) => m.globalWi))
            )
        })
        setLineGroups(allLines)
    }

    useLayoutEffect(() => { detectLines() }, [words, font])
    useEffect(() => {
        const el = containerRef.current
        if (!el) return
        const obs = new ResizeObserver(() => detectLines())
        obs.observe(el)
        return () => obs.disconnect()
    }, [])

    // ── IntersectionObserver — plays the enter animation once the
    // component's chosen anchor (above/middle/below) scrolls into view;
    // replay re-arms it on re-entry ──────────────────────────────────────
    useEffect(() => {
        if (enterMode === "none") return
        const el = containerRef.current
        if (!el) return
        let threshold = 0
        if (enterPosition === "middle") threshold = 0.5
        else if (enterPosition === "below") threshold = 1.0
        const obs = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    if (!hasPlayedRef.current) {
                        hasPlayedRef.current = true
                        setShouldAnimate(true)
                        if (!enterReplay) obs.disconnect()
                    }
                } else if (enterReplay) {
                    hasPlayedRef.current = false
                    setShouldAnimate(false)
                    setDisplays({})
                    setPlacedChars({})
                    setEnterAnimComplete(false)
                }
            },
            { threshold }
        )
        obs.observe(el)
        return () => obs.disconnect()
    }, [enterMode, lineGroups, enterReplay, enterPosition])

    // ── Enter animation: schedule every character's scramble→lock across a
    // fixed total duration, sequential (oneLine), per-line-parallel
    // (multiLine), or fully shuffled (random) ───────────────────────────
    useEffect(() => {
        if (enterMode === "none" || !shouldAnimate || lineGroups.length === 0) return
        let cancelled = false
        setDisplays({})
        setPlacedChars({})
        setEnterAnimComplete(false)

        const durationMs = enterDuration * 1000
        const sequentialSteps = Math.max(1, allWords.reduce((s, w) => s + w.text.length, 0))
        const animStart = performance.now()
        const animEndTime = animStart + durationMs
        const easeFn = makeEaseFn(enterEaseCurve)
        const targetAt = (step: number) => animStart + durationMs * easeFn(step / sequentialSteps)

        const nextGlitchChar = (char: string): string => {
            const isLower = char === char.toLowerCase() && char !== char.toUpperCase()
            const pool = isLower ? GLITCH_CHARS_LOWER : GLITCH_CHARS_UPPER
            return pool[Math.floor(Math.random() * pool.length)]
        }
        const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, Math.max(0, ms)))

        const animateChar = async (globalWi: number, ci: number, char: string, targetEnd: number) => {
            if (cancelled) return
            const id = `${globalWi}-${ci}`
            if (char === "." || char === " ") {
                setDisplays((p) => ({ ...p, [id]: { char, locked: true, flickering: false } }))
                await sleep(targetEnd - performance.now())
                return
            }
            const scrambleIntensity = Math.max(0, Math.min(100, enterScrambleIntensity))
            const desiredFrames = scrambleIntensity === 0 ? 0
                : 1 + Math.floor(Math.random() * Math.round(scrambleIntensity / 7))
            const window = targetEnd - performance.now()
            const minDelay = 15
            const maxFitFrames = Math.max(1, Math.floor((window * 0.8) / minDelay))
            const glitchFrames = Math.min(desiredFrames, maxFitFrames)
            const glitchDelay = glitchFrames > 0
                ? Math.max(minDelay, Math.floor((window * 0.8) / glitchFrames))
                : minDelay
            for (let i = 0; i < glitchFrames; i++) {
                if (cancelled) return
                setDisplays((p) => ({ ...p, [id]: { char: nextGlitchChar(char), locked: false, flickering: false } }))
                await sleep(glitchDelay)
                if (cancelled) return
            }
            setDisplays((p) => ({ ...p, [id]: { char, locked: true, flickering: false } }))
            await sleep(targetEnd - performance.now())
        }

        const run = async () => {
            if (enterMode === "oneLine") {
                let idx = 0
                for (const group of lineGroups)
                    for (const gWi of group) {
                        if (cancelled) return
                        const word = allWords[gWi].text
                        for (let ci = 0; ci < word.length; ci++) {
                            await animateChar(gWi, ci, word[ci], targetAt(++idx))
                        }
                    }
            }
            // multiLine / random modes follow the same per-character
            // animateChar call, just choosing a different traversal order
            // and per-group timing window (omitted here for length).
        }

        ;(async () => { await run(); if (!cancelled) setEnterAnimComplete(true) })()
        return () => { cancelled = true }
    }, [lineGroups, enterMode, enterScrambleIntensity, enterDuration, enterEaseCurve, shouldAnimate])

    // ── Hover: diffusion (radius of glitch chars around the cursor) and
    // wave (a single sweeping "cursor" of glitch chars per line) modes ───
    // (buildHoverDisplays / startLineWave / handleMouseMove implementations
    // omitted here for length — each line/word position is measured via
    // charRefs.getBoundingClientRect() on pointermove, then a radius or a
    // rAF-driven sweep picks which character ids get a random glitch char
    // in hoverDisplays for that frame.)

    const isInsertEnter = enterMode === "oneLine" || enterMode === "multiLine"

    return (
        <div
            ref={containerRef}
            style={{
                width: "100%", height: "100%", position: "relative",
                display: "flex", flexDirection: "column", justifyContent: "center",
                gap: "0.1em", background: "transparent", overflow: "hidden",
            }}
        >
            {paragraphs.map((_, pi) => {
                const paraEntries = allWords.filter((w) => w.pi === pi)
                return (
                    <Tag key={pi} style={{ position: "relative", width: "100%", margin: 0, padding: 0 }}>
                        {/* Hidden ghost copy — measures line breaks without being seen */}
                        <div style={{ position: "absolute", top: 0, left: 0, width: "100%", visibility: "hidden", pointerEvents: "none", textAlign: textAlign as any }}>
                            {paraEntries.map((wordEntry) => (
                                <Fragment key={wordEntry.globalWi}>
                                    {wordEntry.gap && <span style={{ ...spanStyle, letterSpacing: "0.05em", whiteSpace: "pre" }}>{wordEntry.gap}</span>}
                                    <span ref={(el) => { ghostRefs.current[wordEntry.globalWi] = el }} style={{ ...spanStyle, letterSpacing: "0.05em", display: "inline-block", whiteSpace: "nowrap" }}>{wordEntry.text}</span>
                                </Fragment>
                            ))}
                        </div>

                        <div style={{ width: "100%", textAlign: textAlign as any }}>
                            {paraEntries.map((wordEntry) => (
                                <Fragment key={wordEntry.globalWi}>
                                    {wordEntry.gap && <span style={{ ...spanStyle, letterSpacing: "0.05em", color, whiteSpace: "pre" }}>{wordEntry.gap}</span>}
                                    <span style={{ display: "inline-block", whiteSpace: "nowrap" }}>
                                        {wordEntry.text.split("").map((char, ci) => {
                                            const id = `${wordEntry.globalWi}-${ci}`
                                            const hoverChar = hoverDisplays[id]
                                            const enterState = displays[id]
                                            const isHF = hoverFlickerSet.has(id)
                                            let displayChar = char, charColor = color

                                            if (hoverChar !== undefined) {
                                                displayChar = hoverChar
                                                charColor = isHF && hoverFlickerEnabled ? hoverFlickerColor : glitchColor
                                            } else if (isHF && hoverFlickerEnabled) {
                                                charColor = hoverFlickerColor
                                            } else if (enterMode !== "none") {
                                                if (!enterState) {
                                                    charColor = !shouldAnimate && enterRestState === "solid" ? color : "transparent"
                                                } else {
                                                    displayChar = enterState.char
                                                    charColor = enterState.flickering
                                                        ? (enterFlickerEnabled ? enterFlickerColor : color)
                                                        : (enterState.locked ? color : glitchColor)
                                                }
                                            }

                                            const hideChar = isInsertEnter && shouldAnimate && !enterAnimComplete && !enterState && hoverChar === undefined

                                            return (
                                                <span key={ci} ref={(el) => { charRefs.current[id] = el }}
                                                    style={{ ...spanStyle, letterSpacing: "0.05em", color: charColor, display: hideChar ? "none" : undefined }}>
                                                    {displayChar}
                                                </span>
                                            )
                                        })}
                                    </span>
                                </Fragment>
                            ))}
                        </div>
                    </Tag>
                )
            })}
        </div>
    )
}

const COMPONENT_DEFAULTS = {
    words: "Scramble Text",
    enterAnimation: {
        mode: "oneLine", restState: "solid", replay: true, position: "above",
        scrambleIntensity: 100, ease: { type: "tween", duration: 2, ease: "linear" },
        flickerEnabled: true, flickerColor: "#333333", flickerIntensity: 84, flickerSpeed: 10,
    },
    hoverAnimation: {
        type: "diffusion", lines: "oneLine", radius: 2, collapse: false, collapseTime: 1,
        glitchChars: "abcdefghijklmnopqrstuvwxyz", glitchShuffle: true,
        flickerEnabled: false, flickerColor: "#ff4400", flickerIntensity: 50, flickerSpeed: 10,
        waveEase: { type: "tween", duration: 1.5, ease: "linear" },
        waveShuffleLimitEnabled: false, waveShuffleLimitValue: 10,
    },
    color: "#ffffff",
    font: { fontFamily: "Inter", variant: "Bold", fontSize: 120, lineHeight: "1em", letterSpacing: "2em" },
    tag: "p",
}

export default function GlitchCharReveal(props: Record<string, unknown>) {
  return <__OriginkitBase_GlitchCharReveal {...props} />
}