frontend/scripts/02_boot_animation.sh

#!/usr/bin/env bash
set -Eeuo pipefail

ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
cd "$ROOT"

mkdir -p app/components
mkdir -p public/assets

cat > app/components/BootAnimation.jsx <<'EOC'
"use client";

import { useEffect, useState } from "react";

export default function BootAnimation({ onComplete }) {
  const [hide, setHide] = useState(false);

  useEffect(() => {
    const t1 = setTimeout(() => setHide(true), 3200);
    const t2 = setTimeout(() => onComplete?.(), 3800);
    return () => {
      clearTimeout(t1);
      clearTimeout(t2);
    };
  }, [onComplete]);

  return (
    <div className={`boot-screen ${hide ? "boot-hide" : ""}`}>
      <div className="boot-center">
        <img
          src="/assets/dolor3v-logo.png"
          className="boot-logo"
          alt="DOLOR3V"
        />

        <h1>DOLOR3V</h1>

        <p>AI Workspace</p>

        <div className="boot-loader">
          <span />
        </div>
      </div>
    </div>
  );
}
EOC

if ! grep -q "boot-screen" app/globals.css; then

cat >> app/globals.css <<'EOC'

.boot-screen{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:#020617;
z-index:999999;
transition:.6s;
}

.boot-hide{
opacity:0;
pointer-events:none;
}

.boot-center{
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
}

.boot-logo{
width:140px;
height:140px;
animation:bootPulse 2s infinite;
}

.boot-loader{
width:240px;
height:4px;
background:#1e293b;
overflow:hidden;
border-radius:999px;
}

.boot-loader span{
display:block;
height:100%;
width:40%;
background:#38bdf8;
animation:bootLoad 2.4s infinite;
}

@keyframes bootLoad{
0%{transform:translateX(-120%)}
100%{transform:translateX(350%)}
}

@keyframes bootPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.08)}
}
EOC

fi

echo "Boot animation installed."