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.
46 lines • 3.71 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CinematicScroll = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const utils_1 = require("../lib/utils");
const CinematicScroll = ({ children, className, blurLayers = 5, blurMax = 20, blurSize = 80, accentColor = "#3b82f6", showScrollbar = true, }) => {
const containerRef = (0, react_1.useRef)(null);
const scrollerRef = (0, react_1.useRef)(null);
const { scrollYProgress } = (0, framer_motion_1.useScroll)({
container: scrollerRef,
});
// Spring smooth progress for the custom bar
const scaleY = (0, framer_motion_1.useSpring)(scrollYProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001,
});
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, utils_1.cn)("relative w-full h-full overflow-hidden rounded-xl border border-border bg-background", className), style: {
"--blur-max": blurMax,
"--blur-size": blurSize,
"--accent": accentColor,
}, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 right-0 z-30 pointer-events-none overflow-hidden", style: { height: blurSize }, children: [...Array(blurLayers)].map((_, i) => ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", style: {
backdropFilter: `blur(${Math.sin(((blurLayers - (i + 1)) / blurLayers) * Math.PI / 2) * blurMax}px) contrast(1.2) brightness(1.1)`,
maskImage: `linear-gradient(to bottom, black, transparent ${((i + 1) / blurLayers) * 100}%)`,
WebkitMaskImage: `linear-gradient(to bottom, black, transparent ${((i + 1) / blurLayers) * 100}%)`,
} }, `top-${i}`))) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 left-0 right-0 z-30 pointer-events-none overflow-hidden rotate-180", style: { height: blurSize }, children: [...Array(blurLayers)].map((_, i) => ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", style: {
backdropFilter: `blur(${Math.sin(((blurLayers - (i + 1)) / blurLayers) * Math.PI / 2) * blurMax}px) contrast(1.2) brightness(1.1)`,
maskImage: `linear-gradient(to bottom, black, transparent ${((i + 1) / blurLayers) * 100}%)`,
WebkitMaskImage: `linear-gradient(to bottom, black, transparent ${((i + 1) / blurLayers) * 100}%)`,
} }, `bottom-${i}`))) }), showScrollbar && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-2 right-2 bottom-2 w-1.5 z-40 pointer-events-none hidden sm:block", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "w-full rounded-full origin-top", style: {
scaleY,
height: "100%",
background: `linear-gradient(to bottom, ${accentColor}, ${accentColor}dd)`,
boxShadow: `0 0 10px ${accentColor}44`,
} }) })), (0, jsx_runtime_1.jsx)("div", { ref: scrollerRef, className: "w-full h-full overflow-y-auto overflow-x-hidden custom-scrollbar", style: { scrollbarWidth: "none" }, children: (0, jsx_runtime_1.jsx)("div", { className: "px-6 py-12", children: children }) }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: `
.custom-scrollbar::-webkit-scrollbar {
display: none;
}
` } })] }));
};
exports.CinematicScroll = CinematicScroll;
exports.default = exports.CinematicScroll;
//# sourceMappingURL=CinematicScroll.js.map