Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
No comments yet. Be the first to comment.
For this Code Journey on HTML Day 2026, WordsInABox is a Visual Micro Poem coded with HTML/CSS. For a glitchier effect powered by HydraVideoSynth that adds JavaScript to the mix.
<!DOCTYPE html>
<html>
<head>
<style>
/* Scrolling Text Section*/
h1 {
background-color: black;
color: white;
}
/* Div/Box Section */
#firstbox {
width: 150px;
height: 150px;
background-color: black;
animation-name: myAnimation;
animation-duration: 30s;
padding: 100px;
box-shadow: 5px 10px 15px 20px green;
color: white;
}
#secondbox {
width: 150px;
height: 100px;
background-color: red;
animation-name: myAnimation2;
animation-duration: 30s;
border: 1px solid;
padding: 75px;
box-shadow: 5px 5px 5px 5px orange;
color: white;
}
#thirdbox {
width: 130px;
height: 130px;
background-color: brown;
animation-name: myAnimation3;
animation-duration: 30s;
color: white;
border: 3px solid;
padding: 55px;
box-shadow: 15px 15px 15px 15px aqua;
}
@keyframes myAnimation {
/* color animation */
0% {background-color: orange;}
15% {background-color: purple;}
25% {background-color: yellow;}
50% {background-color: blue;}
70% {background-color: aqua;}
82% {background-color: brown;}
100% {background-color: green;}
/*font text */
50% {font-size: 25px;}
/*box shadow */
25% {box-shadow: 15px 10px 15px 20px aqua;}
50% {box-shadow: 5px 10px 15px 20px green;}
75% {box-shadow: 10px 30px 15px 30px blue;}
/* font color */
25% {color: black;}
50% {color: white;}
75% {color: black;}
75% {color: grey;}
}
@keyframes myAnimation2 {
from {background-color: purple;}
to {background-color: yellow;}
50% {font-size: 20px;}
}
@keyframes myAnimation3 {
/* color animation */
0% {background-color: white;}
15% {background-color: black}
25% {background-color: yellow;}
50% {background-color: blue;}
70% {background-color: orange;}
82% {background-color: green;}
100% {background-color: orange;}
/*font text */
26% {font-size: 15px;}
50% {font-size: 20px;}
75% {font-size: 10px;}
</style>
</head>
<body>
<h1><marquee behavior="scroll" direction="left" scrollamount="10"> Words can be Clear but Sometimes are not</marquee></h1>
<h2><marquee behavior="scroll" direction="right" scrollamount="5"> Even Simple Sentences can be hard to follow</marquee></h1>
<h2><marquee behavior="scroll" direction="left" scrollamount="5"> As Meaning Grows and symbols flaunt</marquee></h1>
<div style="position: fixed; width: 900px; height: 900px;">
<iframe width="900" height="900" src="https://www.youtube.com/embed/RE6nqdtZyQY" title="WordsInABox" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" style="position: relative; top: 50px; left: 500px; width: 400px; height: 250px; border: none;"></iframe>
</div>
<div id="firstbox">
<p><b><center>Words in a box. Still to start but they decide to start moving across</b></p>
<div id="secondbox">
<p><b><center>More Words, More Verbs. Trying to be Heard, away from the heard? </span></b></p>
<div id="thirdbox">
<p><b><center>What is behind the words being told? What aspects do you hold? </span></b></p>
</body>
</html>
s0.initScreen()
src(s0).blend(src(s0).scale(1.05)).blend(src(s0).scale(1.15)).modulateRotate(src(s0)).out()
s0.initScreen()
src(s0).blend(src(s0).scale(1.05)).blend(src(s0).scale(1.15)).modulateScale(src(s0)).out()