Glowing Pulsing Form
Inputs · @zanina-yassine
- GPU-friendly
- No JS
- Reduced-motion ready
Spotify Music Form
A pure-CSS form with pulse and SVG effects, animating only GPU-friendly properties. Created by ahmed150up on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.1 KB gzip
Created by @ahmed150up on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Bare element selectors scoped to .audio-player with :where() by PasteMotion (specificity unchanged).
- Customisable properties (--accent, --color-2, --color-3, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Spotify Music Form" by ahmed150up on Uiverse.io · MIT License · https://uiverse.io/ahmed150up/quiet-goat-67 -->
<div class="audio-player">
<div class="album-cover"></div>
<div class="player-controls">
<div class="song-info">
<div class="song-title">Song Title</div>
<p class="artist">Artist</p>
</div>
<div class="progress-bar">
<div class="progress"></div>
</div>
<div class="buttons">
<button class="play-btn"><svg viewBox="0 0 16 16" class="bi bi-play-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path> </svg></button>
<button class="pause-btn"><svg viewBox="0 0 16 16" class="bi bi-pause-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path> </svg></button>
</div>
</div>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--accent, --color-2, --color-3, --speed) on .audio-player to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Otp Verify Form
Inputs · @reshades
- No JS
- Reduced-motion ready
Pause Play Form
Inputs · @ahmed150up
- No JS
- Reduced-motion ready
3D Gradient Form
Inputs · @aboalsim114
- No JS
Gradient Glowing Input
Inputs · @Mythsoul
- No JS
- Reduced-motion ready
Search Pulsing Input
Inputs · @boryanakrasteva
- No JS
- Reduced-motion ready