feat: add Marquee component and refactor ScrollFade with intensity prop#28
Open
ParryPee wants to merge 11 commits into8starlabs:mainfrom
Open
feat: add Marquee component and refactor ScrollFade with intensity prop#28ParryPee wants to merge 11 commits into8starlabs:mainfrom
ParryPee wants to merge 11 commits into8starlabs:mainfrom
Conversation
|
@ParryPee is attempting to deploy a commit to the 8StarLabs' projects Team on Vercel. A member of the Team first needs to authorize it. |
keiloktql
requested changes
Feb 2, 2026
Contributor
keiloktql
left a comment
keiloktql
left a comment
There was a problem hiding this comment.
additional comments
- run
npm run registry:buildto update changes for all the components modified and involved - shift all the svgs to icons, so no more svg files
| <div className="flex flex-col gap-2 overflow-hidden"> | ||
| <Marquee greyscale={true}> | ||
| <div className="w-30 h-14"> | ||
| <img |
Contributor
There was a problem hiding this comment.
shift all the svgs to icons.tsx and import them to use it for consistency sake
| @@ -57,6 +57,27 @@ | |||
| --color-code-number: var(--code-number); | |||
| --color-selection: var(--selection); | |||
| --color-selection-foreground: var(--selection-foreground); | |||
Contributor
There was a problem hiding this comment.
do these get added to users' globals.css when they install?
keiloktql
reviewed
Feb 2, 2026
| ``` | ||
|
|
||
| ```tsx showLineNumbers | ||
| <Marquee Grayscale={false}> |
keiloktql
reviewed
Feb 2, 2026
| import React from "react"; | ||
|
|
||
| interface MarqueeProps { | ||
| greyscale?: boolean; |
Contributor
There was a problem hiding this comment.
standardize all grey to gray
keiloktql
reviewed
Feb 2, 2026
| className={cn( | ||
| "flex overflow-hidden p-2 [--gap:3rem]", | ||
| pauseOnHover && "group/marquee", | ||
| greyscale && "grayscale contrast-200", |
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
2 participants
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.
1. New Component: Marquee Closes #24
Added a new Marquee component for continuous scrolling content loops.
Infinite Loop: Automatically duplicates children to ensure a seamless, gapless scroll.
Customisation: Supports left or right directions and a pauseOnHover feature for better user interactivity.
Visual Enhancements: Includes optional greyscale and fade props to match different UI themes.
2. Refactor: ScrollFade Intensity
Refactored the ScrollFade component to provide more granular control over the visual "strength" of the fade effect.
New intensity Prop: Introduced an intensity prop (defaulting to 1) that is clamped between 0 and 1.
Clean Implementation: Updated all four directional overlays (Left, Right, Top, Bottom) to respect the new fadeIntensity calculation.