css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    <div class="textLarge">

  <h1>Omni Scroll</h1>
    <div class="text">

      <p>The place to begin, I think, is obviously with the question &quot;Who
      is Hermes Trismegistus?&quot; What are we talking about here? I mean, this
      sounds so incredibly exotic to people. The Renaissance had the concept of
      what it called the Presqui Poaloque (sp?) and if my Latin and Greek irritates
      you, you have to understand you're dealing with a boy from a coal mining
      town in Colorado, so I do mangle these things. The Presqui Paoloque were
      Orpheus, Moses, and primarily Hermes Trismegistus. Hermes Trismegistus was
      the primary source, from the point of view of the Renaissance, of this whole
      mysterious tradition and, you recall from last night's lecture, this is
      based on a misunderstanding. The Renaissance believed that Hermes Trismegistus
      was older than Moses. We know now, thanks to Issac and Marik Casaubon, two
      philologists of the early 17th century, that definitely the Hermetic corpus
      was composed between the first and second centuries after Christ. The method
      of the Casaubons was to examine the philosophical language of the Corpus
      Hermeticum and show that there were words and phrases there that were post-Platonic
      and derivative of philosophers whose dates we have fully in hand.</p>

      <p>Now, if you go to an occult bookstore you will find that, to this date,
      this error persists. There are people who still want to claim that this
      stuff is older than dyanstic Egypt. There are even books, I was in Shambala
      weeks ago, claiming to teach you how to change lead into gold. Well, from
      my point of view this just evokes a small smile. The old errors persist.
      The Puffers are still at it. But what Hermes Trismegistus is is a character
      who appears in many guises in these hermetic dialogs. The hermetic hymns
      are usually couched in the form of dialogs between Hermes and his son Thoth
      and Thoth takes the position of the uninitiated ingenue who is sitting at
      the feet of the master. Thoth asks questions: what is the true nature of
      the world, what is the true nature of man, and Hermes answers and the general
      form of these texts, with exceptions, because there are 20 of them, is an
      intellectual dialog which builds to an ecstatic revelation and then in the
      wake of the ecstatic revelation there is a hymn of praise to Hermes Trismegistus.
      Trismegistus means thrice-blessed and is sometimes called Hermes Triplex
      to distinguish this Hermes from all the other Hermes of early, middle and
      late Greek thinking. Hermes is of course the messenger god, the god of scribes.
      The reason this Ibis-headed being holding a staff is embossed on the cover
      of each of these books is because this is how Hermes Trismegistus, Thoth
      Hermes was imagined. He was associated with the scribe god of the Egyptian

      <p>The two distinguishing factors that stand out, at least for me, that
      I think you need to incorporate into your thinking about hermeticism, two
      very important concepts. The first is the divinity of human beings-an extraordinarily
      radical idea in the context of late Hellenistic thinking. We all operate
      under the spell of the concept of the fall of man. Man is an inferior being,
      errors were made in the Garden of Eden and that we are far, far from the
      nature of divinity. All magic, and all magic in the West is derivative from
      this tradition, takes the position that man is a divine being, men and women
      are divine beings. The Corpus Hermeticum actually refers to man as God's
      brother and this is a double-edged perception. It gives tremendous dignity
      to the human enterprise but it also raises the possibility of the error
      of pride and hubris.</p>

      <p>In the Renaissance, Marcello Ficino boiled this notion down to the aphorism
      &quot;man is the measure of all things.&quot; And you may notice that this
      is the position of science, that man is the measure of all things, that
      it is up to us, we can decide the course of the cosmos. All magic stems
      from this position. This is why the church was so concerned to stamp out
      magic-because it assigns man an importance that the church would rather
      reserve for deity. So that's the first great division between Christian
      thinking and hermetic thinking. An entirely different conception of what
      human beings are and when we get into the text, I'll read you some of these

      <p>Now, the second distinguishing factor, and notice that position on man
      empowers tremendous freedom, man is the measure of all things, the second
      distinguishing factor in hermeticism is the belief that we can control fate,
      that we can escape from cosmic fate. The late Hellenistic mindset, and what
      you get in the Gnostics, is the belief that because of astrology, because
      of the stars, we are subject to control from these exterior forces. In most
      Gnostic thinking the whole concern is to somehow evade what is called the
      hemarmeny (sp?), cosmic fate. And in the Gnostic systems, the only way it
      can be done is by ascending through the shells of cosmic, ordering forces-the
      archons, the planets, the planetary demons, and so forth and so on, and
      then beyond the hemarmeny, which is actually thought of as a place in space
      that you burst through when you transcend fate. What the hermetic thought
      is is that these fates become personified as the decans, as stellar demons,
      and then it is held that there is a magic, a magical system, which is possible
      where you can call these archangels to your side and work with them and
      not be subject to the inevitable working of the cosmic machinery and this
      burst like a revelation over the late Hellenistic world because there was
      such philosophical and emotional and political exhaustion that this comes,
      this is a counterpoint to the message of the New Testament, which is a similar
      message, that you can be saved in the body, that you can escape the inevitable
      dissolution and degradation laid upon us by time. So, these are the two
      distinguishing factors: the divinity of man and the possibility of using
      magic to evade the machinery of fate.</p>

      <p>So, I want to read some of the Corpus Hermeticum to you to give you the
      flavor of it, but before I do, I want to say something about the history
      of these texts. You're all familiar, more or less I'm sure, with Apuleius'
      The Golden Ass, which is a novel of initiation which is late Roman. Apuleius
      also put together what is called the Asclepius and the Asclepius is true
      hermetic literature that was not lost. It was the only one that was available
      throughout the Dark and Middle ages. All the rest was lying untranslated
      in Syrian Monasteries until Gemistus Plethon in 1490 brought these manuscripts
      to Florence, to the court of the Di Medicis and then the translation project
      began. The only other hermetic material that was accessible throughout the
      high Gothic period was a book of magic called the Picatrix. And the Picatrix
      was probably written in the 1200's although this elicits screams of dissent
      from the burning-eyed faction. But reason dictates that we consider Picatrix
      12th century so only the Asclepius and the Picatrix represented this strain
      of thought before the 1460's. And the importance of hermetic thinking can
      be seen by the fact that Gimistis Platho brought Plato to the Florentine
      council as well as Hermes Trismegistus. And when Marcello Ficino sat down
      to do this translation work Cosumo Di Medici said &quot;Plato can wait,
      I'm getting old. You do the Hermetic Corpus first. That's much more important.
      We'll sort out this Plato business in a few years.&quot; And so it was done.
      It was completed in 1493 and in 1494 Cosumo died so he never saw the translations
      of Plato but felt that the Corpus Hermeticum was more important. I mention
      this to show you the importance that was attached to this stuff.</p>

      <p>Here is one of the key passages on man's nature. This is from Book one
      of the Corpus Hermeticum: &quot;But mind the father of all, he who is life
      and light gave birth to man, a being like to himself and he took delight
      in man as being his own offspring for man was very goodly to look on, bearing
      the likeness of his father. With good reason then did God take delight in
      man for it was God's own form that God took delight in and God delivered
      over to man all things that had been made.&quot; This is the basis of the
      Ficinian statement man is the measure of things. &quot;And man took station
      in the Maker's sphere and observed the things made by his brother who was
      set over the region of fire. And having observed the Maker's creation in
      the region of fire he willed to make things for his own part also. And his
      father gave permission having in himself all the workings of the administrators.&quot;
      This is a reference to the angel heirarchary &quot;And the administrators
      took delight in him and each of them gave him a share of his own nature.&quot;</p>

      <p>So man is the brother of God and a creature at home with the angels.
      This idea is echoed in the Asclepius which you'll recall was available throughout
      the Middle Ages. &quot;The range of man is yet wider than that of the demons&quot;
      meaning the angels - this term is transposable in its hermetic thought &quot;The
      individuals of the human kind are diverse and of many characters. They,
      like the demons, come from above and, entering into fellowship with other
      individuals they make for themselves many and intimate connections with
      all other kinds&quot; and then the famous passage &quot;man is an honor
      then, Asclepius, honor and reverence to such a being. Man takes on him the
      attributes of a god as though he were himself a god. And he is familiar
      with the demonkind for he comes to know that he is sprung from the same
      source as they. And strong in the assurance of that in him which is divine,
      he scorns the merely human part of his own nature. How far more happily
      blended are the properties of man then those of other beings. He is linked
      to the gods inasmuch as there is in him a divinity akin to theirs. He scorns
      that part of his own being which makes him a thing of earth and all else
      with which he finds himself connected to by heaven's ordering he binds to
      himself with the tie of his affection.&quot;</p>

      <p>So this is an incredibly radical conception of what it means to be human.
      So radical that it is unwelcome even in the present context. Notice the
      modern feeling of this stuff. This is not biblical rhetoric. This is philosophical
      discourse as we know it and carry it out ourselves. This is a passage on
      the adept and initiation. Let me see who's speaking here, Thoth speaks to
      Pimondres, this is book one, &quot;But tell me this too, said I, God said
      'let the man who has mind in him recognize himself' but have not all men
      mind?&quot; And then Pimondres replies &quot;Oh man, said mind to me speak
      not so, I even mind come to those men who are holy and good and pure and
      merciful and my coming is a succor to them and forthwith they recognize
      all things and win the father's grace by loving worship and give thanks
      to him praising and hymning him with hearts uplifted to him in filial affection.&quot;
      Again the reference to being God's brother in filial affection. &quot;And
      before they give up the body to death which is proper to it they loathe
      the bodily senses knowing what manner of work the senses do.&quot; This
      introduces the theme of asceticism.</p>

      <p>Like the Gnostics, there is in much of hermetic literature a kind of
      horror of the earth, a desire to ascend and to get away from it. Scott makes
      the distinction between what he calls pessimistic Gnosis and optimistic
      Gnosis. And within the 20 texts of the Corpus Hermeticum you get vacillation
      on this point. In some cases the Mandaean, the Cebian(?) tendency is there
      and the world soul is invoked and the whole of creation is seen as a living
      being involved in this soteriological process, this process of salvational
      mechanics through magic. In other texts this Gnostic horror of matter is
      strongly stressed. It's very clear that the Hellenistic mind was ambivalent
      on this point. Even as we are ambivalent on this point. It's a real question,
      are we here to be the caretakers of the earth or are we strangers in the
      universe and is our task to return to a forgotten and hidden home no trace
      of which can be found in the Saturnine world of matter. It's very hard to
      have it both ways. You're going to have to take a position on that and these
      people were forced into the same dilemma. There's no middle ground between
      those two positions and so that dichotomy, that conundrum, haunted a lot
      of hermetic thinking.</p>

      <p>Here is the hermetic creation myth. This is book three, paragraphs one
      through a few, and you'll see the comparison and similarities with the Christian
      creation myth but with extraordinary differences. &quot;There was darkness
      in the deep and water without form and there was a subtle breath, intelligent,
      which permeated the things in chaos with divine power. Then, when all was
      yet undistinguished and unwrought, there was shed forth holy light and the
      elements came into being. All things were divided one from another and the
      lighter things were parted off on high, the fire being suspended aloft so
      that it rose unto the air and the heavier things sank down and sand was
      deposited beneath the watery substance and the dry land was separated out
      from the watery substance and became solid. And the firey substance was
      articulated with the gods therein and heaven appeared with its seven spheres
      and the gods, visible in starry forms, with all their constellations and
      heaven revolved and began to run its circling course riding upon the divine
      air. And each god by his several powers set forth that which he was bidden
      to put forth. And there came forth four-footed beasts and creeping things
      and fishes and winged birds and grass and every flowering herb, all having
      seed in them according to their diverse natures for they generated within
      themselves the seed by which their races should be renewed.&quot; And then
      it goes on to describe the birth of man.</p>

      <p>This kind of thinking is what alchemy seized upon in it's ambitions.
      One way of thinking of what alchemy came to attempt is, the thinking went
      like this - since man is God's brother, the purpose of man is to intercede
      in time and it was believed that ores, precious metals and things like this
      grew in the earth. It was a thorough going theory of evolution that reached
      right down into the organic realm. It was thought that gold deposits in
      the earth would actually replenish themselves over time. It's passages like
      this that give permission for that kind of thinking. In line with that,
      we're now in book four and remember the tone changes slightly from book
      to book, they were, after all, written over a 300 year period by various

    <div class="footer">
      <h1>Terrance Mckenna</h1>
    <progress value="0" id="progressBar">
      <div class="progress-container">
        <span class="progress-bar"></span>
*, *::after, *::before {
  box-sizing: border-box;
::selection {
	background: black;


progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
	// transform: rotate(90deg) translateY(0%);
  /* Dimensions */
  width: 100%;
  height: 100vh;
	z-index: 90;
  /* Reset the apperance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* For Firefox/IE10+ */
  background-color: transparent;

  /* For IE10+, color of the progress bar */
  color: black;
	// mix-blend-mode: exclusion;
progress::-webkit-progress-bar { background: #fff; }
progress::-webkit-progress-value { background: transparent; border-right: 1px solid red; }
progress::-webkit-progress-bar {
  background-color: transparent;

.progress-container {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
	bottom: 0;
	right: 0;
  height: 100vh;
  display: block;

.progress-bar {
  background-color: black;
  width: 50%;
  display: block;
  height: inherit;

body {
	font-family: -apple-system, BlinkMacSystemFont,
	    "Segoe UI", "Roboto", "Oxygen",
	    "Ubuntu", "Cantarell", "Fira Sans",
	    "Droid Sans", "Helvetica Neue", sans-serif;
  width: 100%;
  padding: 0 0 ;
  margin: 0 auto;
  line-height: 1.25;
	font-size: 4vmin;
	background: black;
	font-size: 18vmax;
	font-weight: 100;
	height: 40vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	z-index: 100;
	line-height: .85;
	text-align: center;
	position: relative;
	// mix-blend-mode: exclusion;
body > .text{
	width: 66%;
	margin: 0 auto 0%;
	background: white;
	padding: 4vmax;
	position: relative;
	z-index: 20;
	font-weight: 300;

.text p{
	margin-bottom: 2vmin;

	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	font-weight: 900;
	z-index: 100;
	position: relative;

	font-size: 5vw;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vw;
	margin: 0 -50% 0 50%;
	color: rgb(50,50,50);
	font-weight: 100;
	// transform: rotate(90deg) translateY(0%);

              // Progress indicator from here
// https://codepen.io/pankajparashar/pen/towxF

    var currentScroll, textLargeHeight, pushVal;
    var intViewportHeight = window.innerHeight;
    textLargeHeight = $('.textLarge').outerHeight();

    var innerHeight = $('.textLargeInner').height();
    var vh = (intViewportHeight/100);
    TweenMax.set($('.textLarge'), {
      rotation: 90,
      x: pushVal

    var getMax = function(){
        return $(document).height() - $(window).height();

    var getValue = function(){
        return $(window).scrollTop();

    if('max' in document.createElement('progress')){
        // Browser supports progress element
        var progressBar = $('progress');

        // Set the Max attr for the first time
        progressBar.attr({ max: getMax() });

        $(document).on('scroll', function(){
            // On scroll only Value attr needs to be calculated
            progressBar.attr({ value: getValue() });
            currentScroll = getValue();
            pushVal = (currentScroll * 1.5);
            console.log( innerHeight, currentScroll, pushVal );

            TweenMax.to($('.textLarge'), 0, {
              x: pushVal


            // On resize, both Max/Value attr needs to be calculated
            progressBar.attr({ max: getMax(), value: getValue() });
    else {
        var progressBar = $('.progress-bar'),
            max = getMax(),
            value, width;

        var getWidth = function(){
            // Calculate width in percentage
            value = getValue();
            width = (value/max) * 100;
            width = width + '%';
            return width;

        var setWidth = function(){
            progressBar.css({ width: getWidth() });


        $(document).on('scroll', setWidth);
        $(window).on('resize', function(){
            // Need to reset the Max attr
            max = getMax();

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................