+
+
+ {items.map(({ child, repeatIndex, itemIndex, key }) => {
+ // Create a unique offset transform for each item
+ const itemOffset = useTransform(baseOffset, (v) => {
+ const position = (itemIndex * 100) / items.length;
+ const wrappedValue = wrap(0, 100, v + position);
+ return `${easing ? easing(wrappedValue / 100) * 100 : wrappedValue}%`;
+ });
+
+ // Create a motion value for the current offset distance
+ const currentOffsetDistance = useMotionValue(0);
+
+ // Update z-index when offset distance changes
+ const zIndex = useTransform(currentOffsetDistance, (value) =>
+ calculateZIndex(value),
+ );
+
+ // Update current offset distance value when animation runs
+ useEffect(() => {
+ const unsubscribe = itemOffset.on("change", (value: string) => {
+ // Parse percentage string to get numerical value
+ const match = value.match(/^([\d.]+)%$/);
+ if (match && match[1]) {
+ currentOffsetDistance.set(parseFloat(match[1]));
+ }
+ });
+ return unsubscribe;
+ }, [itemOffset, currentOffsetDistance]);
+
+ const cssVariables = Object.fromEntries(
+ (cssVariableInterpolation || []).map(({ property, from, to }) => [
+ property,
+ useTransform(currentOffsetDistance, [0, 100], [from, to]),
+ ]),
+ );
+
+ return (
+
{
+ if (el) itemRefs.current.set(key, el);
+ }}
+ className={cn(
+ "absolute top-0 left-0",
+ draggable && grabCursor && "cursor-grab",
+ )}
+ style={{
+ offsetPath: `path('${path}')`,
+ offsetDistance: itemOffset,
+ zIndex: enableRollingZIndex ? zIndex : undefined,
+ ...cssVariables,
+ }}
+ aria-hidden={repeatIndex > 0}
+ onMouseEnter={() => (isHovered.current = true)}
+ onMouseLeave={() => (isHovered.current = false)}
+ >
+ {child}
+
+ );
+ })}
+