[BUG]: ScrollVelocity Tailwind variants render 'undefined' class when parallaxClassName/scrollerClassName omitted
Bug Description
The Tailwind variants of ScrollVelocity render a literal undefined CSS class on every default usage because parallaxClassName and scrollerClassName have no defaults, while the render path interpolates them into a template string.
Copy-pasting the Tailwind component and rendering it without those two optional props produces:
<div class="undefined relative overflow-hidden">
<div class="undefined flex whitespace-nowrap text-center ...">
This breaks the CONTRIBUTING 4-variant parity rule and contradicts the documented defaults ("parallax" / "scroller" in ScrollVelocityDemo).
Affected files (current main):
src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx:38-39,110,112src/ts-tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.tsx:73-74,145,147
Healthy comparison:
src/content/TextAnimations/ScrollVelocity/ScrollVelocity.jsx:39-40defaults to'parallax'/'scroller'and rendersclassName={parallaxClassName}src/ts-default/TextAnimations/ScrollVelocity/ScrollVelocity.tsx:74-75same
Steps to Reproduce
- Use the Tailwind variant:
src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx(same forsrc/ts-tailwind/.../ScrollVelocity.tsx) - Render with default props only:
<ScrollVelocity texts={['React Bits', 'Scroll Down']} velocity={100} /> - Inspect the DOM (DevTools Elements panel).
- Observe the outer
divclass is"undefined relative overflow-hidden"and the innermotion.divclass starts with"undefined flex ...".
Minimal logic repro (no browser needed):
let parallaxClassName, scrollerClassName;
console.log(`${parallaxClassName} relative overflow-hidden`);
// -> "undefined relative overflow-hidden"
Expected Behavior
With parallaxClassName / scrollerClassName omitted, no undefined token should appear. Tailwind variants inline their layout utilities (relative overflow-hidden, flex whitespace-nowrap ...), so the custom class portion should default to empty string, e.g. " relative overflow-hidden".
Actual Behavior
Outer: "undefined relative overflow-hidden"
Inner: "undefined flex whitespace-nowrap text-center font-sans text-4xl font-bold tracking-[-0.02em] drop-shadow md:text-[5rem] md:leading-[5rem]"
Tailwind ignores the unknown undefined token, so layout does not fully break, but the DOM is polluted on every default render and the output disagrees with the other two variants and the docs.
Root Cause
Missing defaults in the Tailwind destructuring:
// src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx:38-39
parallaxClassName,
scrollerClassName,
vs content:
// src/content/TextAnimations/ScrollVelocity/ScrollVelocity.jsx:39-40
parallaxClassName = 'parallax',
scrollerClassName = 'scroller',
combined with unconditional interpolation:
// src/tailwind/.../ScrollVelocity.jsx:110,112
<div className={`${parallaxClassName} relative overflow-hidden`}>
<motion.div className={`${scrollerClassName} flex ...`}>
undefined stringifies to "undefined". Note the Tailwind variant intentionally does not import ScrollVelocity.css, so defaulting to 'parallax' / 'scroller' (content defaults) would reference non-existent classes; '' is the correct Tailwind default, consistent with className = '' on line 33.
Suggested Fix
In both Tailwind variants, default to empty string:
- parallaxClassName,
- scrollerClassName,
+ parallaxClassName = '',
+ scrollerClassName = '',
Files:
src/tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.jsx:38-39src/ts-tailwind/TextAnimations/ScrollVelocity/ScrollVelocity.tsx:73-74
No other change needed; docs table (src/demo/TextAnimations/ScrollVelocityDemo.jsx:80-90) documents "parallax" / "scroller" for the CSS variant rendered in the preview and can stay as-is, or add a note that Tailwind defaults to "".
Environment / Version
- Repo:
DavidHDev/react-bitsmain@3a1c7f2(verified 2026-09-13) - Browsers: all (DOM string bug, not browser-specific)
- Variants affected:
Tailwind JS,Tailwind TSonly;Content JSandTS-Defaultare healthy
Validations
- I have checked other issues to see if my issue was already reported or addressed
- Checked:
open_issues_count: 0, searchparallaxClassName in:title,body,commentsreturns 0 results, only related closed item is #907 (ReactNodesupport, unrelated). Recent variant-parity fix #1060 coveredGlitchText/MetaBalls/SideRaysonly, notScrollVelocity.
Source: DavidHDev/react-bits