/*
BREATHTONE VIDEOS
INITIALIZING // BREATHTONE NODE...
*/
// === src/main.jsx ===
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
);
// === src/index.css (Tailwind assumed installed) ===
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Global cyberpunk accents */
:root { --neon: #7cff7c; }
body { background:#000; color:#cfcfcf; }
.glow { text-shadow: 0 0 8px rgba(124,255,124,.7), 0 0 18px rgba(124,255,124,.35); }
.scanlines::after{
content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
background: repeating-linear-gradient( to bottom, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 2px, transparent 3px );
}
// === src/App.jsx ===
import { useMemo, useState } from "react";
import { motion } from "framer-motion";
const videos = [
{ id: "qg77sfoLwNs", category: "Industrial", title: "Node 01" },
{ id: "HbL2y24nCD4", category: "Industrial", title: "Node 02" },
{ id: "xa-vjIW73yc", category: "Experimental", title: "Node 03" }
];
export default function App() {
const [filter, setFilter] = useState("All");
const [active, setActive] = useState(null);
const filtered = useMemo(() => (
filter === "All" ? videos : videos.filter(v => v.category === filter)
), [filter]);
return (
{/* NAV */}
{/* HERO */}
BREATHTONE
— EXHALING VISUALS —
ENTER THE VAULT ↓
{/* GRID */}
{filtered.map(v => (
setActive(v)}
className="cursor-pointer border border-gray-800 hover:border-green-400 transition bg-black/40">
{v.title}
))}
{/* MODAL PLAYER */}
{active && (
{active.title}
)}
{/* AUDIO */}
{/* FOOTER */}