{lang === 'he' ? 'בחרי חוויה' : 'Choose your experience'}
{items.map(it => (
))}
);
}
function Splash({ onFinish, lang }) {
const videoRef = useRef(null);
const audioRef = useRef(null);
const [fading, setFading] = React.useState(false);
// Pick the mobile-friendly opener when the viewport is narrow.
// Evaluated once on mount so a rotation mid-splash doesn't swap sources.
const [isMobile] = React.useState(() =>
typeof window !== 'undefined' && window.matchMedia('(max-width: 760px)').matches
);
const videoSrc = isMobile ? 'assets/mobileopening.mp4' : 'assets/3d coverlogo.mp4';
const finish = () => {
if (fading) return;
// Soft-fade the music alongside the visual fade so it doesn't snap off
const a = audioRef.current;
if (a && !a.paused) {
const startVol = a.volume;
const steps = 12;
let i = 0;
const t = setInterval(() => {
i++;
a.volume = Math.max(0, startVol * (1 - i / steps));
if (i >= steps) { clearInterval(t); a.pause(); }
}, 40);
}
setFading(true);
setTimeout(onFinish, 550);
};
useEffect(() => {
const v = videoRef.current;
if (v) v.play().catch(() => {});
const a = audioRef.current;
if (a) {
a.volume = 0.7;
// Browser autoplay policy may block unmuted audio without a user gesture.
// If it does, the .catch keeps the splash working (just silent for that visit).
a.play().catch(() => {});
}
// Safety: auto-advance after 8s in case video fails to fire 'ended'
const safety = setTimeout(finish, 8000);
return () => clearTimeout(safety);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
{/* Reveal-music scored to the unveiling — fades out with the visual */}
{lang === 'he' ? (
<>באתר הזה יש 4 סגנונות שונים. פשוט גללי, והאתר ישתנה לפניך.
) : (
<>This site has 4 different styles. Just keep scrolling, and the site will transform as you go.
)}
{lang === 'he' ? 'ראית את כל ארבעת העולמות!' : "You've experienced all 4 worlds!"}
{lang === 'he' ? (
<>תוכלי לחזור ולחקור כל סגנון דרך תפריט "בחרי סגנון"או שנתחיל לבנות את העולם היצירתי שלך.
) : (
<>You can now revisit all styles through the "Choose a style" menu OR we can start building your own creative world.
)}
);
}
function DemoChip({ lang, step, total, currentStyle, onSkip, onTakeTour }) {
const L = STYLE_LABELS[lang] || STYLE_LABELS.en;
return (
{STYLE_CYCLE.map((s, i) => (
))}
{lang === 'he' ? `מציגה כעת · ${step + 1} מתוך ${total}` : `Now showing · ${step + 1} of ${total}`}
{L[currentStyle]} design
{lang === 'he' ? `אתה רואה את האתר במצב ${L[currentStyle]}` : `You're viewing this in ${L[currentStyle]}`}
{lang === 'he' ? 'אותו תוכן, מצב רוח אחר' : 'Same content, different mood'}
);
}
function MorphChip({ lang, currentStyle, seenStyles, onMorph, onContact }) {
const [scrolled, setScrolled] = React.useState(false);
const [pulse, setPulse] = React.useState(false);
useEffect(() => {
function onScroll() { setScrolled(window.scrollY > 600); }
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
// Pulse the chip briefly each time the current style changes
useEffect(() => {
setPulse(true);
const t = setTimeout(() => setPulse(false), 1200);
return () => clearTimeout(t);
}, [currentStyle]);
const cycle = ['glass', 'organic', 'water', 'editorial'];
const labels = {
glass: lang === 'he' ? 'זכוכית' : 'Liquid Glass',
organic: lang === 'he' ? 'טרופי' : 'Tropical',
water: lang === 'he' ? 'בועות' : 'Bubbles',
editorial: lang === 'he' ? 'עיתון' : 'Editorial',
};
const allSeen = cycle.every((s) => seenStyles.includes(s));
const next = (() => {
if (allSeen) return null;
const idx = cycle.indexOf(currentStyle);
for (let i = 1; i <= cycle.length; i++) {
const cand = cycle[(idx + i) % cycle.length];
if (!seenStyles.includes(cand)) return cand;
}
return null;
})();
if (!scrolled) return null;
if (allSeen) {
return (
);
}
return (
);
}
function App() {
// Splash plays on every page load
const [stage, setStage] = useState('splash'); // splash | intro | picker | site
const [style, setStyle] = useState(null); // glass | organic | water | editorial
const [seenStyles, setSeenStyles] = useState([]);
const [tourMode, setTourMode] = useState(false);
const [demoActive, setDemoActive] = useState(false);
const [demoStep, setDemoStep] = useState(0);
const [welcomeNotice, setWelcomeNotice] = useState(false);
const [noticeShown, setNoticeShown] = useState(false);
const [endNotice, setEndNotice] = useState(false);
const [lang, setLang] = useState('en');
const [activeSec, setActiveSec] = useState('home');
const [showPicker, setShowPicker] = useState(false);
const [scrolled, setScrolled] = useState(false);
const [showBackToTop, setShowBackToTop] = useState(false);
const cursorRef = useRef(null);
// Back-to-top button visibility — fires after visitor scrolls past ~1.5 viewport heights
useEffect(() => {
if (stage !== 'site') return;
function onScroll() {
setShowBackToTop(window.scrollY > window.innerHeight * 1.2);
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, [stage]);
function finishSplash() {
// Skip the welcome page — go straight to the site in Liquid Glass.
// The welcome notice will appear later, when the visitor reaches About.
setStyle('glass');
setStage('site');
setDemoStep(0);
}
function dismissWelcomeNotice() {
setWelcomeNotice(false);
setDemoActive(true); // kick off the scroll-based demo once visitor clicks "Let's continue"
}
function stopDemo() {
setDemoActive(false);
}
const copy = window.COPY[lang];
// Apply document attrs
useEffect(() => {
document.documentElement.dir = copy.dir;
document.body.setAttribute('dir', copy.dir);
document.documentElement.lang = lang;
}, [lang, copy.dir]);
useEffect(() => {
if (style) {
document.body.setAttribute('data-style', style);
setSeenStyles((prev) => prev.includes(style) ? prev : [...prev, style]);
} else {
document.body.removeAttribute('data-style');
}
}, [style]);
// Morph to a new style with an elegant cross-fade + blur,
// keeping the visitor at the same scroll position they were viewing.
function morphToStyle(nextStyle) {
if (!style || nextStyle === style) return;
const shell = document.querySelector('.app-shell');
const targetSec = activeSec;
const sectionEl = document.getElementById(targetSec);
const sectionTop = sectionEl ? sectionEl.offsetTop : 0;
const offsetWithinSection = window.scrollY - sectionTop;
// Tropical (organic) gets a longer, more atmospheric transition
const isOrganic = nextStyle === 'organic';
const fadeDelay = isOrganic ? 480 : 280;
if (shell) {
shell.classList.add('style-morphing');
if (isOrganic) shell.classList.add('style-morphing--organic');
}
setTimeout(() => {
setStyle(nextStyle);
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const newSectionEl = document.getElementById(targetSec);
const newSectionTop = newSectionEl ? newSectionEl.offsetTop : 0;
const restoredY = newSectionTop + offsetWithinSection;
window.scrollTo({ top: restoredY, behavior: 'auto' });
setTimeout(() => {
if (shell) {
shell.classList.remove('style-morphing');
shell.classList.remove('style-morphing--organic');
}
}, isOrganic ? 400 : 200);
});
});
}, fadeDelay);
}
// Cursor blob (only when site is active)
useEffect(() => {
if (stage !== 'site') return;
let raf;
let tx = window.innerWidth / 2, ty = window.innerHeight / 2;
let cx = tx, cy = ty;
function onMove(e) { tx = e.clientX; ty = e.clientY; }
function loop() {
cx += (tx - cx) * 0.12;
cy += (ty - cy) * 0.12;
if (cursorRef.current) {
cursorRef.current.style.transform = `translate(${cx}px, ${cy}px) translate(-50%,-50%)`;
}
raf = requestAnimationFrame(loop);
}
window.addEventListener('mousemove', onMove);
loop();
return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
}, [stage]);
// Welcome notice — pops up ONLY when in Liquid Glass and visitor reaches
// the About section for the first time. Stays until the visitor clicks
// "Let's continue" — then the scroll-based demo morphs begin.
useEffect(() => {
if (stage !== 'site') return;
if (noticeShown) return;
if (style !== 'glass') return; // notice only shows during Liquid Glass
if (activeSec !== 'about') return;
setWelcomeNotice(true);
setNoticeShown(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeSec, stage, noticeShown, style]);
// Scroll-based demo — each section gets its own style; morph only happens
// when entering a new section (not in the middle), so it's never confusing.
// Mapping: Home/About = Glass, Services = Tropical, Works = Bubbles, Contact = Editorial.
useEffect(() => {
if (!demoActive) return;
if (stage !== 'site') return;
const SECTION_TO_STYLE = {
home: 'glass',
about: 'glass',
services: 'organic',
works: 'water',
contact: 'editorial',
};
const targetStyle = SECTION_TO_STYLE[activeSec];
if (!targetStyle) return;
if (targetStyle === style) return;
morphToStyle(targetStyle);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeSec, demoActive, stage, style]);
// End-of-journey trigger — once Editorial is active, watch for the visitor
// to stop scrolling. The notice pops 2 seconds after their last scroll.
// Each scroll event resets the timer, so they can browse freely.
useEffect(() => {
if (!demoActive) return;
if (stage !== 'site') return;
if (style !== 'editorial') return;
let timer = null;
function scheduleNotice() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
setDemoActive(false);
setEndNotice(true);
}, 1000); // 1s of scroll-idle in editorial → notice
}
window.addEventListener('scroll', scheduleNotice, { passive: true });
// Start the timer as soon as editorial activates, so the notice still
// arrives even if the visitor doesn't scroll further.
scheduleNotice();
return () => {
if (timer) clearTimeout(timer);
window.removeEventListener('scroll', scheduleNotice);
};
}, [demoActive, stage, style]);
// Derive the demo step from the current style for the floating chip
const demoStepDerived = ['glass', 'organic', 'water', 'editorial'].indexOf(style);
// Scrollspy + topbar-scrolled state
useEffect(() => {
if (stage !== 'site') return;
const ids = ['home','about','services','works','contact'];
function onScroll() {
const y = window.scrollY + window.innerHeight * 0.4;
let cur = ids[0];
for (const id of ids) {
const el = document.getElementById(id);
if (el && el.offsetTop <= y) cur = id;
}
setActiveSec(cur);
setScrolled(window.scrollY > 40);
}
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, [stage]);
function jumpTo(id) {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function pickStyle(s) {
setStyle(s);
setStage('site');
setShowPicker(false);
setTourMode(false); // a manual pick from the homepage is not a tour
setDemoActive(false); // stop auto-cycle if user manually picks
// smooth scroll back to top
window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
}
function startTour() {
setSeenStyles([]);
setTourMode(true);
setStyle('glass');
setStage('site');
setShowPicker(false);
window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
}
return (
<>
{/* Background per style */}
{stage === 'site' && style && }
{/* Cursor blob */}
{stage === 'site' && }
{/* Top bar (always present once site is up) */}
{stage === 'site' && (
{
// Replay the full intro from the logo unveiling
setStyle(null);
setStage('splash');
setNoticeShown(false);
setDemoActive(false);
setDemoStep(0);
setSeenStyles([]);
setTourMode(false);
window.scrollTo(0, 0);
}}
role="link"
aria-label="Back to homepage"
style={{ cursor: 'pointer' }}
>
{tourMode && }
{
// Capture exact scroll position relative to the current section
const targetSec = activeSec;
const sectionEl = document.getElementById(targetSec);
const sectionTop = sectionEl ? sectionEl.offsetTop : 0;
const offsetWithinSection = window.scrollY - sectionTop;
setStyle(s);
setDemoActive(false); // manual style change interrupts demo
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const newSectionEl = document.getElementById(targetSec);
const newSectionTop = newSectionEl ? newSectionEl.offsetTop : 0;
window.scrollTo({ top: newSectionTop + offsetWithinSection, behavior: 'auto' });
});
});
}}
onOpenFull={() => {
// Replay the full intro: 3D logo unveiling splash → site in Glass
// → welcome notice → auto-cycle demo. Reset all related state.
setStyle(null);
setStage('splash');
setNoticeShown(false);
setDemoActive(false);
setDemoStep(0);
setSeenStyles([]);
setTourMode(false);
window.scrollTo(0, 0);
}}
/>
)}
{/* Stage nav */}
{stage === 'site' && (
)}
{/* Morph chip (Option C — disabled while testing Option A)
{stage === 'site' && style && (
jumpTo('contact')}
/>
)}
*/}
{/* Skip link — keyboard-only users jump past the topbar to main content */}
{stage === 'site' && (
{lang === 'he' ? 'דלגי לתוכן' : 'Skip to content'}
)}
{/* Back-to-top button — appears after scrolling past ~1.2 viewports */}
{stage === 'site' && (
)}
{/* Site sections */}
{stage === 'site' && style && (
jumpTo(id)} />
)}
{/* Welcome notice — shown once on About in Liquid Glass; dismissed by button */}
{stage === 'site' && style && welcomeNotice && (
)}
{/* End-of-demo notice — Michal's signature message after cycle completes */}
{stage === 'site' && style && endNotice && (
setEndNotice(false)}
onContact={() => { setEndNotice(false); jumpTo('contact'); }}
/>
)}
{/* Demo cycle chip removed — the scroll-based morphs speak for themselves */}
{/* Tour walkthrough — appears once visitor reaches Services and onward */}
{stage === 'site' && style && tourMode &&
(activeSec === 'services' || activeSec === 'works' || activeSec === 'contact') && (
jumpTo('contact')}
onExit={() => setTourMode(false)}
/>
)}
{/* Full-screen style picker (in-site overlay, opened from style dropdown) */}
{showPicker && (
setShowPicker(false)}
/>
)}
{/* Splash — 3D logo unveiling on first visit */}
{stage === 'splash' && (
)}
{/* Landing screen — logo + slogan + 3 style cards */}
{stage === 'intro' && (
)}
{/* Tweaks panel */}
{stage === 'site' && style && (
setShowPicker(true)}
/>
)}
{/* Lang toggle on landing screen */}
{stage === 'intro' && (
)}
);
}
// Wait for all window globals to be set by the other Babel scripts before rendering,
// because Babel standalone compiles external scripts asynchronously (no guaranteed order).
const REQUIRED_GLOBALS = [
'LandingScreen', 'StylePicker',
'StyleBackground', 'Logo',
'StageNav', 'Hero', 'About', 'Services', 'Works', 'Contact', 'Footer', 'LeafDivider',
'MichalTweaks',
];
function mountWhenReady() {
if (REQUIRED_GLOBALS.every(k => typeof window[k] === 'function')) {
ReactDOM.createRoot(document.getElementById('root')).render();
} else {
requestAnimationFrame(mountWhenReady);
}
}
mountWhenReady();