Fix Scroll Stack layout on small screens - #1048
Closed
EnderRomantice wants to merge 1444 commits into
Closed
Conversation
- Change texts: string[] to texts: React.ReactNode[] in TS variants - Move separator inside the span (encapsulated in scroller) - Replace numCopies! non-null assertion with numCopies ?? 6 - Update prop table description in demo to reflect ReactNode support - Applied consistently across all 4 variants (JS-CSS, JS-TW, TS-CSS, TS-TW) This is a non-breaking change — plain strings are valid ReactNode values, so all existing usage continues to work. The change unlocks rich content like icons, styled spans, gradients, and mixed JSX in the scrolling ticker.
Problems in the original:
- Single useEffect with all 22 props as dependencies caused a full WebGL
context teardown and canvas remount on every prop change — GPU pipeline
rebuilt from scratch for something as minor as a color tweak.
- requestAnimationFrame ran unconditionally at 60fps even when the element
was scrolled completely offscreen, burning GPU cycles with no visible output.
- No awareness of browser tab visibility — shader kept executing even in
background tabs.
Changes (applied to all 4 variants: JS-CSS, JS-TW, TS-CSS, TS-TW):
1. Split into two useEffects:
- Effect 1 ([] deps): creates renderer, canvas, geometry, program, mesh
exactly once for the lifetime of the component.
- Effect 2 (prop deps): writes directly to uniform values — zero GPU cost,
no context recreation, no canvas remount.
2. WeakMap<HTMLDivElement, GrainientCtx> bridges the two effects without
creating strong references that would leak on unmount.
3. IntersectionObserver (threshold: 0) pauses the RAF loop the moment the
canvas scrolls offscreen and resumes when it re-enters the viewport.
4. visibilitychange listener pauses the RAF loop when the browser tab is
hidden and resumes when the user returns to it.
Result: no unnecessary GPU work, dramatically lower CPU/GPU usage on pages
where the component is not in view, and instant prop updates without flicker.
…ct-ratio fix(laserflow): correct aspect-ratio scaling in shader
…ext-on-click ✨ feat(decrypted-text): add click/toggle mode & fix inViewHover re-trigger bug
…cleanup Fixes: WebGL Cleanup
…w object & fixed duplicate id in sponsors constant
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…sor-ssr-error fix: handle SSR error in TargetCursor component by checking for window object & fixed duplicate id in sponsors constant
…locity-reactnode-support feat: support ReactNode in ScrollVelocity texts prop
Fix sidebar visual bug on the sidebar navigation when scrolling down multiple times
Co-authored-by: DavidHDev <48634587+DavidHDev@users.noreply.github.com>
Revert PR DavidHDev#912 (sidebar visual bug fix)
Adds a new animated hexagonal grid background component, as requested in DavidHDev#854. Built using the same canvas-based rendering pattern as the existing Squares component. Features: - Flat-top hexagonal grid with seamless tiling animation - 5 direction options: right, left, up, down, diagonal - Configurable hex size, border color, and hover fill color - Smooth animation via requestAnimationFrame - Mouse hover detection with hex-coordinate mapping - Radial gradient overlay matching existing backgrounds - Responsive canvas with resize handling Includes all 4 component variants (JSX, JSX+Tailwind, TSX, TSX+Tailwind), demo page with customization controls, and code constants. Closes DavidHDev#854
Reworked based on owner feedback — instead of a separate Hexagons
component, extends the existing Squares component with a `shape` prop
that supports 'square' (default) and 'hexagon' variants.
Changes:
- Added `shape` prop ('square' | 'hexagon') to all 4 component variants
- Hexagon mode uses flat-top hex grid with proper tiling geometry
- Seamless animation wrapping for both shapes
- Hover detection adapts to hex coordinate mapping when in hexagon mode
- Added Shape toggle (Square/Hexagon) to demo customization panel
- Updated usage example in code constants
- Fully backward compatible — defaults to 'square'
Closes DavidHDev#854
…d-background feat: add Hexagons background component
Feat: add pixel swap component
…o-hyperspeed fix: add neonwaves (six) preset to hyperspeed demo
…er-on-prop-change fix(ShapeBlur): prevent WebGL context recreation on uniform updates and fix potential memory leak
…stener-leak fix(Ballpit): bind resize/visibility handlers once so removeEventListener works
…ce-duplicate-observer fix(GlassSurface): drop the duplicated resize effect
fix(Lightning, RippleGrid): cancel the render loop on cleanup
…on-loop-leaks fix(ImageTrail): stop the render loop and drop listeners on unmount
…imports fix(ts): use type-only imports in TS variants (fixes TS1484 in stock Vite react-ts apps)
…-split-cli-installation
JadeCong
pushed a commit
to CloudEngineHub/react-bits
that referenced
this pull request
Aug 30, 2026
Replayed from DavidHDev#1048 onto the rewritten clean history.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I've noticed that this component has some display issues on smaller screens. I'm using the latest version of Chrome on a 13-inch MacBook Air M5.
I fix that
2026-08-16.11.35.47.mov