```markdown
# Animated Text Generator
## HTML Structure
```html
<div class="container">
<div class="row">
<div class="col-md-8">
<form id="text-form">
<!-- Text input -->
<div class="form-group">
<label for="text-input">Enter Text</label>
<input type="text" id="text-input" class="form-control">
</div>
<!-- Font options -->
<div class="form-group">
<label>Font Settings</label>
<select id="font-family" class="form-control">
<!-- Font options -->
</select>
<input type="color" id="font-color">
<input type="number" id="font-size" min="8" max="72">
<input type="range" id="font-weight" min="100" max="900" step="100">
</div>
<!-- Text alignment -->
<div class="form-group">
<label>Text Alignment</label>
<select id="text-align" class="form-control">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<!-- Background options -->
<div class="form-group">
<label>Background</label>
<input type="color" id="bg-color">
<input type="file" id="bg-image" accept="image/*">
</div>
<!-- Border options -->
<div class="form-group">
<label>Border</label>
<input type="color" id="border-color">
<input type="number" id="border-width" min="0" max="20">
<input type="number" id="border-radius" min="0" max="50">
</div>
<!-- Animation options -->
<div class="form-group">
<label>Animation</label>
<select id="animation-type" class="form-control">
<!-- 15 animation options -->
</select>
<input type="range" id="animation-speed" min="0.1" max="3" step="0.1">
</div>
<!-- Link options -->
<div class="form-group">
<label>Add Links</label>
<input type="url" id="link-url" class="form-control">
<select id="link-target" class="form-control">
<option value="_blank">New Window</option>
<option value="_self">Same Window</option>
</select>
</div>
<!-- Media options -->
<div class="form-group">
<label>Add Media</label>
<input type="file" id="image-upload" accept="image/*">
<input type="file" id="audio-upload" accept="audio/*">
<input type="file" id="video-upload" accept="video/*">
</div>
<button type="submit" class="btn btn-primary">Generate</button>
</form>
</div>
<div class="col-md-4">
<div id="preview-area">
<!-- Animated text preview -->
</div>
</div>
</div>
</div>
```
## JavaScript Logic
```javascript
// On form submit
document.getElementById('text-form').addEventListener('submit', function(e) {
e.preventDefault();
// Get all input values
const text = document.getElementById('text-input').value;
const fontFamily = document.getElementById('font-family').value;
const fontColor = document.getElementById('font-color').value;
// ... get other input values ...
// Generate CSS for text animation
const css = generateCSS(/* pass all parameters */);
// Apply CSS to preview area
document.getElementById('preview-area').style.cssText = css;
// Add text content
document.getElementById('preview-area').textContent = text;
// Apply chosen animation
applyAnimation(document.getElementById('preview-area'),
document.getElementById('animation-type').value,
document.getElementById('animation-speed').value);
// Add links if specified
addLinks(/* ... */);
// Add media if uploaded
addMedia(/* ... */);
});
function generateCSS(/* parameters */) {
// Generate and return CSS string based on input parameters
}
function applyAnimation(element, animationType, speed) {
// Apply chosen animation to element
}
function addLinks(/* parameters */) {
// Add clickable links to specified words
}
function addMedia(/* parameters */) {
// Add uploaded images/audio/video to preview
}
```
This outline provides a basic structure for the animated text generator tool. You would need to implement the detailed logic for each function, handle file uploads, and ensure proper error handling and input validation. The UI is built using Bootstrap for responsiveness and ease of styling.
```
Speechmatics | AI Voice Agents
Mini tools
