Motion Design System

Brand Identity & Component Library

01. Color Palette

Accent Green
Hex: #1DB954
Var: --Musify-green
Background Black
Hex: #121212
Var: --Musify-black
Surface Dark
Hex: #212121
Var: --Musify-dark-gray
Text White
Hex: #FFFFFF
Var: --text-white

02. Typography

Display H1

Heading H2

Heading H3

Lead Body Text: Rhythm is everything.

Small body text used for descriptions and metadata.

CSS Font Stack 
font-family: 'Inter', sans-serif;
font-weight: 900; /* Headers */
font-weight: 400; /* Body */

03. Motion Component: System Preloader

A "curtain-reveal" loading state that masks the UI until assets are ready. Includes a rhythmic bar animation to indicate system activity.

TUNING IN...
HTML Structure 
<div class="preloader">
  <div class="loader-bar-container">
    
     <div class="loader-bar"></div>...
  </div>
  <div class="loader-text">TUNING IN...</div>
</div>
GSAP Exit Sequence 
// Triggered on window.load
masterTl
  .to(".loader-text", { y: -50, opacity: 0 }) 
  .to(".preloader", { 
      yPercent: -100, // Slide up like a curtain
      duration: 1.2, 
      ease: "power4.inOut" 
  });

04. Motion Component: Magnetic Button

A button that physically tracks the cursor movement before click to increase affordance.

Hover Me
GSAP Implementation 
// Javascript (GSAP)
magnetBtn.addEventListener('mousemove', (e) => {
  const bound = magnetBtn.getBoundingClientRect();
  const x = (e.clientX - centerX) * 0.3; // 0.3 = resistance
  const y = (e.clientY - centerY) * 0.3;
  
  gsap.to(magnetBtn, {
      x: x, 
      y: y, 
      duration: 0.3 
  });
});

05. Motion Component: Content Card

Hover interaction featuring image scale, overlay fade, and icon spring-up.

Artist image
HTML Structure 
<div class="card-wrapper">
  <div class="artist-card">
    <img src="..." class="artist-img">
    <div class="play-overlay">
       <!-- Icon -->
    </div>
  </div>
</div>
GSAP Timeline 
// Hover Timeline (Choreography)
const hoverTl = gsap.timeline({ paused: true });

hoverTl
  .to(img, { scale: 1.05, duration: 0.4 }, 0)
  .to(overlay, { opacity: 1 }, 0)
  .fromTo(icon, 
     { y: 50, scale: 0.8 }, 
     { y: 0, scale: 1, ease: "back.out(1.7)" }, 0.1);

06. Background: Aura Orbs

Animated gradient orbs using CSS Blur and Keyframes to create a "breathing" ambient background.

Ambient
Motion

CSS Animation 
/* The Blur Filter creates the Aura */
.orb {
    filter: blur(80px);
    animation: float 10s infinite ease-in-out alternate;
}

/* Floating Keyframes */
@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, 50px) scale(1.1); }
    100% { transform: translate(-20px, -30px) scale(1); }
}

07. Interaction: Horizontal Scroll

Converts vertical scroll energy into horizontal translation using Sticky Positioning and Vanilla JS math.

Vanilla JS Logic 
// 1. Calculate scroll percentage (0 to 1) based on section height
let percentage = (scrollY - sectionTop) / (sectionHeight - windowHeight);

// 2. Determine how much "overflow" width exists
const trackWidth = track.scrollWidth;
const maxScroll = trackWidth - window.innerWidth;

// 3. Translate track horizontally
const x = percentage * maxScroll;
track.style.transform = `translate3d(-${x}px, 0, 0)`;