From 1c9c5c5c0f76321cb74b18450247f3b89470bef3 Mon Sep 17 00:00:00 2001 From: MauryaQbit Date: Sun, 13 Sep 2026 20:01:28 +0530 Subject: [PATCH] fix(ScrollVelocity): default parallax/scroller class in tailwind variants Fixes #1078. --- public/r/ScrollVelocity-JS-TW.json | 2 +- public/r/ScrollVelocity-TS-TW.json | 2 +- src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx | 4 ++-- .../TextAnimations/ScrollVelocity/ScrollVelocity.tsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/public/r/ScrollVelocity-JS-TW.json b/public/r/ScrollVelocity-JS-TW.json index 9c1b8216c..e4ac136c7 100644 --- a/public/r/ScrollVelocity-JS-TW.json +++ b/public/r/ScrollVelocity-JS-TW.json @@ -8,7 +8,7 @@ { "type": "registry:component", "path": "ScrollVelocity/ScrollVelocity.jsx", - "content": "import { useRef, useLayoutEffect, useState } from 'react';\nimport {\n motion,\n useScroll,\n useSpring,\n useTransform,\n useMotionValue,\n useVelocity,\n useAnimationFrame\n} from 'motion/react';\n\nfunction useElementWidth(ref) {\n const [width, setWidth] = useState(0);\n\n useLayoutEffect(() => {\n function updateWidth() {\n if (ref.current) {\n setWidth(ref.current.offsetWidth);\n }\n }\n updateWidth();\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, [ref]);\n\n return width;\n}\n\nexport const ScrollVelocity = ({\n scrollContainerRef,\n texts = [],\n velocity = 100,\n className = '',\n damping = 50,\n stiffness = 400,\n numCopies = 6,\n velocityMapping = { input: [0, 1000], output: [0, 5] },\n parallaxClassName,\n scrollerClassName,\n parallaxStyle,\n scrollerStyle\n}) => {\n function VelocityText({\n children,\n baseVelocity = velocity,\n scrollContainerRef,\n className = '',\n damping,\n stiffness,\n numCopies,\n velocityMapping,\n parallaxClassName,\n scrollerClassName,\n parallaxStyle,\n scrollerStyle\n }) {\n const baseX = useMotionValue(0);\n const scrollOptions = scrollContainerRef ? { container: scrollContainerRef } : {};\n const { scrollY } = useScroll(scrollOptions);\n const scrollVelocity = useVelocity(scrollY);\n const smoothVelocity = useSpring(scrollVelocity, {\n damping: damping ?? 50,\n stiffness: stiffness ?? 400\n });\n const velocityFactor = useTransform(\n smoothVelocity,\n velocityMapping?.input || [0, 1000],\n velocityMapping?.output || [0, 5],\n { clamp: false }\n );\n\n const copyRef = useRef(null);\n const copyWidth = useElementWidth(copyRef);\n\n function wrap(min, max, v) {\n const range = max - min;\n const mod = (((v - min) % range) + range) % range;\n return mod + min;\n }\n\n const x = useTransform(baseX, v => {\n if (copyWidth === 0) return '0px';\n return `${wrap(-copyWidth, 0, v)}px`;\n });\n\n const directionFactor = useRef(1);\n useAnimationFrame((t, delta) => {\n let moveBy = directionFactor.current * baseVelocity * (delta / 1000);\n\n if (velocityFactor.get() < 0) {\n directionFactor.current = -1;\n } else if (velocityFactor.get() > 0) {\n directionFactor.current = 1;\n }\n\n moveBy += directionFactor.current * moveBy * velocityFactor.get();\n baseX.set(baseX.get() + moveBy);\n });\n\n const spans = [];\n for (let i = 0; i < (numCopies ?? 1); i++) {\n spans.push(\n \n {children} \n \n );\n }\n\n return (\n
\n \n {spans}\n \n
\n );\n }\n\n return (\n
\n {texts.map((text, index) => (\n \n {text}\n \n ))}\n
\n );\n};\n\nexport default ScrollVelocity;\n" + "content": "import { useRef, useLayoutEffect, useState } from 'react';\nimport {\n motion,\n useScroll,\n useSpring,\n useTransform,\n useMotionValue,\n useVelocity,\n useAnimationFrame\n} from 'motion/react';\n\nfunction useElementWidth(ref) {\n const [width, setWidth] = useState(0);\n\n useLayoutEffect(() => {\n function updateWidth() {\n if (ref.current) {\n setWidth(ref.current.offsetWidth);\n }\n }\n updateWidth();\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, [ref]);\n\n return width;\n}\n\nexport const ScrollVelocity = ({\n scrollContainerRef,\n texts = [],\n velocity = 100,\n className = '',\n damping = 50,\n stiffness = 400,\n numCopies = 6,\n velocityMapping = { input: [0, 1000], output: [0, 5] },\n parallaxClassName = 'parallax',\n scrollerClassName = 'scroller',\n parallaxStyle,\n scrollerStyle\n}) => {\n function VelocityText({\n children,\n baseVelocity = velocity,\n scrollContainerRef,\n className = '',\n damping,\n stiffness,\n numCopies,\n velocityMapping,\n parallaxClassName,\n scrollerClassName,\n parallaxStyle,\n scrollerStyle\n }) {\n const baseX = useMotionValue(0);\n const scrollOptions = scrollContainerRef ? { container: scrollContainerRef } : {};\n const { scrollY } = useScroll(scrollOptions);\n const scrollVelocity = useVelocity(scrollY);\n const smoothVelocity = useSpring(scrollVelocity, {\n damping: damping ?? 50,\n stiffness: stiffness ?? 400\n });\n const velocityFactor = useTransform(\n smoothVelocity,\n velocityMapping?.input || [0, 1000],\n velocityMapping?.output || [0, 5],\n { clamp: false }\n );\n\n const copyRef = useRef(null);\n const copyWidth = useElementWidth(copyRef);\n\n function wrap(min, max, v) {\n const range = max - min;\n const mod = (((v - min) % range) + range) % range;\n return mod + min;\n }\n\n const x = useTransform(baseX, v => {\n if (copyWidth === 0) return '0px';\n return `${wrap(-copyWidth, 0, v)}px`;\n });\n\n const directionFactor = useRef(1);\n useAnimationFrame((t, delta) => {\n let moveBy = directionFactor.current * baseVelocity * (delta / 1000);\n\n if (velocityFactor.get() < 0) {\n directionFactor.current = -1;\n } else if (velocityFactor.get() > 0) {\n directionFactor.current = 1;\n }\n\n moveBy += directionFactor.current * moveBy * velocityFactor.get();\n baseX.set(baseX.get() + moveBy);\n });\n\n const spans = [];\n for (let i = 0; i < (numCopies ?? 1); i++) {\n spans.push(\n \n {children} \n \n );\n }\n\n return (\n
\n \n {spans}\n \n
\n );\n }\n\n return (\n
\n {texts.map((text, index) => (\n \n {text}\n \n ))}\n
\n );\n};\n\nexport default ScrollVelocity;\n" } ], "registryDependencies": [], diff --git a/public/r/ScrollVelocity-TS-TW.json b/public/r/ScrollVelocity-TS-TW.json index e3872326f..a792b87da 100644 --- a/public/r/ScrollVelocity-TS-TW.json +++ b/public/r/ScrollVelocity-TS-TW.json @@ -8,7 +8,7 @@ { "type": "registry:component", "path": "ScrollVelocity/ScrollVelocity.tsx", - "content": "import React, { useRef, useLayoutEffect, useState } from 'react';\nimport {\n motion,\n useScroll,\n useSpring,\n useTransform,\n useMotionValue,\n useVelocity,\n useAnimationFrame\n} from 'motion/react';\n\ninterface VelocityMapping {\n input: [number, number];\n output: [number, number];\n}\n\ninterface VelocityTextProps {\n children: React.ReactNode;\n baseVelocity: number;\n scrollContainerRef?: React.RefObject;\n className?: string;\n damping?: number;\n stiffness?: number;\n numCopies?: number;\n velocityMapping?: VelocityMapping;\n parallaxClassName?: string;\n scrollerClassName?: string;\n parallaxStyle?: React.CSSProperties;\n scrollerStyle?: React.CSSProperties;\n}\n\ninterface ScrollVelocityProps {\n scrollContainerRef?: React.RefObject;\n texts: React.ReactNode[];\n velocity?: number;\n className?: string;\n damping?: number;\n stiffness?: number;\n numCopies?: number;\n velocityMapping?: VelocityMapping;\n parallaxClassName?: string;\n scrollerClassName?: string;\n parallaxStyle?: React.CSSProperties;\n scrollerStyle?: React.CSSProperties;\n}\n\nfunction useElementWidth(ref: React.RefObject): number {\n const [width, setWidth] = useState(0);\n\n useLayoutEffect(() => {\n function updateWidth() {\n if (ref.current) {\n setWidth(ref.current.offsetWidth);\n }\n }\n updateWidth();\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, [ref]);\n\n return width;\n}\n\nexport const ScrollVelocity: React.FC = ({\n scrollContainerRef,\n texts = [],\n velocity = 100,\n className = '',\n damping = 50,\n stiffness = 400,\n numCopies = 6,\n velocityMapping = { input: [0, 1000], output: [0, 5] },\n parallaxClassName,\n scrollerClassName,\n parallaxStyle,\n scrollerStyle\n}) => {\n function VelocityText({\n children,\n baseVelocity = velocity,\n scrollContainerRef,\n className = '',\n damping,\n stiffness,\n numCopies,\n velocityMapping,\n parallaxClassName,\n scrollerClassName,\n parallaxStyle,\n scrollerStyle\n }: VelocityTextProps) {\n const baseX = useMotionValue(0);\n const scrollOptions = scrollContainerRef ? { container: scrollContainerRef } : {};\n const { scrollY } = useScroll(scrollOptions);\n const scrollVelocity = useVelocity(scrollY);\n const smoothVelocity = useSpring(scrollVelocity, {\n damping: damping ?? 50,\n stiffness: stiffness ?? 400\n });\n const velocityFactor = useTransform(\n smoothVelocity,\n velocityMapping?.input || [0, 1000],\n velocityMapping?.output || [0, 5],\n { clamp: false }\n );\n\n const copyRef = useRef(null);\n const copyWidth = useElementWidth(copyRef);\n\n function wrap(min: number, max: number, v: number): number {\n const range = max - min;\n const mod = (((v - min) % range) + range) % range;\n return mod + min;\n }\n\n const x = useTransform(baseX, v => {\n if (copyWidth === 0) return '0px';\n return `${wrap(-copyWidth, 0, v)}px`;\n });\n\n const directionFactor = useRef(1);\n useAnimationFrame((t, delta) => {\n let moveBy = directionFactor.current * baseVelocity * (delta / 1000);\n\n if (velocityFactor.get() < 0) {\n directionFactor.current = -1;\n } else if (velocityFactor.get() > 0) {\n directionFactor.current = 1;\n }\n\n moveBy += directionFactor.current * moveBy * velocityFactor.get();\n baseX.set(baseX.get() + moveBy);\n });\n\n const spans = [];\n for (let i = 0; i < (numCopies ?? 6); i++) {\n spans.push(\n \n {children} \n \n );\n }\n\n return (\n
\n \n {spans}\n \n
\n );\n }\n\n return (\n
\n {texts.map((text, index) => (\n \n {text}\n \n ))}\n
\n );\n};\n\nexport default ScrollVelocity;\n" + "content": "import React, { useRef, useLayoutEffect, useState } from 'react';\nimport {\n motion,\n useScroll,\n useSpring,\n useTransform,\n useMotionValue,\n useVelocity,\n useAnimationFrame\n} from 'motion/react';\n\ninterface VelocityMapping {\n input: [number, number];\n output: [number, number];\n}\n\ninterface VelocityTextProps {\n children: React.ReactNode;\n baseVelocity: number;\n scrollContainerRef?: React.RefObject;\n className?: string;\n damping?: number;\n stiffness?: number;\n numCopies?: number;\n velocityMapping?: VelocityMapping;\n parallaxClassName?: string;\n scrollerClassName?: string;\n parallaxStyle?: React.CSSProperties;\n scrollerStyle?: React.CSSProperties;\n}\n\ninterface ScrollVelocityProps {\n scrollContainerRef?: React.RefObject;\n texts: React.ReactNode[];\n velocity?: number;\n className?: string;\n damping?: number;\n stiffness?: number;\n numCopies?: number;\n velocityMapping?: VelocityMapping;\n parallaxClassName?: string;\n scrollerClassName?: string;\n parallaxStyle?: React.CSSProperties;\n scrollerStyle?: React.CSSProperties;\n}\n\nfunction useElementWidth(ref: React.RefObject): number {\n const [width, setWidth] = useState(0);\n\n useLayoutEffect(() => {\n function updateWidth() {\n if (ref.current) {\n setWidth(ref.current.offsetWidth);\n }\n }\n updateWidth();\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, [ref]);\n\n return width;\n}\n\nexport const ScrollVelocity: React.FC = ({\n scrollContainerRef,\n texts = [],\n velocity = 100,\n className = '',\n damping = 50,\n stiffness = 400,\n numCopies = 6,\n velocityMapping = { input: [0, 1000], output: [0, 5] },\n parallaxClassName = 'parallax',\n scrollerClassName = 'scroller',\n parallaxStyle,\n scrollerStyle\n}) => {\n function VelocityText({\n children,\n baseVelocity = velocity,\n scrollContainerRef,\n className = '',\n damping,\n stiffness,\n numCopies,\n velocityMapping,\n parallaxClassName,\n scrollerClassName,\n parallaxStyle,\n scrollerStyle\n }: VelocityTextProps) {\n const baseX = useMotionValue(0);\n const scrollOptions = scrollContainerRef ? { container: scrollContainerRef } : {};\n const { scrollY } = useScroll(scrollOptions);\n const scrollVelocity = useVelocity(scrollY);\n const smoothVelocity = useSpring(scrollVelocity, {\n damping: damping ?? 50,\n stiffness: stiffness ?? 400\n });\n const velocityFactor = useTransform(\n smoothVelocity,\n velocityMapping?.input || [0, 1000],\n velocityMapping?.output || [0, 5],\n { clamp: false }\n );\n\n const copyRef = useRef(null);\n const copyWidth = useElementWidth(copyRef);\n\n function wrap(min: number, max: number, v: number): number {\n const range = max - min;\n const mod = (((v - min) % range) + range) % range;\n return mod + min;\n }\n\n const x = useTransform(baseX, v => {\n if (copyWidth === 0) return '0px';\n return `${wrap(-copyWidth, 0, v)}px`;\n });\n\n const directionFactor = useRef(1);\n useAnimationFrame((t, delta) => {\n let moveBy = directionFactor.current * baseVelocity * (delta / 1000);\n\n if (velocityFactor.get() < 0) {\n directionFactor.current = -1;\n } else if (velocityFactor.get() > 0) {\n directionFactor.current = 1;\n }\n\n moveBy += directionFactor.current * moveBy * velocityFactor.get();\n baseX.set(baseX.get() + moveBy);\n });\n\n const spans = [];\n for (let i = 0; i < (numCopies ?? 6); i++) {\n spans.push(\n \n {children} \n \n );\n }\n\n return (\n
\n \n {spans}\n \n
\n );\n }\n\n return (\n
\n {texts.map((text, index) => (\n \n {text}\n \n ))}\n
\n );\n};\n\nexport default ScrollVelocity;\n" } ], "registryDependencies": [], diff --git a/src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx b/src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx index 3e206f9ff..ea1ff57ab 100644 --- a/src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx +++ b/src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx @@ -35,8 +35,8 @@ export const ScrollVelocity = ({ stiffness = 400, numCopies = 6, velocityMapping = { input: [0, 1000], output: [0, 5] }, - parallaxClassName, - scrollerClassName, + parallaxClassName = 'parallax', + scrollerClassName = 'scroller', parallaxStyle, scrollerStyle }) => { diff --git a/src/ts-tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.tsx b/src/ts-tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.tsx index 0996e043b..a672fe05e 100644 --- a/src/ts-tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.tsx +++ b/src/ts-tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.tsx @@ -70,8 +70,8 @@ export const ScrollVelocity: React.FC = ({ stiffness = 400, numCopies = 6, velocityMapping = { input: [0, 1000], output: [0, 5] }, - parallaxClassName, - scrollerClassName, + parallaxClassName = 'parallax', + scrollerClassName = 'scroller', parallaxStyle, scrollerStyle }) => {