Templates Music

Top 7 key effects

Music artist website with player, discography and tour dates.

NOVA

Neon Flicker Text

Where: Hero section (title)

Artist title flickers like neon alternating luminous shadow and absence. Immediately creates club/concert vibe and captures visitor attention.

animation: neonFlicker 5s infinite + text-shadow multi-couches Explore Text & Typography →

Equalizer Anime

Where: Player section

Equalizer bars move up and down rhythmically under player. Gives illusion music plays in real-time and reinforces visual audio immersion.

animation: equalizer 0.5s ease-in-out infinite + animation-delay Explore Data & Visualization →

Gradient Text Logo

Where: Logo + section titles

Logo and titles use pink-purple gradient with background-clip: text. Strengthens artist visual identity with premium effect without overloading.

background: linear-gradient() + -webkit-background-clip: text Explore Text & Typography →
Hover me

Album Card Hover

Where: Discography section

Album cards rise with pink shadow on hover, and play button appears in scale. Clearly indicates each album is interactive and clickable.

transform: translateY(-10px) + box-shadow rgba(236,72,153,0.2) Explore Hover & Interactions →
1:24 / 4:02

Progress Bar Gradient

Where: Player section

Progress bar uses pink-purple gradient with luminous cursor. Makes player visually attractive and gives clear feedback on playback position.

background: linear-gradient(90deg, pink, violet) + ::after glow Explore Data & Visualization →

Floating Particles

Where: Hero section (background)

Dozens of pink and purple particles float in hero background. Creates lively and immersive atmosphere typical of electronic music universe.

animation: float + position: absolute + JS createElement Explore Atmosphere →

Radial Gradient BG

Where: Hero + Player (background)

Pink and purple radial halos subtly illuminate dark background. Adds depth without distracting from content — like concert stage lighting.

radial-gradient(circle, rgba(236,72,153,0.15), transparent) Explore Backgrounds →