Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CuteChar AI - Text to Video</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #FF9A9E;
--secondary: #FECFEF;
--accent: #a18cd1;
--white: #ffffff;
--text: #555;
--dark: #333;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Quicksand', sans-serif;
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 20px;
}
.container {
background: var(--white);
width: 1000px;
max-width: 100%;
border-radius: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
overflow: hidden;
padding: 2rem;
}
header {
text-align: center;
margin-bottom: 2rem;
}
h1 {
color: var(--primary);
font-size: 2.5rem;
margin: 0;
}
.tagline {
color: #888;
margin-top: 5px;
}
.app-layout {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.controls {
flex: 1;
min-width: 320px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
label {
font-weight: 700;
color: var(--dark);
margin-bottom: 0.5rem;
display: block;
font-size: 1.1rem;
}
textarea {
width: 100%;
height: 120px;
padding: 1rem;
border: 3px solid #f0f0f0;
border-radius: 15px;
font-family: 'Quicksand', sans-serif;
font-size: 1rem;
resize: none;
transition: 0.3s;
box-sizing: border-box;
}
textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(255, 154, 158, 0.2);
}
.char-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.char-option {
width: 100%;
aspect-ratio: 1;
border-radius: 15px;
cursor: pointer;
border: 3px solid transparent;
object-fit: cover;
transition: 0.3s;
background: #f9f9f9;
}
.char-option:hover {
transform: translateY(-3px);
}
.char-option.selected {
border-color: var(--primary);
box-shadow: 0 5px 15px rgba(255, 154, 158, 0.4);
transform: scale(1.05);
}
.voice-select {
width: 100%;
padding: 12px;
border: 3px solid #f0f0f0;
border-radius: 15px;
font-family: 'Quicksand', sans-serif;
font-size: 1rem;
background: white;
cursor: pointer;
}
button.generate-btn {
background: linear-gradient(45deg, #FF9A9E 0%, #FECFEF 100%);
color: white;
border: none;
padding: 1.2rem;
font-size: 1.3rem;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
box-shadow: 0 10px 25px rgba(255, 154, 158, 0.5);
margin-top: auto;
}
button.generate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(255, 154, 158, 0.6);
}
button.generate-btn:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.preview {
flex: 1.2;
min-width: 320px;
background: radial-gradient(circle at center, #ffffff 0%, #f3f4f6 100%);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 450px;
border: 4px solid var(--secondary);
}
.video-stage {
position: relative;
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.character-wrapper {
position: relative;
width: 280px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.character-img {
width: 220px;
height: 220px;
border-radius: 50%;
object-fit: cover;
border: 5px solid white;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
transition: 0.3s;
background: white;
}
@keyframes talk {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.talking {
animation: talk 0.3s infinite;
}
.subtitle-box {
margin-top: 25px;
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 12px 25px;
border-radius: 25px;
display: inline-block;
font-size: 1rem;
max-width: 90%;
opacity: 0;
transform: translateY(10px);
transition: all 0.4s ease;
backdrop-filter: blur(5px);
}
.subtitle-box.visible {
opacity: 1;
transform: translateY(0);
}
.loading-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: 20px;
display: none;
}
.loader-content {
text-align: center;
}
.spinner {
width: 60px;
height: 60px;
border: 6px solid #f3f3f3;
border-top: 6px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.download-btn {
display: none;
margin-top: 15px;
background: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
}
.download-btn:hover {
background: #45a049;
}
@media (max-width: 768px) {
.app-layout {
flex-direction: column;
}
h1 { font-size: 2rem; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🎬 CuteChar AI</h1>
<p class="tagline">Turn your text into adorable videos instantly!</p>
</header>
<div class="app-layout">
<!-- Controls -->
<div class="controls">
<div>
<label>🧸 Choose Character</label>
<div class="char-grid" id="charGrid">
<!-- Characters injected by JS -->
</div>
</div>
<div>
<label>🎤 Select Voice</label>
<select class="voice-select" id="voiceSelect">
<option value="friendly">Friendly & Cheerful</option>
<option value="calm">Calm & Soft</option>
<option value="energetic">Energetic & Fun</option>
<option value="robot">Cute Robot</option>
</select>
</div>
<div>
<label>📝 Your Script</label>
<textarea id="scriptInput" placeholder="Type what you want the character to say...">Hi there! I'm your new AI friend. Isn't technology amazing?</textarea>
</div>
<button class="generate-btn" id="generateBtn" onclick="generateVideo()">
✨ Generate Video
</button>
</div>
<!-- Preview -->
<div class="preview">
<div class="loading-overlay" id="loader">
<div class="loader-content">
<div class="spinner"></div>
<p id="loadingText">Creating magic...</p>
<button class="download-btn" id="downloadBtn" onclick="alert('This is a demo! In a real app, the video would download here.')">
⬇️ Download Video
</button>
</div>
</div>
<div class="video-stage">
<div class="character-wrapper">
<img id="displayChar" class="character-img" src="" alt="Character">
</div>
<div id="subtitle" class="subtitle-box">
...
</div>
</div>
</div>
</div>
</div>
<script>
// Character data - using DiceBear for cute avatars
const characters = [
{ id: 1, name: 'Bella', seed: 'Bella', color: '#FFB7B2' },
{ id: 2, name: 'Charlie', seed: 'Charlie', color: '#B5EAD7' },
{ id: 3, name: 'Daisy', seed: 'Daisy', color: '#C7CEEA' },
{ id: 4, name: 'Max', seed: 'Max', color: '#FFDAC1' }
];
let currentChar = characters[0];
// Initialize the app
function init() {
const grid = document.getElementById('charGrid');
characters.forEach((char, index) => {
const img = document.createElement('img');
img.src = `https://api.dicebear.com/7.x/avataaars/svg?seed=${char.seed}&backgroundColor=${char.color.replace('#', '')}`;
img.className = 'char-option' + (index === 0 ? ' selected' : '');
img.onclick = () => selectChar(char, img);
img.title = char.name;
grid.appendChild(img);
});
// Set initial character
updateCharacterDisplay();
}
function selectChar(char, element) {
// Update selection UI
document.querySelectorAll('.char-option').forEach(img => {
img.classList.remove('selected');
});
element.classList.add('selected');
currentChar = char;
updateCharacterDisplay();
// Reset subtitle
document.getElementById('subtitle').classList.remove('visible');
}
function updateCharacterDisplay() {
const display = document.getElementById('displayChar');
display.src = `https://api.dicebear.com/7.x/avataaars/svg?seed=${currentChar.seed}&backgroundColor=${currentChar.color.replace('#', '')}`;
}
function generateVideo() {
const text = document.getElementById('scriptInput').value;
const btn = document.getElementById('generateBtn');
const loader = document.getElementById('loader');
const subtitle = document.getElementById('subtitle');
const charImg = document.getElementById('displayChar');
const downloadBtn = document.getElementById('downloadBtn');
if (!text.trim()) {
alert("Please enter some text first!");
return;
}
// Start loading
btn.disabled = true;
btn.innerText = "⏳ Generating...";
loader.style.display = "flex";
subtitle.classList.remove('visible');
downloadBtn.style.display = 'none';
document.getElementById('loadingText').innerText = "Creating magic...";
// Simulate AI generation time (2-3 seconds)
setTimeout(() => {
loader.style.display = "none";
btn.disabled = false;
btn.innerText = "✨ Generate Video";
// Show result
subtitle.innerText = text;
subtitle.classList.add('visible');
// Add talking animation
charImg.classList.add('talking');
// Stop talking after 3 seconds
setTimeout(() => {
charImg.classList.remove('talking');
}, 3000);
// Show download button
downloadBtn.style.display = 'inline-block';
}, 2500);
}
// Run initialization
init();
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
7
Requests
4
Domains
55KB
Transfer Size
70KB
Content Size
239.0ms
Dom Content Loaded
416.0ms
First Paint
509.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...