import { useEffect, useRef, useState } from "react"; // ───────────────────────────────────────────────────────────────────────────── // StudioShowcase — the homepage's living art piece. A self-running reel that // demonstrates the product's OWN range: kinetic type, documentary lower-thirds, // Arabic RTL aurora titles, animated data, glassmorphism, 3D space and neural // agent viz — each with its own palette, font and background. Pure CSS/SVG, so // it always renders (no headless player, no fonts-required fallbacks break it). // ───────────────────────────────────────────────────────────────────────────── // shared list, also used by the homepage marquee export const STYLE_NAMES = [ "Kinetic Type", "Lower-Thirds", "Glassmorphism", "Aurora", "Neural Nets", "3D Space", "Atlas Maps", "Data Viz", "Sketchbook", "Logo Intros", "Documentary", "Counters", "Waveforms", "Comic", "Chalkboard", "Spotlight", "Glitch", "Reveal", ]; const GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")"; export const SHOWCASE_CSS = ` @keyframes mg-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } } @keyframes mg-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes mg-rise-sm { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } } @keyframes mg-pop { 0% { opacity: 0; transform: scale(.7); } 62% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes mg-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes mg-sweep-v { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes mg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes mg-float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(12px,-20px); } } @keyframes mg-grid { from { background-position: 0 0; } to { background-position: 0 42px; } } @keyframes mg-aurora { 0% { transform: translate(-9%,0) rotate(-7deg); } 50% { transform: translate(9%,5%) rotate(-2deg); } 100% { transform: translate(-9%,0) rotate(-7deg); } } @keyframes mg-draw { to { stroke-dashoffset: 0; } } @keyframes mg-pulse { 0%,100% { opacity: .35; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.35); } } @keyframes mg-spin3d { from { transform: rotateY(-26deg) rotateX(6deg); } to { transform: rotateY(26deg) rotateX(-6deg); } } @keyframes mg-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } @keyframes mg-mesh { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(4%,-3%) scale(1.08); } 66% { transform: translate(-3%,4%) scale(1.05); } 100% { transform: translate(0,0) scale(1); } } @keyframes mg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes mg-word-in { from { opacity: 0; transform: translateY(16px) rotate(-2deg); } to { opacity: 1; transform: none; } } @keyframes mg-word-out{ to { opacity: 0; transform: translateY(-12px); } } @keyframes mg-ring { to { stroke-dashoffset: 0; } } @keyframes mg-scan { from { transform: translateY(-100%); } to { transform: translateY(220%); } } `; // ── Scene 1 · Kinetic typography ──────────────────────────────────────────── function KineticScene() { return (
{["STORIES", "IN", "MOTION"].map((w, i) => (
{w}
))}
); } // ── Scene 2 · Documentary lower-third ─────────────────────────────────────── function DocScene() { return (
REC 00:00:14:09
Dr. Lina Haddad
Marine Biologist · Red Sea
); } // ── Scene 3 · Arabic · Aurora · RTL ───────────────────────────────────────── function ArabicScene() { return (
إبداع بصري
بلا حدود
); } // ── Scene 4 · Animated data / counter ─────────────────────────────────────── function CounterScene() { const [n, setN] = useState(0); useEffect(() => { let raf = 0; const t0 = performance.now(); const tick = (t: number) => { const p = Math.min(1, (t - t0) / 1500); const e = 1 - Math.pow(1 - p, 3); setN(Math.round(e * 340)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); return (
+{n}%
year-over-year growth
Q4 2026·record quarter
); } // ── Scene 5 · Glassmorphism ───────────────────────────────────────────────── function GlassScene() { return (
Designed to move
premium motion, on demand
{["Reels", "Promos", "Launches"].map((t, i) => ( {t} ))}
); } // ── Scene 6 · 3D space ────────────────────────────────────────────────────── function ThreeDScene() { return (
2026
the year in motion
); } // ── Scene 7 · Arabic statement (RTL) — a second, distinct bilingual showcase ─ function ArabicStatement() { return (
بلغتك، وبكل إتقان
قصتك تتحرّك
كما تستحق
); } const SCENES = [ { key: "kinetic", tag: "Kinetic typography", Comp: KineticScene }, { key: "doc", tag: "Documentary · lower-third", Comp: DocScene }, { key: "ar", tag: "العربية · Aurora · RTL", Comp: ArabicScene }, { key: "count", tag: "Animated data", Comp: CounterScene }, { key: "glass", tag: "Glassmorphism", Comp: GlassScene }, { key: "3d", tag: "3D space", Comp: ThreeDScene }, { key: "arstmt", tag: "العربية · Statement · RTL", Comp: ArabicStatement }, ]; export function StudioShowcase({ withStyle = true }: { withStyle?: boolean }) { const [idx, setIdx] = useState(0); const prev = useRef(0); useEffect(() => { const t = setInterval(() => setIdx((i) => { prev.current = i; return (i + 1) % SCENES.length; }), 4000); return () => clearInterval(t); }, []); const Cur = SCENES[idx].Comp; const Prev = SCENES[prev.current].Comp; return (
{withStyle && } {prev.current !== idx &&
}
{/* film grain + scanline for cinematic texture */}
{/* technique label */}
{SCENES[idx].tag}
{/* progress dots */}
{SCENES.map((s, i) => ( ))}
); }