# CodeJourney_HtmlDay2026

# WordsInABox

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.

## Visual Poem

*   [https://illestpreacha.codeberg.page/htmlday/pages/wordsinabox.html](https://illestpreacha.codeberg.page/htmlday/pages/wordsinabox.html)
    

## Video

%[https://youtu.be/RE6nqdtZyQY] 

  

## Code

### HTML

```html
<!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>





```

![]( align="center")

### HydraVideoSynth

```javascript
s0.initScreen()

src(s0).blend(src(s0).scale(1.05)).blend(src(s0).scale(1.15)).modulateRotate(src(s0)).out() 
```

```javascript

s0.initScreen()

src(s0).blend(src(s0).scale(1.05)).blend(src(s0).scale(1.15)).modulateScale(src(s0)).out()
```
