TikTok DESIGN.md

1. Visual Theme & Atmosphere

Core Identity

TikTok's design is bold, immersive, and unapologetically Gen-Z. The interface disappears to let content shine—video is the hero, and everything else exists to amplify creator expression.

Design Philosophy

• Content-First: The UI is invisible until needed. Full-screen video dominates.
• Effortless Discovery: Endless vertical scroll removes friction from content consumption.
• Playful Energy: The signature cyan-pink gradient injects life and movement.
• Creator-Centric: Every element celebrates and empowers creators.
• Instant Gratification: One-tap interactions, swipe navigation, zero loading states.

Mood & Feeling

Visual Metaphors

• The Stage: Every video is a performance; the interface is the darkened theater.
• The Pulse: Interactions glow and animate like a heartbeat.
• The Scroll: An infinite reel of entertainment, like flipping channels at light speed.

2. Color Palette & Roles

Primary Colors

Extended Palette

The Signature Gradient

css/* TikTok Gradient - The Brand Pulse */
background: linear-gradient(135deg, #25F4EE 0%, #FE2C55 100%);

/* Animated Variant */
background: linear-gradient(90deg, #25F4EE, #FE2C55, #25F4EE);
background-size: 200% 100%;
animation: gradient-shift 3s ease infinite;

Color Roles

Glow Effects

css/* Pink Glow - Likes, Hearts */
box-shadow: 0 0 20px rgba(254, 44, 85, 0.6);

/* Cyan Glow - Secondary Highlights */
box-shadow: 0 0 20px rgba(37, 244, 238, 0.6);

/* Dual Glow - Special States */
box-shadow: 
  -3px 0 15px rgba(37, 244, 238, 0.5),
  3px 0 15px rgba(254, 44, 85, 0.5);

3. Typography Rules

Font Stack

cssfont-family: 'TikTok Sans', 'Proxima Nova', -apple-system, BlinkMacSystemFont, 
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

Type Scale

Typography Styles

css/* Username - Bold, Attention-Grabbing */
.username {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
}

/* Handle - Secondary, Subtle */
.handle {
  font-size: 14px;
  font-weight: 400;
  color: #AAAAAA;
}

/* Video Description - Readable, Truncatable */
.description {
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Hashtag - Interactive, Highlighted */
.hashtag {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
}

/* Engagement Count - Compact, Bold */
.count {
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
}

/* Sound Name - Marquee Style */
.sound-name {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
}

Text Treatment Rules

1. Usernames: Always white, always bold
2. Descriptions: Max 2 lines on feed, expandable on tap
3. Hashtags: Bold weight, no # color differentiation needed
4. Numbers: Use compact notation (1.2M, 45.3K)
5. Timestamps: Relative time (2h ago, 3d)

4. Component Stylings

Video Container

css.video-container {
  width: 100%;
  height: 100vh;
  background: #000000;
  position: relative;
  overflow: hidden;
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Action Bar (Right Side)

css.action-bar {
  position: absolute;
  right: 12px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.action-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.action-count {
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

Like Button States

css/* Default */
.like-button {
  color: #FFFFFF;
  transition: all 0.2s ease;
}

/* Liked - Pink with Glow */
.like-button.active {
  color: #FE2C55;
  filter: drop-shadow(0 0 8px rgba(254, 44, 85, 0.8));
  animation: like-pop 0.3s ease;
}

@keyframes like-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

Creator Profile Avatar

css.creator-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  position: relative;
}

.follow-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #FE2C55;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #FFFFFF;
  border: 2px solid #000000;
}

Follow Button

css/* Default - Follow */
.follow-button {
  background: #FE2C55;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  min-width: 88px;
}

/* Following State */
.follow-button.following {
  background: #2F2F2F;
  border: 1px solid #FFFFFF;
}

/* Friends State */
.follow-button.friends {
  background: transparent;
  border: 1px solid #FFFFFF;
}

Sound/Music Indicator

css.sound-indicator {
  position: absolute;
  bottom: 20px;
  left: 12px;
  right: 80px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.music-icon {
  width: 16px;
  height: 16px;
  color: #FFFFFF;
}

.sound-name {
  flex: 1;
  overflow: hidden;
}

.sound-marquee {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 8s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.spinning-disc {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

Bottom Navigation

css.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid #1A1A1A;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #FFFFFF;
  opacity: 0.6;
}

.nav-item.active {
  opacity: 1;
}

.nav-item-label {
  font-size: 10px;
  font-weight: 500;
}

/* Create Button - Center, Gradient */
.create-button {
  width: 48px;
  height: 32px;
  border-radius: 8px;
  background: #FFFFFF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-button::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 48px;
  border-radius: 8px;
  background: #25F4EE;
  z-index: -1;
}

.create-button::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 48px;
  border-radius: 8px;
  background: #FE2C55;
  z-index: -2;
}

.create-icon {
  font-size: 24px;
  font-weight: 300;
  color: #000000;
}

Comments Modal

css.comments-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh;
  background: #121212;
  border-radius: 12px 12px 0 0;
  animation: slide-up 0.3s ease;
}

.comments-header {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid #2A2A2A;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.comment-content {
  flex: 1;
}

.comment-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

Search & Discovery

css.search-bar {
  background: #2A2A2A;
  border-radius: 4px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 16px;
  flex: 1;
}

.search-input::placeholder {
  color: #666666;
}

.trending-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #1A1A1A;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
}

Creator Profile Page

css.profile-header {
  padding: 20px;
  text-align: center;
}

.profile-avatar-large {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 12px;
}

.profile-username {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 16px 0;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
}

.stat-label {
  font-size: 12px;
  color: #AAAAAA;
}

.profile-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.message-button {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid #2F2F2F;
  background: transparent;
  color: #FFFFFF;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.video-thumbnail {
  aspect-ratio: 9/16;
  background: #1A1A1A;
  position: relative;
}

.thumbnail-views {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 12px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 4px;
}

5. Layout Principles

Feed Layout (For You Page)

+---------------------------+
|    Status Bar (System)    |
+---------------------------+
| For You | Following  [Q]  |  <- Tab Bar
+---------------------------+
|                           |
|                           |
|                           |
|    FULL SCREEN VIDEO      |
|         (100vh)           |
|                           |
|           [Avatar]        |  <- Right: Action Bar
|           [Heart]         |     (Profile, Like,
|           [Comment]       |      Comment, Bookmark,
|           [Bookmark]      |      Share)
|           [Share]         |
|                           |
| @username                 |
| Description text...       |  <- Bottom Left: Info
| #hashtag #viral           |
| [Music Icon] Song Name    |
|                           |
+---------------------------+
| [Home][Discover][+][Inbox]|  <- Bottom Nav
|        [Profile]          |
+---------------------------+

Spacing System

css--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-2xl: 24px;
--spacing-3xl: 32px;

Safe Zones

css/* Video Content Safe Area */
.video-safe-area {
  /* Keep important video content away from UI overlays */
  padding-top: 80px;      /* Status bar + tabs */
  padding-bottom: 180px;  /* Video info + nav */
  padding-right: 60px;    /* Action bar */
  padding-left: 16px;
}

/* Action Bar Positioning */
.action-bar {
  right: 12px;
  bottom: calc(56px + 120px); /* nav height + info height */
}

/* Video Info Positioning */
.video-info {
  left: 12px;
  right: 80px;
  bottom: calc(56px + 20px); /* nav + padding */
}

Grid Systems

css/* Profile Video Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* Discovery Grid - Mixed */
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px;
}

/* Comments List */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 0; /* Items handle their own spacing */
}

Scroll Behavior

css/* Vertical Video Scroll - Snap to Each Video */
.feed-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.video-container {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100vh;
}

/* Horizontal Tab Scroll */
.tabs-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.tab {
  scroll-snap-align: center;
}

Z-Index Layers

css--z-video: 1;
--z-overlay: 10;
--z-action-bar: 20;
--z-video-info: 20;
--z-header: 30;
--z-bottom-nav: 30;
--z-modal-backdrop: 40;
--z-modal: 50;
--z-toast: 60;
--z-loading: 70;

6. Depth & Elevation

Shadow System

TikTok uses minimal shadows in favor of darkness and glow effects.

css/* Text Shadow - For legibility on video */
.text-overlay {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Icon Shadow - Subtle depth */
.icon-overlay {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Modal Shadow */
.modal {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

/* Card Shadow (Light Mode) */
.card-light {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Glow Effects (Signature)

css/* Like Glow */
.like-active {
  filter: drop-shadow(0 0 8px rgba(254, 44, 85, 0.8));
}

/* Cyan Accent Glow */
.cyan-glow {
  filter: drop-shadow(0 0 8px rgba(37, 244, 238, 0.8));
}

/* Dual Brand Glow */
.brand-glow {
  box-shadow: 
    -4px 0 12px rgba(37, 244, 238, 0.5),
    4px 0 12px rgba(254, 44, 85, 0.5);
}

/* Pulsing Glow Animation */
@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(254, 44, 85, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(254, 44, 85, 0.9));
  }
}

Blur Effects

css/* Background Blur - Modals */
.modal-backdrop {
  backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.7);
}

/* Frosted Glass Effect */
.glass-surface {
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Video Blur - Loading State */
.video-blur {
  filter: blur(20px);
  transform: scale(1.1);
}

Elevation Hierarchy

7. Do's and Don'ts

Do's

Content & Layout

• Let video content be the hero - UI should complement, not compete
• Use full-screen, edge-to-edge video display
• Implement snap scrolling for seamless feed navigation
• Keep action buttons within thumb reach (bottom-right)
• Use vertical aspect ratio (9:16) as the primary format

Color & Branding

• Use the cyan-pink gradient sparingly for maximum impact
• Apply glow effects to active states (likes, notifications)
• Maintain high contrast for text overlays on video
• Default to dark mode - it's the native experience
• Use pure black (#000000) for true OLED blacks

Typography

• Keep usernames bold and prominent
• Truncate long descriptions with "...more" expansion
• Use compact number notation (1.2M, not 1,200,000)
• Ensure text shadows for legibility on any video background

Interactions

• Double-tap to like - make it feel rewarding
• Animate the heart with scale and glow
• Use haptic feedback on key interactions
• Auto-play videos on scroll (muted by default on web)
• Show loading states that don't interrupt content flow

Creator Focus

• Make follow buttons highly visible and accessible
• Show creator profile pics with clear tap targets
• Display engagement counts prominently
• Highlight music/sound usage with spinning disc animation

Don'ts

Content & Layout

• Don't use horizontal video layouts in the main feed
• Don't obscure video content with heavy UI overlays
• Don't use pagination - always infinite scroll
• Don't show empty states without engaging content
• Don't break the immersive full-screen experience

Color & Branding

• Don't overuse the gradient - it loses impact
• Don't use competing accent colors
• Don't apply glow effects to inactive states
• Don't use light backgrounds in the main feed
• Don't use gray or muted versions of brand colors

Typography

• Don't use small, hard-to-read text over video
• Don't display full numbers (show 1.2M not 1,200,000)
• Don't wrap usernames to multiple lines
• Don't use decorative fonts
• Don't center-align body text or descriptions

Interactions

• Don't require multiple taps for common actions
• Don't use boring, static interactions
• Don't show intrusive loading spinners
• Don't interrupt video playback unnecessarily
• Don't use slow, heavy animations

Creator Focus

• Don't hide creator information
• Don't make following require multiple steps
• Don't deprioritize engagement indicators
• Don't use generic placeholder avatars
• Don't separate sound/music from its creator context

Common Pitfalls

8. Responsive Behavior

Breakpoints

css/* TikTok is mobile-first, with desktop as secondary */
--breakpoint-mobile: 480px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-wide: 1280px;

Mobile (Primary - < 768px)

css.feed-mobile {
  /* Full-screen, single-column video feed */
  width: 100vw;
  height: 100vh;
}

.video-container-mobile {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

.action-bar-mobile {
  position: absolute;
  right: 12px;
  bottom: 120px;
}

.bottom-nav-mobile {
  position: fixed;
  bottom: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
}

Tablet (768px - 1024px)

css.feed-tablet {
  /* Centered video with side margins */
  max-width: 500px;
  margin: 0 auto;
  height: 100vh;
}

.video-container-tablet {
  border-radius: 12px;
  margin: 8px;
  height: calc(100vh - 16px);
}

.bottom-nav-tablet {
  max-width: 500px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
}

Desktop (> 1024px)

css.layout-desktop {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  height: 100vh;
}

/* Left Sidebar Navigation */
.sidebar-left {
  background: #121212;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item-desktop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 18px;
}

.nav-item-desktop:hover {
  background: #2A2A2A;
}

/* Center Feed - Constrained Width */
.feed-desktop {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
}

.video-container-desktop {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9/16;
  max-height: calc(100vh - 100px);
}

/* Right Sidebar - Suggestions */
.sidebar-right {
  background: #121212;
  padding: 20px;
}

Container Queries (Modern)

css@container feed (max-width: 480px) {
  .video-info {
    padding: 12px;
    font-size: 14px;
  }
  
  .action-bar {
    gap: 16px;
  }
}

@container feed (min-width: 481px) {
  .video-info {
    padding: 20px;
    font-size: 16px;
  }
  
  .action-bar {
    gap: 24px;
  }
}

Touch vs Mouse Adaptation

css/* Touch Devices - Larger Targets */
@media (pointer: coarse) {
  .action-button {
    min-width: 44px;
    min-height: 44px;
  }
  
  .follow-button {
    padding: 10px 20px;
  }
}

/* Mouse Devices - Hover States */
@media (hover: hover) {
  .action-button:hover {
    transform: scale(1.1);
  }
  
  .video-thumbnail:hover .play-overlay {
    opacity: 1;
  }
  
  .follow-button:hover {
    background: #E01E4A;
  }
}

Safe Areas

css/* iOS Notch & Home Indicator */
.video-container {
  padding-top: env(safe-area-inset-top);
}

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Android Navigation */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
  }
}

9. Agent Prompt Guide

Core Design Prompt

You are designing a TikTok-style interface. Follow these principles:

VISUAL IDENTITY:
- Dark mode native: Primary black (#000000), surfaces (#121212)
- Signature gradient: Cyan (#25F4EE) to Pink (#FE2C55)
- Full-screen, video-first, immersive experience
- Content is the hero - UI should be minimal and supportive

LAYOUT:
- Vertical scroll, snap-to-video navigation
- Right-side action bar (like, comment, share, bookmark)
- Bottom left video info (username, description, sound)
- Bottom navigation with centered create button
- Mobile-first, 9:16 aspect ratio focus

INTERACTIONS:
- Double-tap to like with heart animation and glow
- Swipe up/down to navigate between videos
- Tap to pause/play video
- All interactions should feel instant and rewarding

TYPOGRAPHY:
- TikTok Sans or system fonts
- Bold usernames, compact engagement numbers
- Text shadows for legibility on video
- Max 2 lines for descriptions with expand option

Component Generation Prompts

Video Feed Card

Create a TikTok video feed component:
- Full viewport height, edge-to-edge video
- Black background (#000000) with video covering full area
- Right action bar: avatar (48px), like, comment, bookmark, share
- Like count with glow effect when active (#FE2C55)
- Bottom left: @username (bold), description (2 lines max), sound with marquee
- Spinning album cover for sound indicator
- All text with drop shadow for video legibility

Engagement Button

Create a TikTok action button (like/comment/share):
- Vertical stack: icon (24px) + count below
- White icons with drop-shadow on dark video
- Active state: color fill + glow effect
- Like: #FE2C55 with scale+glow animation
- Touch target minimum 44px
- Count in compact notation (1.2K, 3.4M)

Create Button (Plus)

Create the TikTok plus/create button:
- Rectangle with rounded corners (48x32px)
- White center layer with "+" icon
- Cyan layer offset left (-3px)
- Pink layer offset right (+3px)
- Creates layered 3D gradient effect
- Icon is black on white background

Follow Button

Create TikTok follow button:
- Default: #FE2C55 background, white text "Follow"
- Following: #2F2F2F background, white border, "Following"
- Friends: transparent, white border, "Friends"
- Min width 88px, height 36px, border-radius 4px
- Bold text, 14px font size

Sound/Music Bar

Create TikTok sound indicator:
- Music note icon (16px)
- Sound name with marquee animation (8s loop)
- Spinning album art disc on right (44px)
- White text with subtle shadow
- Positioned bottom left, above navigation

Layout Generation Prompts

For You Page

Create TikTok For You page layout:
- Full screen video container (100vh)
- Top tabs: "For You | Following" with underline indicator
- Search icon top right
- Video snaps to viewport on scroll
- Action bar positioned right, thumb-reachable
- Video info positioned bottom left
- Bottom navigation: Home, Discover, Create(+), Inbox, Profile
- Create button uses signature cyan-pink layered style

Profile Page

Create TikTok profile page:
- Header with large avatar (96px), username, handle
- Stats row: Following, Followers, Likes (centered)
- Action row: Follow button, Message icon, Arrow icon
- Tab bar: Videos, Liked, Bookmarks (with icons)
- 3-column grid of video thumbnails
- Each thumbnail shows view count with play icon
- 9:16 aspect ratio for thumbnails
- 2px gap between grid items

Comments Modal

Create TikTok comments bottom sheet:
- Slides up from bottom, 60% viewport height
- Dark surface (#121212) with rounded top corners
- Header: "X comments" centered, X close button
- Comment list with avatar (36px), username, text, time
- Like button per comment with count
- Reply functionality
- Bottom input: avatar, text field, emoji, send button

Animation Specifications

TikTok Animation Guidelines:

LIKE ANIMATION:
- Scale from 1 → 1.3 → 1 (0.3s ease)
- Add glow: drop-shadow(0 0 8px rgba(254, 44, 85, 0.8))
- Optional: spawn floating hearts from tap point

SCROLL SNAP:
- scroll-snap-type: y mandatory
- scroll-snap-align: start
- scroll-snap-stop: always
- Smooth momentum scrolling

SOUND MARQUEE:
- translateX from 0% to -50% (8s linear infinite)
- Duplicate text for seamless loop

SPINNING DISC:
- rotate 360deg (3s linear infinite)
- Pause animation when video paused

MODAL SLIDE:
- translateY from 100% to 0 (0.3s ease-out)
- Backdrop fade from 0 to 0.7

FOLLOW BUTTON:
- Background transition (0.2s ease)
- Optional subtle scale on press (0.95)

State Handling

TikTok State Patterns:

VIDEO STATES:
- Loading: blurred thumbnail with subtle pulse
- Playing: no UI indicator (full immersion)
- Paused: play icon center, UI stays visible
- Error: retry button with message

LIKE STATES:
- Default: white heart outline
- Liked: filled pink heart with glow, animated pop
- Processing: subtle pulse animation

FOLLOW STATES:
- Not following: pink "Follow" button
- Following: gray "Following" button
- Mutual: outline "Friends" button
- Processing: loading spinner in button

COMMENT STATES:
- Default: comment icon with count
- New comments: subtle dot indicator
- Loading: skeleton comments
- Empty: "Be the first to comment"

SOUND STATES:
- Playing: spinning disc, marquee active
- Muted: mute icon overlay
- No sound: hide sound bar entirely

Accessibility Notes

TikTok Accessibility Requirements:

CONTRAST:
- Text overlays must have shadows for video legibility
- Minimum 4.5:1 contrast for essential UI
- Active states clearly distinguishable

TOUCH TARGETS:
- Minimum 44x44px for all interactive elements
- Action bar icons adequately spaced (20px gap)

MOTION:
- Respect prefers-reduced-motion
- Provide pause controls for video
- Stop marquee on user interaction

SCREEN READERS:
- Announce video creator and description
- Include engagement counts in labels
- Describe action results (liked, followed)

KEYBOARD:
- Arrow keys for video navigation
- Space/Enter for play/pause
- Tab through action buttons
- Escape to close modals

Quick Reference

Essential Colors

css--tiktok-black: #000000;
--tiktok-surface: #121212;
--tiktok-cyan: #25F4EE;
--tiktok-pink: #FE2C55;
--tiktok-white: #FFFFFF;
--tiktok-gray: #AAAAAA;

Essential Spacing

css--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 20px;

Essential Animations

css@keyframes like-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

Essential Shadows

css--shadow-text: 0 1px 3px rgba(0, 0, 0, 0.5);
--shadow-icon: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
--glow-pink: drop-shadow(0 0 8px rgba(254, 44, 85, 0.8));
--glow-cyan: drop-shadow(0 0 8px rgba(37, 244, 238, 0.8));