<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500|Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Roboto+Condensed" rel="stylesheet">
<div class="holder">

<!--   <h1>We All Deserve a Safe Space to Become Ourselves</h1> -->
  <div class="innerText">
    <div id="back">
    </div>

<div id="text">


</div>
</div>

</div>


</div>
/*SETUP*/
html {
  box-sizing: border-box;
  
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background-color: #FFFFF8;
/* font-family: 'Permanent Marker', cursive; */
font-family: 'Anton', sans-serif;
  font-size: 1.5vw;
  width: 99%;
  margin: auto;
}
@media (max-width: 599px) {
  body {
    /* font-size: 5.5vw; */
  }
}

@media (min-width: 900px) {
  body {
    /* font-size: 5vw;  */
  }
}

h1{
  color: #444;
font-family: 'Oswald', sans-serif;
  font-size: 200%;
  text-align: center;
}

.line {
  /*   controls color of the burning couldron */
  box-shadow: inset 0em 0em 0em #B4331A;
/*   makes up the body of the couldron and the chrysalis */
  border: solid 0em rgba(68,68,68, .9);
  width: 75%;
  height: 90%;
  margin: auto;
  margin-bottom: 1em;
}


.word {
  letter-spacing: .07em;
  font-size: 110%;
  font-weight: 200;
/*   text-shadow: 0em 0em 0em #F9DA78; */
/*   border: dotted 1em rgba(180, 51, 26, .6); */
/*     box-shadow:  1.5em 1.5em .5em 3.5em  #EF6E73; */
  border-radius: 5%;
  color: #FFFFF8;
  
}

/*CONTAINER FOR EVERYTHING*/

.holder {
/*     border: solid .05em rgba( 85,  0,  0,1); */
  position: relative;
  height: 90vh;
  padding: 1em;
  margin: auto;
}
/*CONTAINER FOR TEXT*/

.innerText {
  position: relative;
  height: 90vh;
  width: 80%;
  margin: auto;
}

#back{
  position: absolute;
    height: 75vh;
  width: 100%;
  z-index: -1;
}
#text {
  border: solid 0em #F0C808;
  text-shadow: 0em 0em rgba(51, 0, 0, .8);
  font-weight: 800;
  height: auto;
  padding: .5em;
  margin: 0;
}
/*SETUP*/
$(document).ready(function() {
  var theText = [
    "Everything we are",
    "we become in a process",
    "The cauldron",
    "The chrysalis",
    "The potion, the metamorphosis",
    "no matter-we come from",
    "and become back the world"
    // "We will become ourselves-no matter-what",
    // "we remake the world in our imagination of us",
    // "Nothing deserves more protection than what we might become"
  ];

  /*FUNCTION TO CREATE STRUCTURED POEM ELEMENTS FROM STRUCTURED DATA */
  theText.forEach(function(element, index) {
    // create a new element
    var newDiv = document.createElement("p");
    //create a text node from the parameter passed to the function
    var newContent = document.createTextNode(element);
    // //add the text node to the newly created  element
    newDiv.appendChild(newContent);
    newDiv.className += "line";
    newDiv.id += "line" + index;
    $textGrab = $("#text");
    $textGrab.append(newDiv);
  });

  /* Blast text to make elements by word*/
  $("#text").blast({
    delimiter: "word", // Set the delimiter type (see left)
    search: false,
    // tag: "div",
    // Set the wrapping element type (e.g. "div")
    customClass: "word", // Add a custom class to wrappers
    generateIndexID: true, // Add #customClass-i to wrappers
    generateValueClass: true,
    returnGenerated: true
  });

  /* variables to select and animate text*/
  var $words = $("#text").text();
  var $poem = $(".word").toArray();
  var $byWords = $(".word");
  var $byLine = $(".line").toArray();

  //select the words by lines
  var $lines = [];

  var selector = $("#line0").find(".word");
  var selector1 = $("#line1").find(".word");
  var selector2 = $("#line2").find(".word");
  var selector3 = $("#line3").find(".word");
  var selector4 = $("#line4").find(".word");
  var selector5 = $("#line5").find(".word");
  var selector6 = $("#line6").find(".word");

  $lines.push(
    selector,
    selector1,
    selector2,
    selector3,
    selector4,
    selector5,
    selector6
  );

  // background button to activate animation
  // var $all = $("#back");

  /*Making colors with chroma js*/
  var colors = chroma
    .scale(["#2B2D42", "#D90429"])
    .mode("lch")
    .colors($poem.length);

  //animation sequence to set the colors of each word element
  let colorSet = [];

  for (var i = 0; i < $poem.length; i++) {
    var cSet = {
      e: $poem[i],
      p: { backgroundColor: colors[i], color: colors[i] },
      o: { sequenceQueue: false }
    };

    colorSet.push(cSet);
  }
  $.Velocity.RunSequence(colorSet);

  //animation to show user can click on boxes to start animation
  $.Velocity.RegisterUI("bubble", {
    defaultDuration: 1800,
    calls: [
      [
        {
          boxShadowY: "+=.09em",
          boxShadowBlur: "+=.8em"
        },
        1,
        { loop: true, easing: "easeInSine" }
      ]
    ]
  });

  /*CREATE THE INTERACTIVE ANIMATION*/
  var stew = [];

  var bubble = {
    e: $lines,
    p: "bubble",
    o: {}
  };

  stew.push(bubble);

  $.Velocity.RunSequence(stew);

  /*STOP THE STEW AND START THE POEM ANIMATION*/

  $(".innerText").click(function() {
    /*VARIABLES AND EFFECTS FOR THE POEM ANIMATION*/
    var colorHold = "#FFFFF8";
    var $textSize = 18;

    $.Velocity.RegisterUI("exist", {
      defaultDuration: 300,
      calls: [
        [
          {
            textShadowX: 0,
            textShadowY: 0,
            textShadowBlur: 0,
            boxShadowY: 0,
            boxShadowX: 0,
            boxShadowBlur: 0,
            boxShadowSpread: 0,
            border: 0,
            backgroundColor: colorHold,
            fontSize: $textSize,
            color: "#444"
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });

    $.Velocity.RegisterUI("become", {
      defaultDuration: 800,
      calls: [
        [
          {
            textShadowX: 0,
            textShadowY: 0,
            textShadowBlur: 0,
            boxShadowY: 0,
            boxShadowX: 0,
            boxShadowBlur: 0,
            boxShadowSpread: 0,
            backgroundColor: colorHold,
            fontSize: $textSize,
            color: "#444"
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });
    $.Velocity.RegisterUI("cauldron", {
      defaultDuration: 800,
      calls: [
        [
          {
            textShadowX: 0,
            textShadowY: 0,
            textShadowBlur: 0,
            boxShadowX: 0,
            boxShadowSpread: 0,
            fontSize: "+=50%",
            width: "/=1.3",
            color: "#444",
            borderBottomWidth: "+=1.5em",
            paddingBottom: "+=2.5em",
            borderRadius: "50%"
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });

    $.Velocity.RegisterUI("cauldronBurn", {
      defaultDuration: 2800,
      calls: [
        [
          {
            textShadowX: [0, 10],
            textShadowBlur: [0, 20],
            boxShadowX: [0, -10],
            boxShadowY: [0, -10],
            boxShadowSpread: [0, 5],
            boxShadowBlur: [0, 25]
            // fontSize:[46,48]
          },
          1,
          { easing: "easeInSine", loop: true }
        ]
      ]
    });

    $.Velocity.RegisterUI("chrysalis", {
      defaultDuration: 1800,
      calls: [
        [
          {
            textShadowX: 0,
            textShadowY: 0,
            textShadowBlur: 0,
            boxShadowX: 0,
            boxShadowSpread: 0,
            fontSize: $textSize + 8,
            width: "/=1.3",
            backgroundColor: "#FFFFF8",
            color: "#444",
            borderBottomWidth: "+=.15em",
            borderTopWidth: "+=.15em",
            paddingBottom: "+=1.5em",
            borderRadius: "50%"
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });
    $.Velocity.RegisterUI("chrysalisText", {
      defaultDuration: 300,
      calls: [
        [
          {
            textShadowX: 0,
            textShadowY: 0,
            textShadowBlur: 0,
            boxShadowY: 0,
            boxShadowX: 0,
            boxShadowBlur: 0,
            boxShadowSpread: 0,
            border: 0,
            opacity: 0.5,
            backgroundColor: "#FFFFF8",
            fontSize: $textSize,
            color: "#444",
            padding: 0
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });
    $.Velocity.RegisterUI("chrysalisBurn", {
      defaultDuration: 2800,
      calls: [
        [
          {
            backgroundColor: ["#DA8A98", "#B4331A"],
            textShadowX: [0, 10],
            textShadowY: [0, 40],
            textShadowBlur: [0, 5]
            // boxShadowY:[0,25],
            // boxShadowX: 0,
            // boxShadowBlur: [0,25],
            // boxShadowSpread: [0,25]
          },
          1,
          { easing: "easeInSine", loop: true }
        ]
      ]
    });

    $.Velocity.RegisterUI("basic", {
      defaultDuration: 500,
      calls: [
        [
          {
            textShadowX: 0,
            textShadowY: 0,
            textShadowBlur: 0,
            boxShadowY: 0,
            boxShadowX: 0,
            boxShadowBlur: 0,
            boxShadowSpread: 0,
            border: 0,
            backgroundColor: colorHold,
            fontSize: $textSize,
            color: "#444"
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });

    /*Collect the animations in an array */
    var animations = [
      "exist",
      "become",
      "cauldron",
      "cauldronBurn",
      "chrysalis",
      "chrysalisBurn",
      "basic",
      "chrysalisText"
    ];

    /* Animation Sequence For The Poem */
    var runThePoem = [];

    //stop the interactivity animation
    selector.velocity("stop");

    //apply the animation to each word in the first line
    for (var i = 0; i < selector.length; i++) {
      var p1 = {
        e: selector[i],
        p: animations[0],
        o: {
          complete: function() {
            //stop the interactivity animation for the next two lines
            selector1.velocity("stop");
            selector2.velocity("stop");
          }
        }
      };
      runThePoem.push(p1);
    }

    //line 2
    for (var i = 0; i < selector1.length; i++) {
      var p2 = {
        e: selector1[i],
        p: animations[1],
        o: {}
      };
      runThePoem.push(p2);
    }

    //line 3: The cauldron setup and text
    for (var i = 0; i < selector2.length; i++) {
      var couldronSetup = {
        e: selector2[i],
        p: animations[1],
        o: {
          complete: function() {
            //set the color of the chrysalis by it's border color
            $("#line3").css("border", "dotted 0em #B4331A");
            //stop the rest of the interactivity animations
            selector3.velocity("stop");
            selector4.velocity("stop");
            selector5.velocity("stop");
            selector6.velocity("stop");
          }
        }
      };

      runThePoem.push(couldronSetup);
    }

    /* create the couldron */
    var createCouldron = {
      e: $("#line2"),
      p: animations[2],
      o: {}
    };
    runThePoem.push(createCouldron);

    /*couldron burn: looping animation that continues for the couldron*/

    var burnCouldron = {
      e: $("#line2"),
      p: animations[3],
      o: { sequenceQueue: false }
    };

    runThePoem.push(burnCouldron);

    /* line 4: The chrysalis setup and text */
    for (var i = 0; i < selector3.length; i++) {
      var chrysalisText = {
        e: selector3[i],
        p: animations[7],
        o: { sequenceQueue: false }
      };

      runThePoem.push(chrysalisText);
    }

    //create the chrysalis body
    var chrys = {
      e: $("#line3"),
      p: animations[4],
      o: {
        sequenceQueue: false
      }
    };
    //chrysalis burn: looping animaton for chrysalis
    var chrys2 = {
      e: $("#line3"),
      p: animations[5],
      o: {
        delay: 10
      }
    };

    runThePoem.push(chrys);
    runThePoem.push(chrys2);

    /* End The chrysalis  */

    //line 5
    for (var i = 0; i < selector4.length; i++) {
      var line5 = {
        e: selector4[i],
        p: animations[6],
        o: { duration: 800, stagger: 50, sequenceQueue: false }
      };

      runThePoem.push(line5);
    }

    //line 6
    for (var i = 0; i < selector5.length; i++) {
      var line6 = {
        e: selector5[i],
        p: animations[6],
        o: { duration: 500, delay: 10 }
      };
      runThePoem.push(line6);
      //
    }

    //line 7
    for (var i = 0; i < selector6.length; i++) {
      var line7 = {
        e: selector6[i],
        p: animations[6],
        o: { duration: 500, delay: 10 }
      };

      runThePoem.push(line7);
    }

    //run the poem animation sequence
    $.Velocity.RunSequence(runThePoem);

    //end on click funtion
  });
  //end document on ready function
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.blast.js
  5. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js
  6. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.ui.min.js
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/chroma.js
  8. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/circletype.js
  9. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.lettering-0.6.1.min.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/plugins_copy.js