lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
163 lines • 8.17 kB
JavaScript
;
"use client";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.wrap = void 0;
exports.ScrollVelocityContainer = ScrollVelocityContainer;
exports.ScrollVelocityRow = ScrollVelocityRow;
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
const react_1 = __importStar(require("react"));
// Assuming you have a utility function for Tailwind CSS class merging
const cn = (...classes) => classes.filter(Boolean).join(' ');
/**
* Utility function to wrap a value within a min/max range for continuous looping.
* @param min The minimum value of the range.
* @param max The maximum value of the range.
* @param v The value to wrap.
*/
const wrap = (min, max, v) => {
const rangeSize = max - min;
return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
};
exports.wrap = wrap;
// --- Context for Shared Scroll Velocity ---
const ScrollVelocityContext = react_1.default.createContext(null);
// --- ScrollVelocityContainer (Parent Component) ---
function ScrollVelocityContainer({ children, className, ...props }) {
const { scrollY } = (0, framer_motion_1.useScroll)();
const scrollVelocity = (0, framer_motion_1.useVelocity)(scrollY);
const smoothVelocity = (0, framer_motion_1.useSpring)(scrollVelocity, {
damping: 50,
stiffness: 400,
});
// Transforms the smooth scroll velocity into a factor used to control the marquee speed.
const velocityFactor = (0, framer_motion_1.useTransform)(smoothVelocity, (v) => {
const sign = v < 0 ? -1 : 1;
// Clamps the magnitude to a max of 5 for reasonable speed
const magnitude = Math.min(5, (Math.abs(v) / 1000) * 5);
return sign * magnitude;
});
return ((0, jsx_runtime_1.jsx)(ScrollVelocityContext.Provider, { value: velocityFactor, children: (0, jsx_runtime_1.jsx)("div", { className: cn("relative w-full", className), ...props, children: children }) }));
}
// --- ScrollVelocityRow (Router) ---
// Decides whether to use shared context or local velocity calculation.
function ScrollVelocityRow(props) {
const sharedVelocityFactor = (0, react_1.useContext)(ScrollVelocityContext);
if (sharedVelocityFactor) {
return ((0, jsx_runtime_1.jsx)(ScrollVelocityRowImpl, { ...props, velocityFactor: sharedVelocityFactor }));
}
return (0, jsx_runtime_1.jsx)(ScrollVelocityRowLocal, { ...props });
}
function ScrollVelocityRowImpl({ children, baseVelocity = 5, direction = 1, className, velocityFactor, ...props }) {
const containerRef = (0, react_1.useRef)(null);
const [numCopies, setNumCopies] = (0, react_1.useState)(1);
const x = (0, framer_motion_1.useMotionValue)(0);
// State added to handle pause on hover
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
const prevTimeRef = (0, react_1.useRef)(0);
const unitWidthRef = (0, react_1.useRef)(0);
const baseXRef = (0, react_1.useRef)(0);
// Optimize: Check if container is in view
const isInView = (0, framer_motion_1.useInView)(containerRef, { margin: "20%" });
// ResizeObserver to determine how many copies are needed for continuous loop
(0, react_1.useEffect)(() => {
const container = containerRef.current;
if (!container)
return;
const ro = new ResizeObserver(([entry]) => {
const containerWidth = entry.contentRect.width;
const block = container.querySelector(".scroll-velocity-block");
if (!block)
return;
const blockWidth = block.scrollWidth;
unitWidthRef.current = blockWidth;
if (blockWidth > 0) {
// Calculate copies: need at least 3, or enough to cover the screen plus padding
const nextCopies = Math.max(3, Math.ceil(containerWidth / blockWidth) + 2);
setNumCopies(nextCopies);
}
});
ro.observe(container);
return () => ro.disconnect();
}, []);
// Frame-by-frame animation logic
(0, framer_motion_1.useAnimationFrame)((time) => {
if (!isInView || isHovered) {
prevTimeRef.current = time;
return;
}
const dt = (time - prevTimeRef.current) / 1000;
prevTimeRef.current = time;
const unitWidth = unitWidthRef.current;
if (unitWidth <= 0)
return;
const velocity = velocityFactor.get();
const speedMultiplier = Math.min(5, Math.abs(velocity));
const scrollDirection = velocity >= 0 ? 1 : -1;
const currentDirection = direction * scrollDirection;
// Calculate how far to move this frame
const pixelsPerSecond = (unitWidth * baseVelocity) / 100;
const moveBy = currentDirection * pixelsPerSecond * (1 + speedMultiplier) * dt;
// Update position and apply the wrap function for seamless looping
const newX = baseXRef.current + moveBy;
baseXRef.current = (0, exports.wrap)(0, unitWidth, newX);
x.set(baseXRef.current);
});
const childrenArray = react_1.default.Children.toArray(children);
return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: cn("w-full overflow-hidden whitespace-nowrap", className), ...props,
// Handlers to control the hover state
onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "inline-flex will-change-transform transform-gpu",
// Use useTransform to invert the x value for a left-to-right scroll effect
style: { x: (0, framer_motion_1.useTransform)(x, (v) => `${-v}px`) }, children: Array.from({ length: numCopies }).map((_, i) => ((0, jsx_runtime_1.jsx)("div", { className: cn("inline-flex shrink-0",
// Mark the first copy to measure its width for looping
i === 0 && "scroll-velocity-block"), "aria-hidden": i !== 0, children: childrenArray }, i))) }) }));
}
// --- ScrollVelocityRowLocal (Fallback for standalone usage) ---
function ScrollVelocityRowLocal(props) {
const { scrollY } = (0, framer_motion_1.useScroll)();
const localVelocity = (0, framer_motion_1.useVelocity)(scrollY);
const localSmoothVelocity = (0, framer_motion_1.useSpring)(localVelocity, {
damping: 50,
stiffness: 400,
});
const localVelocityFactor = (0, framer_motion_1.useTransform)(localSmoothVelocity, (v) => {
const sign = v < 0 ? -1 : 1;
const magnitude = Math.min(5, (Math.abs(v) / 1000) * 5);
return sign * magnitude;
});
return ((0, jsx_runtime_1.jsx)(ScrollVelocityRowImpl, { ...props, velocityFactor: localVelocityFactor }));
}
//# sourceMappingURL=ScrollVelocityContainer.js.map