Klasky Csupo 2001 Effects Video Generator
About this app
Create, edit, and share your videos with classic Klasky Csupo effects like the famous 2001 visuals. Fun, interactive, and user-friendly!
Klasky Csupo 2001 Effects Video Generator Klasky Csupo 2001 Effects Video Generator Choose an Effect:
Related apps
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>Klasky Csupo 2001 Effects Video Generator</title>
<meta name="description" content="Create, edit, and share your videos with classic Klasky Csupo effects like the famous 2001 visuals. Fun, interactive, and user-friendly!">
<meta name="keywords" content="Klasky Csupo, 2001 effects, video generator, video editor, fun videos, retro graphics">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const effects = [
{ name: "Swirling Colors", class: "swirl" },
{ name: "Glitch Effect", class: "glitch" },
{ name: "Retro VHS", class: "vhs" },
{ name: "Liquid Transition", class: "liquid" }
];
const effectList = document.getElementById('effect-list');
effects.forEach(effect => {
const btn = document.createElement('button');
btn.className = `btn btn-color ${effect.class}`;
btn.innerText = effect.name;
btn.onclick = () => applyEffect(effect.class);
effectList.appendChild(btn);
});
function applyEffect(effectClass) {
const videoElement = document.getElementById('video-output');
videoElement.className = 'video-effect ' + effectClass;
}
document.getElementById('video-input').onchange = function(event) {
const file = event.target.files[0];
const url = URL.createObjectURL(file);
document.getElementById('video-output').src = url;
};
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(45deg, #FF6B6B, #FFD93D);
color: #333;
font-family: 'Arial', sans-serif;
text-align: center;
}
#main-container {
margintop: 50px;
}
h1 {
color: #751c68;
margin-bottom: 30px;
}
.btn-color {
margin: 5px;
transition: transform 0.3s;
}
.btn-color:hover {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.video-effect {
max-width: 80%;
margin-top: 20px;
}
.swirl {
background: purple;
}
.glitch {
background: teal;
}
.vhs {
background: darkslategray;
}
.liquid {
background: darkorchid;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Klasky Csupo 2001 Effects Video Generator</h1>
<input type="file" id="video-input" accept="video/*" class="form-control">
<video id="video-output" controls class="video-effect" autoplay loop></video>
<h2>Choose an Effect:</h2>
<div id="effect-list" class="btn-group"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!