Z - Balance Scale Drag Game
About this app
Play Z - Drag Z's on the balance scale game. Drag and drop Z's to balance the scale in fun and colorful way.
✅ Typo Animation App ✅ Typo Animation App Your text will appear here! Animate Text
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>✅ Typo Animation App</title>
<meta name="description" content="Create and animate text dynamically with fun typing effects and visual styles.">
<meta name="keywords" content="typography, animation, dynamic text, web app, fun, interactive">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #a0c4ff, #fbc2eb);
color: #333;
text-align: center;
padding: 50px;
}
#main-container {
background-color: white;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
padding: 40px;
}
h1 {
animation: title-anime 2s infinite alternate;
}
@keyframes title-anime {
0% { color: #ff6b6b; }
100% { color: #4caf50; }
}
#animated-text {
font-size: 2rem;
font-weight: bold;
margin: 20px 0;
padding: 20px;
border: 2px dashed #333;
background: #e3f2fd;
display: inline-block;
animation: fade-in 1s;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #4caf50;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #388e3c;
}
</style>
</head>
<body>
<div id="main-container">
<h1>✅ Typo Animation App</h1>
<div id="animated-text">Your text will appear here!</div>
<input type="text" id="text-input" placeholder="Type something..." />
<button id="animate-btn">Animate Text</button>
</div>
<script type="text/javascript">
document.getElementById("animate-btn").addEventListener("click", () => {
const inputText = document.getElementById("text-input").value;
const animatedText = document.getElementById("animated-text");
animatedText.textContent = '';
let index = 0;
function typeEffect() {
if (index < inputText.length) {
animatedText.textContent += inputText.charAt(index);
index++;
setTimeout(typeEffect, 100);
}
}
typeEffect();
});
function saveLocal() {
localStorage.setItem('textContent', document.getElementById("text-input").value);
}
function loadLocal() {
const savedText = localStorage.getItem('textContent');
if (savedText) {
document.getElementById("text-input").value = savedText;
}
}
document.addEventListener('DOMContentLoaded', loadLocal);
</script>
</body>
</html>
NEW APPS
These are apps made by the community!