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.
50 lines • 3.1 kB
JavaScript
;
"use client";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollPara3D = ScrollPara3D;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@gsap/react");
const gsap_1 = __importDefault(require("gsap"));
const ScrollTrigger_1 = require("gsap/ScrollTrigger");
const react_2 = require("react");
const utils_1 = require("@/components/lib/utils");
function ScrollPara3D({ lines, className, containerClassName, textClassName, perspective = 600, angle = 50, scrubSpeed = 1.2, fontSize = 3.5, }) {
const sectionRef = (0, react_2.useRef)(null);
const contentRef = (0, react_2.useRef)(null);
(0, react_1.useGSAP)(() => {
gsap_1.default.registerPlugin(ScrollTrigger_1.ScrollTrigger);
if (!contentRef.current || !sectionRef.current)
return;
const contentHeight = contentRef.current.offsetHeight;
const windowHeight = window.innerHeight;
const tl = gsap_1.default.timeline({
scrollTrigger: {
trigger: sectionRef.current,
start: "top top",
end: `+=${contentHeight * scrubSpeed}`,
pin: true,
scrub: 1,
anticipatePin: 1,
},
});
// Start just below so text is immediately visible on scroll
tl.fromTo(contentRef.current, { y: windowHeight * 0.3 }, { y: -contentHeight, ease: "none" });
return () => { tl.kill(); };
}, { dependencies: [lines.length, perspective, angle, scrubSpeed, fontSize] });
return ((0, jsx_runtime_1.jsxs)("div", { ref: sectionRef, className: (0, utils_1.cn)("relative w-full h-screen overflow-hidden bg-background", className), style: { perspective: `${perspective}px` }, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 z-10 pointer-events-none", style: {
background: "linear-gradient(to bottom, var(--background) 0%, transparent 15%, transparent 85%, var(--background) 100%)",
} }), (0, jsx_runtime_1.jsx)("div", { style: {
position: "absolute",
inset: 0,
display: "flex",
alignItems: "flex-end",
justifyContent: "center",
transformStyle: "preserve-3d",
transform: `rotateX(${angle}deg)`,
transformOrigin: "center bottom",
}, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: (0, utils_1.cn)("w-full flex flex-col items-center justify-start", containerClassName), style: { willChange: "transform" }, children: lines.map((line, i) => ((0, jsx_runtime_1.jsx)("p", { className: (0, utils_1.cn)("w-full text-center font-black uppercase text-primary tracking-tighter leading-tight", textClassName), style: { fontSize: `${fontSize}rem` }, children: line }, i))) }) })] }));
}
//# sourceMappingURL=scroll-para-3d.js.map