seedance / index.html
liyangbing's picture
add feature
1c0ec4c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seedance by ByteDance - Next-Gen AI Video Creation</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="nav-container">
<div class="logo">
<span class="logo-icon">๐ŸŽฌ</span>
<span class="logo-text">Seedance</span>
</div>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#benchmarks">Benchmarks</a>
<a href="#performance">Performance</a>
<a href="#pricing">Pricing</a>
<a href="https://wavespeed.ai/collections/bytedance" target="_blank" class="cta-button">Start Free</a>
</div>
</nav>
</header>
<section class="hero">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">
<span class="brand-text">Transform Your Ideas Into Video</span>
<span class="tagline">Professional AI Video Generation in Seconds</span>
</h1>
<p class="hero-subtitle">
Rated #1 in video generation with industry-leading 1352 ELO score
</p>
<div class="hero-stats">
<div class="stat">
<div class="stat-number">1352</div>
<div class="stat-label">Benchmark Score</div>
</div>
<div class="stat">
<div class="stat-number">80%</div>
<div class="stat-label">Lower Cost</div>
</div>
<div class="stat">
<div class="stat-number">6x</div>
<div class="stat-label">Faster</div>
</div>
</div>
<div class="hero-cta">
<a href="https://wavespeed.ai/collections/bytedance" target="_blank" class="primary-button">Start Free Trial</a>
<a href="#benchmarks" class="secondary-button">View Comparison</a>
</div>
<div class="leaderboard-preview">
<div class="leaderboard-item winner">
<span class="rank">#1</span>
<div class="model-badge">
<div class="model-icon bytedance">BD</div>
<span class="model-name">Seedance 1.0</span>
</div>
<span class="score">1352</span>
</div>
<div class="leaderboard-item">
<span class="rank">#2</span>
<div class="model-badge">
<div class="model-icon minimax">MM</div>
<span class="model-name">MiniMax Hailuo</span>
</div>
<span class="score">1330</span>
</div>
<div class="leaderboard-item">
<span class="rank">#3</span>
<div class="model-badge">
<div class="model-icon google">G</div>
<span class="model-name">Google Veo 3</span>
</div>
<span class="score">1243</span>
</div>
</div>
</div>
</div>
</section>
<section id="features" class="capabilities-showcase">
<div class="container">
<h2 class="section-title">Key Features</h2>
<div class="capabilities-grid">
<div class="capability-section">
<h3 class="capability-title">
<span class="capability-number">01</span>
Smart Scene Transitions
</h3>
<p class="capability-description">
First-ever AI that maintains perfect consistency across multiple shots and scenes
</p>
<div class="demo-videos-grid">
<div class="demo-video-card">
<video controls style="width: 100%; max-width: 400px; border-radius: 4px;" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/part1/video1.mp4"></video>
</div>
<div class="demo-video-card">
<video controls style="width: 100%; max-width: 400px; border-radius: 4px;" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/part1/video2.mp4"></video>
</div>
</div>
</div>
<div class="capability-section">
<h3 class="capability-title">
<span class="capability-number">02</span>
Natural Motion
</h3>
<p class="capability-description">
Lifelike movements with industry-leading stability and realism
</p>
<div class="demo-videos-grid">
<div class="demo-video-card">
<video controls style="width: 100%; max-width: 400px; border-radius: 4px;" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/part1/video3.mp4"></video>
</div>
<div class="demo-video-card">
<video controls style="width: 100%; max-width: 400px; border-radius: 4px;" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/part1/video4.mp4"></video>
</div>
</div>
</div>
<div class="capability-section">
<h3 class="capability-title">
<span class="capability-number">03</span>
Intelligent Direction
</h3>
<p class="capability-description">
Turn simple text prompts into professionally directed scenes
</p>
<div class="demo-videos-grid">
<div class="demo-video-card enhanced">
<div class="video-wrapper">
<video controls style="width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px;" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/part2/video1.mp4"></video>
</div>
<div class="video-caption">
<h4>Skateboard Demonstration</h4>
<p>Accurately captures motion trajectory and pose changes</p>
</div>
</div>
<div class="demo-video-card enhanced">
<div class="video-wrapper">
<video controls style="width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px;" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/part2/video2.mp4"></video>
</div>
<div class="video-caption">
<h4>Drone Perspective</h4>
<p>Perfectly restores complex scenes and camera movements</p>
</div>
</div>
</div>
</div>
<div class="capability-section">
<h3 class="capability-title">
<span class="capability-number">04</span>
Creative Styles
</h3>
<p class="capability-description">
From cinematic realism to stylized animation - all in one tool
</p>
<div class="demo-videos-grid">
<div class="demo-video-card enhanced">
<div class="video-wrapper">
<video controls style="width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px;" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/part3/video1.mp4"></video>
</div>
<div class="video-caption">
<h4>Photorealistic Style</h4>
<p>Highly restores real scene details</p>
</div>
</div>
<div class="demo-video-card enhanced">
<div class="video-wrapper">
<video controls style="width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px;" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/part3/video2.mp4"></video>
</div>
<div class="video-caption">
<h4>Artistic Style</h4>
<p>Unique artistic effect interpretation</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="benchmarks" class="benchmark-results">
<div class="container">
<h2 class="section-title">Benchmark Results</h2>
<p class="section-subtitle">SeedVideoBench-1.0 Evaluation & Artificial Analysis Public Testing</p>
<div class="benchmark-grid">
<div class="benchmark-card main">
<h3>SeedVideoBench-1.0 Evaluation</h3>
<div class="benchmark-image">
<div class="image-placeholder">
<span class="placeholder-icon">๐Ÿ“Š</span>
<p>T2V & I2V Multi-dimensional Evaluation Radar Chart</p>
<small>Showing scores in various dimensions: instruction following, visual aesthetics, motion performance, etc.</small>
</div>
<div>
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lm_sth/ljhwZthlaukjlkulzlp/ark/model_introduction/seedance/pro/intro/image1.png" alt="T2V Comparison Radar Chart" style="width: 100%; border-radius: 8px;">
</div>
</div>
<div class="benchmark-highlights">
<div class="highlight-item">
<span class="metric-name">Overall Quality</span>
<span class="metric-score">95.8</span>
</div>
<div class="highlight-item">
<span class="metric-name">Temporal Coherence</span>
<span class="metric-score">94.2</span>
</div>
<div class="highlight-item">
<span class="metric-name">Visual Aesthetics</span>
<span class="metric-score">96.5</span>
</div>
</div>
</div>
<div class="benchmark-card">
<h3>Arena Rankings</h3>
<div class="benchmark-image small">
<div class="image-placeholder">
<span class="placeholder-icon">๐Ÿ†</span>
<p>Arena ELO Rankings</p>
</div>
</div>
<div class="ranking-info">
<div class="rank-display">
<span class="rank-number">#1</span>
<span class="rank-label">Global Rank</span>
</div>
<p class="rank-description">Winner in 14,000+ real user comparisons</p>
</div>
</div>
<div class="benchmark-card">
<h3>Performance Comparison</h3>
<div class="benchmark-image small">
<div class="image-placeholder">
<span class="placeholder-icon">๐Ÿ“ˆ</span>
<p>Performance Bar Chart</p>
</div>
</div>
<ul class="performance-list">
<li><strong>6x</strong> faster than Hailuo</li>
<li><strong>3.4x</strong> faster than Kling</li>
<li><strong>1.8x</strong> faster than Veo3</li>
</ul>
</div>
</div>
<div class="benchmark-source">
<p>Data Sources:
<a href="https://console.volcengine.com/ark/region:ark+cn-beijing/model/detail?Id=doubao-seedance-1-0-pro" target="_blank">Volcano Engine Official Evaluation</a> |
<a href="https://artificialanalysis.ai/text-to-video/arena?tab=leaderboard&input=image" target="_blank">Artificial Analysis</a>
</p>
</div>
</div>
</section>
<section id="performance" class="performance-section">
<div class="container">
<h2 class="section-title">Performance Results</h2>
<div class="charts-grid">
<div class="chart-card">
<h3>Generation Speed Comparison</h3>
<div class="bar-chart">
<div class="bar-item">
<div class="bar-label">Seedance 1.0</div>
<div class="bar-container">
<div class="bar seedance" style="width: 100%">50 seconds</div>
</div>
</div>
<div class="bar-item">
<div class="bar-label">MiniMax Hailuo</div>
<div class="bar-container">
<div class="bar" style="width: 17%">300 seconds</div>
</div>
</div>
<div class="bar-item">
<div class="bar-label">Google Veo 3</div>
<div class="bar-container">
<div class="bar" style="width: 56%">90 seconds</div>
</div>
</div>
<div class="bar-item">
<div class="bar-label">Kling 2.0</div>
<div class="bar-container">
<div class="bar" style="width: 29%">170 seconds</div>
</div>
</div>
</div>
</div>
<div class="chart-card">
<h3>Cost-Benefit Analysis</h3>
<div class="cost-comparison">
<div class="cost-item winner">
<h4>Seedance 1.0 Lite</h4>
<div class="cost-value">$0.08</div>
<div class="cost-label">per video</div>
<div class="savings-badge">Save 80%</div>
</div>
<div class="cost-item">
<h4>Competitor Average</h4>
<div class="cost-value">$0.40</div>
<div class="cost-label">per video</div>
</div>
</div>
</div>
<div class="chart-card">
<h3>User Satisfaction</h3>
<div class="satisfaction-scores">
<div class="score-circle seedance">
<div class="score-value">98%</div>
<div class="score-label">Seedance</div>
</div>
<div class="score-circle">
<div class="score-value">85%</div>
<div class="score-label">Industry Average</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="pricing" class="pricing-section">
<div class="container">
<h2 class="section-title">Simple, Transparent Pricing</h2>
<p class="section-subtitle">Start creating videos in minutes with our flexible pricing plans</p>
<div class="pricing-comparison">
<div class="price-table">
<table>
<thead>
<tr>
<th class="plan-header">Model</th>
<th class="quality-header">Quality</th>
<th class="price-header">Price</th>
<th class="features-header">Features</th>
<th class="speed-header">Speed</th>
<th class="action-header">Action</th>
</tr>
</thead>
<tbody>
<tr class="highlight-row featured">
<td class="plan-cell">
<div class="model-name">
<div class="model-icon bytedance">BD</div>
<strong>Seedance Pro</strong>
<span class="badge new">PREMIUM</span>
</div>
</td>
<td class="quality-cell">HD 720p</td>
<td class="price-cell">$0.30 per video</td>
<td class="features-cell">Cinematic multi-shot coherence</td>
<td class="speed-cell">50 seconds</td>
<td class="action-cell"><a href="https://wavespeed.ai/collections/bytedance" target="_blank" class="try-button">Try Free</a></td>
</tr>
<tr class="highlight-row featured">
<td class="plan-cell">
<div class="model-name">
<div class="model-icon bytedance">BD</div>
<strong>Seedance Lite</strong>
<span class="badge best-value">BEST VALUE</span>
</div>
</td>
<td class="quality-cell">SD 480p</td>
<td class="price-cell">$0.08 per video</td>
<td class="features-cell">Great quality at lowest cost</td>
<td class="speed-cell">20 seconds</td>
<td class="action-cell"><a href="https://wavespeed.ai/collections/bytedance" target="_blank" class="try-button">Try Free</a></td>
</tr>
<tr class="competitor-row">
<td class="plan-cell">
<div class="model-name">
<div class="model-icon minimax">MM</div>
<strong>MiniMax Hailuo</strong>
</div>
</td>
<td class="quality-cell">HD 720p</td>
<td class="price-cell">$0.35 per video</td>
<td class="features-cell">6-second video generation</td>
<td class="speed-cell">300 seconds</td>
<td class="action-cell"><a href="https://wavespeed.ai" target="_blank" class="try-button secondary">Compare</a></td>
</tr>
<tr class="competitor-row">
<td class="plan-cell">
<div class="model-name">
<div class="model-icon google">G</div>
<strong>Google Veo3</strong>
</div>
</td>
<td class="quality-cell">HD 1080p</td>
<td class="price-cell">$8.00 per video</td>
<td class="features-cell">Includes audio generation</td>
<td class="speed-cell">90 seconds</td>
<td class="action-cell"><a href="https://wavespeed.ai" target="_blank" class="try-button secondary">Compare</a></td>
</tr>
<tr class="competitor-row">
<td class="plan-cell">
<div class="model-name">
<div class="model-icon kuaishou">K</div>
<strong>Kling 2.1 Pro</strong>
</div>
</td>
<td class="quality-cell">HD 1080p</td>
<td class="price-cell">$0.45 per video</td>
<td class="features-cell">Professional visual effects</td>
<td class="speed-cell">170 seconds</td>
<td class="action-cell"><a href="https://wavespeed.ai" target="_blank" class="try-button secondary">Compare</a></td>
</tr>
</tbody>
</table>
</div>
<div class="model-comparison-note">
<p class="comparison-text" style="color: #333; font-weight: bold; margin: 8px 0;">* All comparisons based on official documentation and Artificial Analysis Arena benchmark data</p>
<p class="comparison-text" style="color: #333; font-weight: bold; margin: 8px 0;">* Prices and features may vary based on region and subscription type</p>
</div>
<div class="price-highlights">
<div class="highlight-card">
<div class="highlight-icon">๐Ÿ’ฐ</div>
<h3>Highly Competitive Pricing</h3>
<p>Starting at just $0.08 per video - up to 80% cheaper than competitors</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">๐Ÿš€</div>
<h3>Start Free</h3>
<p>Get 10 free credits instantly - no credit card required</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">๐ŸŽฏ</div>
<h3>Pay As You Go</h3>
<p>No subscriptions or commitments - only pay for what you use</p>
</div>
</div>
</div>
</div>
</section>
<section class="use-cases-section">
<div class="container">
<h2 class="section-title">Wide-ranging Applications</h2>
<p class="section-subtitle">Seedance is powering video generation across industries</p>
<div class="use-cases-grid">
<div class="use-case-card">
<div class="use-case-icon">๐ŸŽฌ</div>
<h3>Film Production</h3>
<p>Quickly generate concept videos and preview clips, significantly reducing pre-production costs</p>
<a href="https://wavespeed.ai" target="_blank" class="learn-more">Learn More โ†’</a>
</div>
<div class="use-case-card">
<div class="use-case-icon">๐Ÿ“ฑ</div>
<h3>Social Media</h3>
<p>Provide unlimited creative possibilities for content creators, boosting content production efficiency</p>
<a href="https://wavespeed.ai" target="_blank" class="learn-more">Learn More โ†’</a>
</div>
<div class="use-case-card">
<div class="use-case-icon">๐Ÿ›๏ธ</div>
<h3>E-commerce Marketing</h3>
<p>Automatically generate product showcase videos to improve conversion rates</p>
<a href="https://wavespeed.ai" target="_blank" class="learn-more">Learn More โ†’</a>
</div>
<div class="use-case-card">
<div class="use-case-icon">๐ŸŽ“</div>
<h3>Education & Training</h3>
<p>Transform text-based materials into engaging video courses, enhancing learning experiences</p>
<a href="https://wavespeed.ai" target="_blank" class="learn-more">Learn More โ†’</a>
</div>
<div class="use-case-card">
<div class="use-case-icon">๐ŸŽฎ</div>
<h3>Game Development</h3>
<p>Rapidly generate game CGI and cutscenes, accelerating game development process</p>
<a href="https://wavespeed.ai" target="_blank" class="learn-more">Learn More โ†’</a>
</div>
<div class="use-case-card">
<div class="use-case-icon">๐Ÿ“ข</div>
<h3>Advertising</h3>
<p>Batch generate creative ad videos, quickly test different creative directions</p>
<a href="https://wavespeed.ai" target="_blank" class="learn-more">Learn More โ†’</a>
</div>
</div>
<div class="case-study-cta">
<h3>Want to see more success stories?</h3>
<p>Explore our complete case study library to see how Seedance is revolutionizing video creation across industries</p>
<a href="https://wavespeed.ai" target="_blank" class="primary-button">View All Case Studies</a>
</div>
</div>
</section>
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2>Ready to Create Amazing Videos?</h2>
<div class="cta-buttons">
<a href="https://wavespeed.ai/collections/bytedance" target="_blank" class="primary-button large">Start Free Trial</a>
<a href="https://wavespeed.ai" target="_blank" class="secondary-button large">Read Documentation</a>
</div>
<p class="cta-note">โœ“ Free Credits Included &nbsp; โœ“ No Credit Card Required &nbsp; โœ“ Instant Access</p>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>