UI/UX design skill cho Hiu platform - nền tảng nghe nhạc và chia sẻ ảnh multi-user. Dùng khi tạo component giao diện, trang player nhạc, gallery ảnh, feed, profile, dark theme, animations. Tích hợp React Bits, Lucide Icons, Framer Motion, và design system tối màu phong cách Spotify/Apple Music.
Platform nghe nhạc + chia sẻ ảnh multi-user. Phong cách: dark, glassmorphism, immersive — lấy cảm hứng từ Spotify, Apple Music, Instagram.
| Thư viện | Mục đích | Install |
|---|---|---|
react-bits | Animated UI components | npx shadcn@latest add https://reactbits.dev/r/<Name>-TS-TW |
lucide-react | Icons | pnpm add lucide-react |
framer-motion | Layout animations, transitions | pnpm add framer-motion |
gsap | Timeline animations (waveform, player) | pnpm add gsap |
use-sound | Audio playback hooks | pnpm add use-sound |
react-h5-audio-player | Audio player UI base | pnpm add react-h5-audio-player |
@radix-ui/react-slider | Volume / progress slider accessible | pnpm add @radix-ui/react-slider |
@radix-ui/react-dialog | Modal / lightbox | pnpm add @radix-ui/react-dialog |
@radix-ui/react-tooltip | Tooltips | pnpm add @radix-ui/react-tooltip |
react-intersection-observer | Lazy load / scroll reveal | pnpm add react-intersection-observer |
react-virtuoso | Virtual scroll cho feed dài | pnpm add react-virtuoso |
sharp | Image optimization (server) | pnpm add sharp |
# Backgrounds
npx shadcn@latest add https://reactbits.dev/r/Aurora-TS-TW # Trang landing / hero
npx shadcn@latest add https://reactbits.dev/r/Silk-TS-TW # Background player
npx shadcn@latest add https://reactbits.dev/r/Waves-TS-TW # Visualizer đơn giản
npx shadcn@latest add https://reactbits.dev/r/Threads-TS-TW # Background feed
# UI Components
npx shadcn@latest add https://reactbits.dev/r/Masonry-TS-TW # Photo gallery grid
npx shadcn@latest add https://reactbits.dev/r/SpotlightCard-TS-TW # Music card / Photo card
npx shadcn@latest add https://reactbits.dev/r/TiltedCard-TS-TW # Album art card
npx shadcn@latest add https://reactbits.dev/r/ProfileCard-TS-TW # User profile card
npx shadcn@latest add https://reactbits.dev/r/GlassSurface-TS-TW # Player bar / Modal
npx shadcn@latest add https://reactbits.dev/r/Dock-TS-TW # Mobile bottom nav
npx shadcn@latest add https://reactbits.dev/r/CircularGallery-TS-TW # Featured photos
npx shadcn@latest add https://reactbits.dev/r/AnimatedList-TS-TW # Playlist / Queue
npx shadcn@latest add https://reactbits.dev/r/MagicBento-TS-TW # Dashboard bento grid
npx shadcn@latest add https://reactbits.dev/r/ScrollStack-TS-TW # Featured tracks scroll
npx shadcn@latest add https://reactbits.dev/r/FlyingPosters-TS-TW # Album posters hero
# Text Animations
npx shadcn@latest add https://reactbits.dev/r/ShinyText-TS-TW # Track title highlight
npx shadcn@latest add https://reactbits.dev/r/BlurText-TS-TW # Page transitions
npx shadcn@latest add https://reactbits.dev/r/GradientText-TS-TW # Logo / Headings
# Animations / Effects
npx shadcn@latest add https://reactbits.dev/r/FadeContent-TS-TW # Page fade in
npx shadcn@latest add https://reactbits.dev/r/GlareHover-TS-TW # Album art hover
npx shadcn@latest add https://reactbits.dev/r/ClickSpark-TS-TW # Like button spark
npx shadcn@latest add https://reactbits.dev/r/Magnet-TS-TW # Play button magnet
npx shadcn@latest add https://reactbits.dev/r/SplashCursor-TS-TW # Custom cursor
# Cần gsap
npx shadcn@latest add https://reactbits.dev/r/ScrollVelocity-TS-TW # Artist name marquee
npx shadcn@latest add https://reactbits.dev/r/FlowingMenu-TS-TW # Genre menu
# Cần three/ogl
npx shadcn@latest add https://reactbits.dev/r/Iridescence-TS-TW # Album art effect
npx shadcn@latest add https://reactbits.dev/r/LiquidChrome-TS-TW # Premium header bg
Mở rộng tailwind.config.ts: