// Hero section — 5-group 16:9 slide carousel with crossfade within, slide+fade between
// 5 demo groups — each is a pair: original + translated
const DEMO_GROUPS = [
{
id: "group-1",
imgOriginal: "assets/group-1-1.png",
imgTranslated: "assets/group-1-2.png",
},
{
id: "group-2",
imgOriginal: "assets/group-2-1.png?v=2",
imgTranslated: "assets/group-2-2.png?v=2",
},
{
id: "group-3",
imgOriginal: "assets/group-3-1.png",
imgTranslated: "assets/group-3-2.png",
},
{
id: "group-4",
imgOriginal: "assets/group-4-1.png",
imgTranslated: "assets/group-4-2.png",
},
{
id: "group-5",
imgOriginal: "assets/group-5-1.png",
imgTranslated: "assets/group-5-2.png",
},
];
// 16:9 slide card — renders ORIGINAL or TRANSLATED side of a group
function DemoSlide({ group, side }) {
const src = side === "trans" ? group.imgTranslated : group.imgOriginal;
const sideLabel = side === "trans" ? "translated" : "original";
return (
);
}
/**
* SlideCarousel — "film strip" model
* Two groups are mounted side-by-side on a single track:
* [ current | gap | next ]
* During transition, the ENTIRE track slides left so next moves into center
* while current moves out — they travel together at the same speed (no gap).
*
* Timings:
* dwell per group: 7s total (within-group crossfade original->translated at 3s)
* between-group slide: 1.1s (track translates by 100% + gap)
* outgoing fade-out: 0.55s (faster than slide) — so it's gone before reaching left text
*
* Distances / values to remember (v1 — restore point):
* - Gap between film cells: 8% of carousel width
* - Slide distance: -(100% + gap) on the track
* - Slide duration: 1.1s cubic-bezier(.45,.05,.25,1)
* - Outgoing opacity transition: 0.55s ease-in
* - Incoming opacity transition: 0.9s ease-out (same as before)
*/
function SlideCarousel() {
const [currentIdx, setCurrentIdx] = useState(0);
const [sideIdx, setSideIdx] = useState(0); // 0 original, 1 translated
const [sliding, setSliding] = useState(false); // true during between-group slide
const [committing, setCommitting] = useState(false); // one-frame flag to suppress transitions during commit
// Tunables (v1)
const GAP_PCT = 8; // % of carousel width between cells
const SLIDE_MS = 1100; // duration of slide
const FADE_OUT_MS = 550; // faster fade-out of outgoing group
const FADE_IN_MS = 900; // incoming fade-in
const DWELL_MS = 5000; // how long each group stays centered (2s orig + 2s translated + crossfade)
const SIDE_SWITCH_MS = 2000; // when to crossfade original -> translated
useEffect(() => {
const timeouts = [];
// Crossfade to translated at t=3s
timeouts.push(setTimeout(() => setSideIdx(1), SIDE_SWITCH_MS));
// Begin slide at t=7s
timeouts.push(setTimeout(() => setSliding(true), DWELL_MS));
// After slide completes, commit in two steps to avoid flash:
// 1. Set `committing` true → transitions disabled on next render
// 2. In that disabled frame, swap currentIdx + reset sliding/sideIdx
// 3. Clear committing on the frame after, re-enable normal transitions
timeouts.push(setTimeout(() => {
setCommitting(true);
setCurrentIdx((g) => (g + 1) % DEMO_GROUPS.length);
setSideIdx(0);
setSliding(false);
// next animation frame: release the transition lock
requestAnimationFrame(() => {
requestAnimationFrame(() => setCommitting(false));
});
}, DWELL_MS + SLIDE_MS));
return () => timeouts.forEach(clearTimeout);
}, [currentIdx]);
const current = DEMO_GROUPS[currentIdx];
const next = DEMO_GROUPS[(currentIdx + 1) % DEMO_GROUPS.length];
// Track transform: when sliding, shift left by (100% + GAP)
const trackTransform = sliding
? `translateX(calc(-100% - ${GAP_PCT}%))`
: `translateX(0%)`;
return (
{/* clip mask keeps slides visible only over the carousel width */}
{/* CURRENT cell */}
{/* crossfade layers within current */}
{/* NEXT cell — starts at 100%+GAP to the right of current, rides the same track */}
{/* indicator dots */}
{DEMO_GROUPS.map((_, i) => (
))}
);
}
// HERO VARIATION A — left copy + carousel on right
function HeroA({ t }) {
return (