refactor(SplashViz): migrate from SCSS to Tailwind CSS by mr-baraiya · Pull Request #8095 · webpack/webpack.js.org

mr-baraiya · 2026-03-22T17:37:25Z

Part of #8047

Changes

Migrated SplashViz component from SCSS to Tailwind CSS
Removed SplashViz.scss file
Preserved existing UI and behavior

Notes

No functional changes introduced
Continues incremental migration away from SCSS

vercel · 2026-03-22T17:37:32Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webpack-js-org	Ready	Preview, Comment	Mar 26, 2026 6:43pm

rahul-kr-rai

The current h1 heading appears to visually merge with the navbar
Please fix it.

alexander-akait

Please fix the above problem

mr-baraiya · 2026-03-23T13:53:39Z

Adjusted layout spacing by adding top padding to the section instead of margin on the heading. This ensures proper separation from the navbar.

alexander-akait · 2026-03-23T15:01:30Z

@rahul-kr-rai please take a look too

rahul-kr-rai · 2026-03-23T15:35:54Z

Adjusted layout spacing by adding top padding to the section instead of margin on the heading. This ensures proper separation from the navbar.

But size of h1 is diffrent form Webpack.js.org see the difference ( https://webpack-js-org-git-fork-mr-baraiya-feature-splash-74c8ba-openjs.vercel.app/ and https://webpack.js.org/)

Please fix it.

mr-baraiya · 2026-03-23T16:27:19Z

Updated the heading font size using exact pixel values from the original webpack.js.org design and aligned spacing with the original SCSS by using margin on the heading instead of section padding.

rahul-kr-rai · 2026-03-23T18:36:08Z

Adjusted layout spacing by adding top padding to the section instead of margin on the heading. This ensures proper separation from the navbar.

Good, but the style is still different. You can open both links and see the exact difference by switching the tabs.

Visit Here: ( https://webpack-js-org-git-fork-mr-baraiya-feature-splash-74c8ba-openjs.vercel.app/ and https://webpack.js.org/ )

Please fix it.

mr-baraiya · 2026-03-25T19:05:34Z

I’ve worked on aligning the SplashViz section with the original Webpack design and was able to match most of the styling and behavior.

However, the text rotation animation still shows a slight flicker/crack during transitions. I investigated multiple approaches (layout fixes, animation changes, font adjustments), but it appears to be caused by browser rendering limitations with text animations rather than implementation issues.

Given this, I’m unable to fully eliminate the glitch while keeping the original behavior intact. I’d suggest either accepting the minor visual difference or switching to a fade-based animation for complete smoothness.

Let me know how you’d like to proceed.

rahul-kr-rai · 2026-03-25T23:26:15Z

I’ve worked on aligning the SplashViz section with the original Webpack design and was able to match most of the styling and behavior.

However, the text rotation animation still shows a slight flicker/crack during transitions. I investigated multiple approaches (layout fixes, animation changes, font adjustments), but it appears to be caused by browser rendering limitations with text animations rather than implementation issues.

Given this, I’m unable to fully eliminate the glitch while keeping the original behavior intact. I’d suggest either accepting the minor visual difference or switching to a fade-based animation for complete smoothness.

Let me know how you’d like to proceed.

The text rotation twitch problem was solved by PR #8117.
Please focus on the SplashViz Component only.

mr-baraiya · 2026-03-26T10:14:02Z

I’ve focused only on the SplashViz component and updated the styling to better match the original design.

alexander-akait · 2026-03-26T11:42:51Z

@rahul-kr-rai can you take a look too on these changes

rahul-kr-rai · 2026-03-26T12:34:07Z

-            <span> images </span>
-            <span> styles </span>
-          </TextRotator>
+      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">


Can we use Clsx here?

Suggested change

<section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">

className={clsx(

"relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16",

"bg-[#2b3a42] dark:bg-gray-900",

// height utilities

"h-[clamp(35rem,calc(100vh-80px),45rem)]",

"md:h-[clamp(30rem,calc(100vh-80px),35rem)]",

"sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]"

)}

We should use clsx only when our classes are conditional, for example:

<section className={clsx(["foo", isOpen ? "open" : "close", isBig ? "big" : "small"])}>

rahul-kr-rai · 2026-03-26T12:50:06Z

@alexander-akait

I have verified it locally all look good. If clsx not required then Redy to merged.

alexander-akait · 2026-03-26T15:55:04Z

+          "md:h-[clamp(30rem,calc(100vh-80px),35rem)]",
+          "sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]",
+        )}
+      >


@mr-baraiya let's remove clsx from here, no conditional classes and we can merge

alexander-akait · 2026-03-26T16:20:33Z

@mr-baraiya please rebase main

…dability

…k design

…nt setup

…lity

mr-baraiya · 2026-03-26T16:40:39Z

Rebased on latest main

alexander-akait · 2026-03-26T16:47:57Z

@mr-baraiya Please look at https://webpack-js-org-git-fork-mr-baraiya-feature-splash-74c8ba-openjs.vercel.app/ and you will find that cube is not in center, to be honestly I tired to recheck everything every time, please verify your changes before pinging me, respect time of other developers

mr-baraiya · 2026-03-26T17:14:03Z

Fixed and verified.

rahul-kr-rai · 2026-03-26T17:46:06Z

See the difference:

SplashViz.Review.mp4

Please follow the instructions:
You can open both links and see the exact difference by switching the tabs.

Visit Here: ( https://webpack-js-org-git-fork-mr-baraiya-feature-splash-74c8ba-openjs.vercel.app/ and https://webpack.js.org/ )

Please fix it.

…l layout

mr-baraiya · 2026-03-26T18:41:13Z

Apologies for the earlier issues. I’ve tried to align the layout as closely as possible and verified the changes. Please let me know if this looks good, otherwise I understand if the PR needs to be closed.

rahul-kr-rai · 2026-03-26T19:07:39Z

Apologies for the earlier issues. I’ve tried to align the layout as closely as possible and verified the changes. Please let me know if this looks good, otherwise I understand if the PR needs to be closed.

The same issue is still occurring. As per @mr-baraiya, he has been unable to resolve this, so I kindly request @alexander-akait to review and consider closing the PR.

alexander-akait · 2026-03-26T20:19:32Z

@rahul-kr-rai feel free to send your own solution, I will close this when merge the working migration in our main branch

rahul-kr-rai · 2026-03-27T05:37:34Z

@rahul-kr-rai feel free to send your own solution, I will close this when merge the working migration in our main branch

I have raised a PR #8127 to solve this issue.

alexander-akait · 2026-03-27T09:51:39Z

Fixed by #8127

vercel bot deployed to Preview March 22, 2026 17:39 View deployment

rahul-kr-rai suggested changes Mar 22, 2026

View reviewed changes

alexander-akait requested changes Mar 23, 2026

View reviewed changes

vercel bot deployed to Preview March 23, 2026 13:54 View deployment

vercel bot deployed to Preview March 23, 2026 14:06 View deployment

vercel bot deployed to Preview March 23, 2026 16:24 View deployment

vercel bot had a problem deploying to Preview March 25, 2026 19:09 Failure

vercel bot had a problem deploying to Preview March 26, 2026 10:09 Failure

vercel bot deployed to Preview March 26, 2026 10:13 View deployment

rahul-kr-rai reviewed Mar 26, 2026

View reviewed changes

vercel bot had a problem deploying to Preview March 26, 2026 14:38 Failure

vercel bot had a problem deploying to Preview March 26, 2026 14:40 Failure

alexander-akait reviewed Mar 26, 2026

View reviewed changes

vercel bot deployed to Preview March 26, 2026 16:08 View deployment

alexander-akait previously approved these changes Mar 26, 2026

View reviewed changes

mr-baraiya added 3 commits March 26, 2026 16:37

refactor(SplashViz): migrate from SCSS to Tailwind CSS

386bae3

fix(SplashViz): improve heading spacing by adjusting section padding

5a52049

fix(SplashViz): adjust spacing from navbar using section padding

be67067

mr-baraiya added 8 commits March 26, 2026 16:37

fix(SplashViz): match original SCSS spacing using heading margin

7085d2f

fix(SplashViz): match exact heading font size from original site

98371f3

fix(SplashViz): refine heading structure and spacing for improved rea…

7970f44

…dability

fix(SplashViz): align typography, font weight and spacing with webpac…

4fc44d0

…k design

fix(SplashViz): remove unused font dependency and rely on existing fo…

f4738ac

…nt setup

refactor(SplashViz): use clsx for better class management and readabi…

176b794

…lity

fix(SplashViz): resolve import order and named import lint issues

655d10f

refactor(SplashViz): remove clsx and revert to standard

884487f

mr-baraiya force-pushed the feature/splashviz-tailwind branch from e4505ea to 884487f Compare March 26, 2026 16:38

vercel bot deployed to Preview March 26, 2026 16:40 View deployment

fix(SplashViz): center cube relative to SVG container

b8f43e4

mr-baraiya dismissed alexander-akait’s stale review via b8f43e4 March 26, 2026 17:10

vercel bot deployed to Preview March 26, 2026 17:12 View deployment

fix(SplashViz): fine-tune section height and spacing to match origina…

5907501

…l layout

vercel bot deployed to Preview March 26, 2026 18:35 View deployment

fix(SplashViz): adjust text spacing to match original layout

78249d6

vercel bot deployed to Preview March 26, 2026 18:43 View deployment

alexander-akait closed this Mar 27, 2026

mr-baraiya deleted the feature/splashviz-tailwind branch March 27, 2026 15:38

-      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
+className={clsx(
+          "relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16",
+          "bg-[#2b3a42] dark:bg-gray-900",
+          // height utilities
+          "h-[clamp(35rem,calc(100vh-80px),45rem)]",
+          "md:h-[clamp(30rem,calc(100vh-80px),35rem)]",
+          "sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]"
+        )}

Uh oh!

Conversation

mr-baraiya commented Mar 22, 2026

Changes

Notes

Uh oh!

vercel bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rahul-kr-rai left a comment

Choose a reason for hiding this comment

Uh oh!

alexander-akait left a comment

Choose a reason for hiding this comment

Uh oh!

mr-baraiya commented Mar 23, 2026

Uh oh!

alexander-akait commented Mar 23, 2026

Uh oh!

rahul-kr-rai commented Mar 23, 2026

Uh oh!

mr-baraiya commented Mar 23, 2026

Uh oh!

rahul-kr-rai commented Mar 23, 2026

Uh oh!

mr-baraiya commented Mar 25, 2026

Uh oh!

rahul-kr-rai commented Mar 25, 2026

Uh oh!

mr-baraiya commented Mar 26, 2026

Uh oh!

alexander-akait commented Mar 26, 2026

Uh oh!

rahul-kr-rai Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

alexander-akait Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

rahul-kr-rai commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexander-akait Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

alexander-akait commented Mar 26, 2026

Uh oh!

mr-baraiya commented Mar 26, 2026

Uh oh!

alexander-akait commented Mar 26, 2026

Uh oh!

mr-baraiya commented Mar 26, 2026

Uh oh!

rahul-kr-rai commented Mar 26, 2026

Uh oh!

mr-baraiya commented Mar 26, 2026

Uh oh!

rahul-kr-rai commented Mar 26, 2026

Uh oh!

alexander-akait commented Mar 26, 2026

Uh oh!

rahul-kr-rai commented Mar 27, 2026

Uh oh!

alexander-akait commented Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Mar 22, 2026 •

edited

Loading

rahul-kr-rai commented Mar 26, 2026 •

edited

Loading