-
+ {/*
{index + 1}
-
+ */}
-
+
{title}
-
+
{description}
@@ -159,7 +159,7 @@ function WalkthroughCard({
);
}
-function WalkthroughScroll() {
+function HeroCarousel() {
const [activeIndex, setActiveIndex] = useState(0);
const [isPaused, setIsPaused] = useState(false);
const [isGifExpanded, setIsGifExpanded] = useState(false);
@@ -167,6 +167,15 @@ function WalkthroughScroll() {
const [cardHeight, setCardHeight] = useState(420);
const containerRef = useRef
(null);
const activeCardRef = useRef(null);
+ const directionRef = useRef<"forward" | "backward">("forward");
+
+ const goTo = useCallback(
+ (newIndex: number) => {
+ directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
+ setActiveIndex(newIndex);
+ },
+ [activeIndex],
+ );
useEffect(() => {
const el = containerRef.current;
@@ -191,6 +200,7 @@ function WalkthroughScroll() {
useEffect(() => {
if (isPaused || isGifExpanded) return;
const timer = setTimeout(() => {
+ directionRef.current = "forward";
setActiveIndex((prev) => (prev >= carouselItems.length - 1 ? 0 : prev + 1));
}, 8000);
return () => clearTimeout(timer);
@@ -218,18 +228,22 @@ function WalkthroughScroll() {
const diff = index - activeIndex;
if (diff === 0) {
- return { x: -cardWidth / 2, rotateY: 0, zIndex: 20, originX: 1 };
+ const originX = directionRef.current === "forward" ? 1 : 0;
+ return { x: -cardWidth / 2, rotateY: 0, zIndex: 20, originX, overlayOpacity: 0, blur: 0 };
}
const dist = Math.abs(diff);
const isLeft = diff < 0;
const offset = baseOffset + (dist - 1) * stackGap;
+ const t = Math.min(1, dist / 3);
return {
x: -cardWidth / 2 + (isLeft ? -offset : offset),
rotateY: isLeft ? 90 : -90,
zIndex: 20 - dist,
originX: isLeft ? 0 : 1,
+ overlayOpacity: t,
+ blur: t * 6,
};
},
[activeIndex, cardWidth, baseOffset, stackGap],
@@ -263,14 +277,20 @@ function WalkthroughScroll() {
transformStyle: "preserve-3d",
zIndex: style.zIndex,
transformOrigin: `${style.originX * 100}% 50%`,
+ cursor: i !== activeIndex ? "pointer" : undefined,
}}
+ onClick={i !== activeIndex ? () => goTo(i) : undefined}
animate={{
x: style.x,
rotateY: style.rotateY,
}}
transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}
>
-
+
+
+
);
})}