feat(snippets): add a minimal four-bar visualizer

[Gugedo]

Add a minimal 4-bar visualizer for playback bar

Summary by CodeRabbit

• New Features

  • Added "Minimal 4-Bar Visualizer" snippet — a lightweight, CSS-only four-bar visualizer with preview for the playback bar, providing a compact visual effect for audio playback.

• Updates

  • Removed the "Pill Player and Rounded UI" snippet from available resources.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Replaced a snippet entry in resources/snippets.json: removed the "Pill Player and Rounded UI" snippet and added the "Minimal 4-Bar Visualizer" snippet (title, description, CSS code, keyframes, variables, and a preview asset).

Changes

Cohort / File(s)	Summary
Snippet replacement resources/snippets.json	Removed the "Pill Player and Rounded UI" snippet and inserted the "Minimal 4-Bar Visualizer" snippet (title, description, CSS-only code with variables and keyframes, and preview asset).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• feat(snippets): add Pill Player and Rounded UI #1064: Reintroduces/modifies the same "Pill Player and Rounded UI" snippet entry removed here.

Suggested reviewers

• rxri
• theRealPadster

Poem

🐰 I swapped a pill for four bright bars tonight,
Tiny CSS hops dancing in playback light,
Bars rise and fall in a rhythmic little row,
Minimal beats where soft pixels glow. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main change: adding a minimal four-bar visualizer snippet to the resources.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3e330df and 970fd66.

⛔ Files ignored due to path filters (1)

• resources/assets/snippets/Minimal_visualizer.gif is excluded by !**/*.gif

📒 Files selected for processing (1)

• resources/snippets.json

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: rxri
Repo: spicetify/marketplace PR: 1064
File: resources/snippets.json:539-539
Timestamp: 2025-12-06T15:28:17.086Z
Learning: In resources/snippets.json, CSS code must be minified and placed in the "code" variable as a single-line string. This is a project requirement, not a code quality issue.

📚 Learning: 2025-12-06T15:28:17.086Z

Learnt from: rxri
Repo: spicetify/marketplace PR: 1064
File: resources/snippets.json:539-539
Timestamp: 2025-12-06T15:28:17.086Z
Learning: In resources/snippets.json, CSS code must be minified and placed in the "code" variable as a single-line string. This is a project requirement, not a code quality issue.

Applied to files:

• resources/snippets.json

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Fix the preview asset path to follow project conventions.

The preview path is inconsistent with all other snippets in this file. Every other snippet uses the format resources/assets/snippets/[descriptive-name].[ext], but this one uses just preview.gif. This will likely result in a broken preview image in the Marketplace UI.

🔎 Suggested fix

-    "preview": "preview.gif"
+    "preview": "resources/assets/snippets/minimal-4-bar-visualizer.gif"

Make sure the actual preview asset file is placed at the correct path in the repository.

Note: The CSS code is correctly minified as a single-line string per project requirements. Based on learnings, this is the expected format for the "code" field.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	{
	"title": "Minimal 4-Bar Visualizer",
	"description": "A minimalist, CSS-only 4-bar visualizer for the playback bar.",
	"code": ":root { --viz-color: var(--spice-button-active); --viz-speed: 0.8s; --viz-width: 18px; --viz-height: 20px; --viz-bar-w: 3px; --viz-off-y: -4px; } .main-nowPlayingBar-extraControls::before { content: ""; display: flex; width: var(--viz-width); height: var(--viz-height); margin-right: 15px; transform: translateY(var(--viz-off-y)); background-image: linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)); background-position: 0% 100%, 33% 100%, 66% 100%, 100% 100%; background-repeat: no-repeat; background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 80%, var(--viz-bar-w) 30%, var(--viz-bar-w) 60%; animation: organicBounce var(--viz-speed) infinite linear; transition: background-size 0.3s ease; } @keyframes organicBounce { 0% { background-size: var(--viz-bar-w) 70%, var(--viz-bar-w) 100%, var(--viz-bar-w) 10%, var(--viz-bar-w) 40%; } 9% { background-size: var(--viz-bar-w) 85%, var(--viz-bar-w) 85%, var(--viz-bar-w) 25%, var(--viz-bar-w) 55%; } 18% { background-size: var(--viz-bar-w) 100%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%; } 27% { background-size: var(--viz-bar-w) 85%, var(--viz-bar-w) 55%, var(--viz-bar-w) 55%, var(--viz-bar-w) 85%; } 36% { background-size: var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 100%; } 45% { background-size: var(--viz-bar-w) 55%, var(--viz-bar-w) 25%, var(--viz-bar-w) 85%, var(--viz-bar-w) 85%; } 54% { background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 10%, var(--viz-bar-w) 100%, var(--viz-bar-w) 70%; } 63% { background-size: var(--viz-bar-w) 25%, var(--viz-bar-w) 25%, var(--viz-bar-w) 85%, var(--viz-bar-w) 55%; } 72% { background-size: var(--viz-bar-w) 10%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%; } 81% { background-size: var(--viz-bar-w) 25%, var(--viz-bar-w) 55%, var(--viz-bar-w) 55%, var(--viz-bar-w) 25%; } 90% { background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 10%; } 100% { background-size: var(--viz-bar-w) 55%, var(--viz-bar-w) 85%, var(--viz-bar-w) 25%, var(--viz-bar-w) 25%; } } .main-nowPlayingBar-container:has( button[data-testid="control-button-playpause"] path[d^="M3"], button[data-testid="control-button-playpause"] path[d^="M11"], button[aria-label*="Play"] ) .main-nowPlayingBar-extraControls::before { background-size: var(--viz-bar-w) 2px, var(--viz-bar-w) 2px, var(--viz-bar-w) 2px, var(--viz-bar-w) 2px !important; animation: none !important; opacity: 0.8; }",
	"preview": "preview.gif"
	}
	{
	"title": "Minimal 4-Bar Visualizer",
	"description": "A minimalist, CSS-only 4-bar visualizer for the playback bar.",
	"code": ":root { --viz-color: var(--spice-button-active); --viz-speed: 0.8s; --viz-width: 18px; --viz-height: 20px; --viz-bar-w: 3px; --viz-off-y: -4px; } .main-nowPlayingBar-extraControls::before { content: ""; display: flex; width: var(--viz-width); height: var(--viz-height); margin-right: 15px; transform: translateY(var(--viz-off-y)); background-image: linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)), linear-gradient(var(--viz-color), var(--viz-color)); background-position: 0% 100%, 33% 100%, 66% 100%, 100% 100%; background-repeat: no-repeat; background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 80%, var(--viz-bar-w) 30%, var(--viz-bar-w) 60%; animation: organicBounce var(--viz-speed) infinite linear; transition: background-size 0.3s ease; } @keyframes organicBounce { 0% { background-size: var(--viz-bar-w) 70%, var(--viz-bar-w) 100%, var(--viz-bar-w) 10%, var(--viz-bar-w) 40%; } 9% { background-size: var(--viz-bar-w) 85%, var(--viz-bar-w) 85%, var(--viz-bar-w) 25%, var(--viz-bar-w) 55%; } 18% { background-size: var(--viz-bar-w) 100%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%; } 27% { background-size: var(--viz-bar-w) 85%, var(--viz-bar-w) 55%, var(--viz-bar-w) 55%, var(--viz-bar-w) 85%; } 36% { background-size: var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 100%; } 45% { background-size: var(--viz-bar-w) 55%, var(--viz-bar-w) 25%, var(--viz-bar-w) 85%, var(--viz-bar-w) 85%; } 54% { background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 10%, var(--viz-bar-w) 100%, var(--viz-bar-w) 70%; } 63% { background-size: var(--viz-bar-w) 25%, var(--viz-bar-w) 25%, var(--viz-bar-w) 85%, var(--viz-bar-w) 55%; } 72% { background-size: var(--viz-bar-w) 10%, var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%; } 81% { background-size: var(--viz-bar-w) 25%, var(--viz-bar-w) 55%, var(--viz-bar-w) 55%, var(--viz-bar-w) 25%; } 90% { background-size: var(--viz-bar-w) 40%, var(--viz-bar-w) 70%, var(--viz-bar-w) 40%, var(--viz-bar-w) 10%; } 100% { background-size: var(--viz-bar-w) 55%, var(--viz-bar-w) 85%, var(--viz-bar-w) 25%, var(--viz-bar-w) 25%; } } .main-nowPlayingBar-container:has( button[data-testid="control-button-playpause"] path[d^="M3"], button[data-testid="control-button-playpause"] path[d^="M11"], button[aria-label*="Play"] ) .main-nowPlayingBar-extraControls::before { background-size: var(--viz-bar-w) 2px, var(--viz-bar-w) 2px, var(--viz-bar-w) 2px, var(--viz-bar-w) 2px !important; animation: none !important; opacity: 0.8; }",
	"preview": "resources/assets/snippets/minimal-4-bar-visualizer.gif"
	}

🤖 Prompt for AI Agents

In resources/snippets.json around lines 542 to 547, the "preview" field uses
"preview.gif" which doesn't follow the project's convention and will break the
Marketplace preview; update the preview path to follow the pattern
resources/assets/snippets/[descriptive-name].[ext] (e.g.
resources/assets/snippets/minimal-4-bar-visualizer.gif) and add/place the actual
GIF at that path in the repo so the preview resolves correctly.

[Gugedo]

i dont understand why lint code failed

[rxri]

Because you do escaping with " inside the quotes and it breaks it. Use ' inside the code instead

[Gugedo]

thanks rxri for the help

[rxri]

Run formatter on this still (npm dlx biome --write resources/snippets.json)