CSS Interactive: Dimensional Realities

CSS Interactive: Dimensional Realities.markdown

CSS Interactive: Dimensional Realities

Messing around with CSS and quantum physics.

Some concepts from Dr Quantum: Flatland

A Pen by Jake Albaugh on CodePen.

License.

index.html

<input type=radio name=scene id=init checked />
<input type=radio name=scene id=circle />
<input type=radio name=scene id=plane />
<input type=radio name=scene id=circleplane />
<input type=radio name=scene id=sphereplane />
<input type=radio name=scene id=sphere />

<figure>
  <reality>
    <planebg></planebg>
    <planebg></planebg>
    <planebg></planebg>
    <plane></plane>
    <circle></circle>
    <planemask></planemask>
  </reality>
</figure>

<main>
  
  <nav>
    <label for=init>Reality</label>
    <label for=circle>Existence</label>
    <label for=plane>Greater Realities</label>
    <label for=circleplane>Perception</label>
    <label for=sphereplane>Confinement</label>
    <label for=sphere>The End of Time</label>
    <div class="progress"></div>
  </nav>
  
  <section class="section-init">
    <h1>Reality</h1>
    <p>In theory, we exist in five dimensions. For sake of simplicity, we are going to deal with the first four. The fourth is spacetime. Let’s represent our four dimensions as two with spacetime being the area of a square.</p>
    <p>This square is the entirety of time and space as we know it. The beginning and the end, manifested in a single, four-sided, comprehensible shape.</p>
  </section>
  <section class="section-circle">
    <h1>Existence</h1>
    <p>Inside of this two-dimensional existence, your entire life from birth to death is represented by a circle in that square.</p>
    <p>Maybe each year of your life is a slice of that circle, or maybe each year is a chunk of pixels inside of it. Whatever the case, this circle is <em>all</em> of you.</p>
  </section>
  <section class="section-plane">
    <h1>Greater Realities</h1>
    <p>It is theorized that our observed reality (in this example, the second dimension) is actually a part of greater dimensional realities, beyond our comprehension. A square cannot be a cube but a slice of a cube can be a square. We exist inside of a limited dimension which is inside of a greater dimension.</p>
    <p>This would mean that our square is actually a plane. Our lack of height would confine us to this “second dimension”, yet we would exist inside of superior third, fourth, even fifth dimensions.</p>
  </section>
  <section class="section-circleplane">
    <h1>Perception</h1>
    <p>An expanding and contracting circle shows us how a fourth dimension (in this case, time) could transcend our limited second dimension.</p>
    <p>Remember that in this example, our four dimensions are represented as two. That means the idea of time here (expanding/contracting) is representing an unknown superior dimension outside of time and space.</p>
    <p>Interesting enough, it is impossible for the third dimension (sphere) to fully exist within the second (square) but the fourth (time) can. A circle can move in time, but a sphere cannot be inside of a plane. The third dimension cannot go into the second...</p>
  </section>
  <section class="section-sphereplane">
    <h1>Confinement</h1>
    <p>...or can it? From the perspective of the second dimension this moving sphere, as it operates in a third (sphere) and fourth (time) dimension, translates to a slowly expanding and contracting circle just like we saw in the prior example.</p> 
    <p>The sphere cannot be spherical inside of the second dimension, yet it can be circular. In this sense the third dimension can transcend the second, but it is confined to the rules governing existence there.</p>
  </section>
  <section class="section-sphere">
    <h1>The End of Time</h1>
    <p>Your circle (time) will end. Technically it already has. Think about it. If a superior dimension outside of time exists, time must be complete inside of it. If time is complete, then our existence within time must be complete as well.</p> 
    <p>What is our circularity? Will our circularity transcend time? Are we already spheres? Has our reality been penetrated by greater dimensions?</p>
    <p>Only the end of time will tell.</p>
  </section>
</main>

style.scss

@import url(http://fonts.googleapis.com/css?family=Roboto:100,300);

//
// sizes
//

$s-rem: 12px;
$s-c-di: 20rem;
$s-c-rad:  $s-c-di / 2;
$s-p-di: 30rem;
$s-p-rad:  $s-p-di / 2;
$main-w: 400px;

// defining a rem
html { font-size: $s-rem; }



//
// colors
//

$c-plane: #eee;
$c-light: #ddd;
$c-mid:   #ccc;
$c-gray:  #666;



//
// stages
//

$stages: (
  1: 'init',
  2: 'circle',
  3: 'plane',
  4: 'circleplane',
  5: 'sphereplane',
  6: 'sphere'
);

$visibilities: (
  1: ('plane'),
  2: ('plane', 'circle'),
  3: ('plane', 'planebg', 'circle'),
  4: ('plane', 'planebg', 'circle'),
  5: ('plane', 'planebg', 'circle', 'planemask'),
  6: ('circle')
);



//
// time
//

$t-sht: 3s;
$t-lng: 6s;




//
// absolute centered position
//

@mixin perf($di) {
  position: absolute;
  top:  calc(50% - #{$di/2});
  left: calc(50% - #{$di/2});
  width: $di; height: $di; 
}




//
// transforms
//

$skew: rotateX( 70deg ) rotateZ( 45deg ) translateZ( 0 );
$after-transition: transform 400ms ease-in-out;
$elem-transition: opacity 200ms ease-in-out;




//
// navigation
//

nav {
  position: relative;
  display: block;
  bottom: 1rem;
  height: 4.2rem;
  width: calc(#{$main-w} - 4rem);
  font-size: 1rem;
  text-align: center;
  &::after { 
    content: ""; 
    display: table; 
    clear: both;
  }
  
  label { 
    display: none; 
    //position: absolute;
    padding: 1em 2em 1em 2em;
    box-sizing: border-box;
    user-select: none;
    text-transform: uppercase;
    background: white;
    cursor: pointer;
    transition: box-shadow 200ms ease-out;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
    border-radius: 2px;
    &:hover { box-shadow: 0px 2px 0px rgba(0,0,0,0.1); }
  }

  .progress {
    border-bottom: 1px solid $c-mid;
    position: absolute;
    bottom: -0.5rem;
    transition: width 250ms;
    
  }
  
}



//
// hiding inputs
//

input[type="radio"] { position: absolute; }



//
// layout
//

figure {
  position: relative;
  float: right;
  width: calc(100% - #{$main-w}); 
  height: 100vh;  
  margin: 0;
  overflow: hidden;
}

main {
  position: relative;
  float: left;
  box-sizing: border-box;
  width: $main-w;
  min-height: 100vh;
  padding: 2rem;
  border-right: 1px solid white;
  
  background: $c-plane;
  
  font-size: 1.2rem;
}



//
// context
//

reality {
  perspective: 1000px;
  @include perf($s-p-di);
  &, > * {
    display: block;
    transition: $elem-transition;
  }
  > * { opacity: 0; }
}



//
// nav label styles
//

@mixin triangle {
  content: "▶"; 
  position: absolute; 
  color: $c-light;
  font-family: Helvetica, sans-serif;
}

@mixin prev-label {
  display: block;
  text-align: left; 
  float: left;
  padding-left: 3rem;
  &::before { 
    @include triangle;
    left: 1rem;
    transform: rotate(180deg); 
  }
}

@mixin next-label {
  display: block;
  float: right; 
  padding-right: 3rem;
  &::after { 
    @include triangle;
    right: 1rem;
  }
}



//
// global stage triggers
//

@each $s, $stage in $stages {
  ##{$stage}:checked {
    
    // progress bar
    ~ main nav .progress {
      width: ($s - 1) / (length($stages) - 1) * 100%;
    }
    
    // previous label
    @if $s > 1 {
      ~ main nav label[for=#{map-get($stages,$s - 1)}] {
        @include prev-label;
      }
    }
    
    // next label
    @if $s < length($stages) {
      ~ main nav label[for=#{map-get($stages,$s + 1)}] {
        @include next-label;
      }
    }
    
    // show each element
    @each $visibility in map-get($visibilities, $s) {
      & ~ figure #{$visibility} { opacity: 1; }
    }
    
    // active section
    ~ main .section-#{$stage} {
      display: block;
      opacity: 1;
      z-index: 2;
    }
    
  }
}






//
// plane
//

@mixin plane-skew {
  transform-origin: 50% 50%;
  transform: $skew;
  transform-style: preserve-3d;
}

figure plane,
figure planebg,
figure planemask {
  perspective: 1000px;
  &, &::after { @include perf($s-p-di); }
  &::after {
    content: "";
    transition: $after-transition;

    #plane:checked ~ &,
    #circleplane:checked ~ &,
    #sphereplane:checked ~ &,
    #sphere:checked ~ & { @include plane-skew(); }
  }
}




//
// expanded planes
//

// not quite 100% to remove lines
$plane-offset: -99.8%;
#plane:checked,
#sphereplane:checked,
#circleplane:checked {
  // left
  ~ figure planebg:nth-child(1)::after {
    transform: rotateX(70deg) rotateZ(45deg) translate3d($plane-offset,0,0);
  }
  // back
  ~ figure planebg:nth-child(2)::after {
    transform: rotateX(70deg) rotateZ(45deg) translate3d($plane-offset,$plane-offset,0);
  }
  // right
  ~ figure planebg:nth-child(3)::after {
    transform: rotateX(70deg) rotateZ(45deg) translate3d(0,$plane-offset,0);
  }
}

$shooting-plane-offset: -400%;
#init:checked,
#circle:checked,
#sphere:checked {
  // left
  ~ figure planebg:nth-child(1)::after {
    transform: rotateX(70deg) rotateZ(45deg) translate3d($shooting-plane-offset,0,0);
  }
  // back
  ~ figure planebg:nth-child(2)::after {
    transform: rotateX(70deg) rotateZ(45deg) translate3d($shooting-plane-offset,$shooting-plane-offset,0);
  }
  // right
  ~ figure planebg:nth-child(3)::after {
    transform: rotateX(70deg) rotateZ(45deg) translate3d(0,$shooting-plane-offset,0);
  }
}
#sphere:checked {
  // front
  ~ figure plane::after,
  ~ figure planemask::after {
    transform: rotateX(70deg) rotateZ(45deg) translate3d($shooting-plane-offset / -2, $shooting-plane-offset / -2,0);
  }
}


figure plane,
figure planebg {
  &::after {
    background: $c-plane;
    box-sizing: border-box;
  }
}

figure planemask {
  z-index: 9;
  
  // only have fade transition on enter, not leave

  #sphereplane:checked ~ & {
    transition: $elem-transition;
  }
  
  &::after {
    $rad: 25%;
    $offset: 10%;
    $offset: $s-c-di * 0.14 / 1rem * $s-rem;
    background-image: radial-gradient(
      $offset $offset,
      ellipse $rad $rad,
      hsla(0,0,0,0)  0.000%,
      hsla(0,0,0,0) 50.000%,
      $c-plane 50.001%, $c-plane 100%
      //red 50.001%, red 100%
    );
    background-size: 400%;
    background-repeat: repeat;
    #sphereplane:checked ~ & {
      opacity: 0.85;
      animation: planemask $t-lng linear infinite;
    }
    #sphere:checked ~ & {
    }
  }
}

@keyframes planemask {
  0%, 50%, 62%, 87%, 100%
  { background-size: 400%; }
  10%, 40%, 75%
  { background-size: 100%; }
}






//
// circle / sphere
//

$shadows: (
  1: #{inset 0 0 $s-c-rad / 4 rgba(0,0,0,0.0)},
  2: #{inset $s-c-rad /  4 0 $s-c-rad / 4 rgba(0,0,0,0.3)},
  3: #{inset 0 $s-c-rad / -8 $s-c-rad / 4 rgba(0,0,0,0.8)},
  4: #{inset $s-c-rad / -4 0 $s-c-rad / 4 rgba(0,0,0,0.3)},
  5: #{inset 0 0 $s-c-rad / 4 rgba(0,0,0,0.0)}
);
$shadow-const: #{
  inset 0 $s-c-rad / -4 $s-c-rad rgba(0,0,0,0.6),
  inset 0 $s-c-rad / 8 $s-c-rad / 2 rgba(255,255,255,0.2)
};

@mixin sphere-spinning {
  box-shadow: $shadow-const;
  // hides visible after content that should be hidden by overflow
  backface-visibility: hidden;
  // sphere animation magic
  animation: sphere-shadow $t-sht linear infinite;
}

@mixin sphere-highlight {
  @include perf($s-c-di);
  border-radius: 50%;
  background: radial-gradient(
    rgba(255,255,255,0.2)   0%,
    rgba(255,255,255,0.0)  60%,
    rgba(255,255,255,0.0) 100%
  );
  animation: sphere-highlight $t-sht linear infinite;
}
 

figure circle {

  // hides highlight
  transform: translateZ(0);
  
  #circle:checked ~ &,
  #plane:checked ~ &,
  #circleplane:checked ~ & {
    overflow: visible;
  }
  
  
  #sphereplane:checked ~ & {
    animation: sphere-y-axis $t-lng linear infinite;
  }
  
  #sphereplane:checked ~ &::before,
  #sphere:checked ~ &::before { 
    @include sphere-highlight; 
  }
  
  &, &::after { 
    @include perf($s-c-di); 
    border-radius: 50%;
    overflow: hidden;
  }
  
  &::before, &::after { content: ""; }
  &::before { z-index: 2; }
  &::after  { z-index: 1; }
  
  &::after {
    background-color: $c-gray;

    transform: translate3d(0,0,2px);
    transition: $after-transition, opacity 200ms, top 500ms;

    #plane:checked ~ &,
    #circleplane:checked ~ & { 
      transform-origin: 50% 50%;
      transform: $skew translate(-60%, -60%);
    }
    #circleplane:checked ~ & { 
      animation: circle-scale $t-sht linear infinite;
    }
    #sphereplane:checked ~ &,
    #sphere:checked ~ & { @include sphere-spinning; }

    #sphereplane:checked ~ & {
      animation: sphere-shadow $t-sht linear infinite;
    }
  }
}


@keyframes circle-scale {
  0%, 100% { transform: $skew translate(-60%, -60%) scale( 1 ); } 
  40%, 60% { transform: $skew translate(-60%, -60%) scale( 0 ); }
}

@keyframes sphere-highlight {
  0%   { opacity: 0; transform: translate3d( 100%, -25%, 0); }
  20%  { opacity: 1; }
  50%  { opacity: 1; transform: translate3d(   0%, -10%, 0) scale(1.6); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-100%, -50%, 0) scale(3); }
}

@keyframes sphere-y-axis {
  0%, 50%, 100% 
  { transform: translate3d( 0,   0,  0 ); }
  25%
  { transform: translate3d( 0,  75%, 0 ); }
  75%
  { transform: translate3d( 0, -75%, 0 ); }
}

@keyframes sphere-shadow {
  @each $i,$shadow in $shadows {
    #{($i - 1)/(length($shadows) - 1)*100}% {
      box-shadow: $shadow-const, $shadow;
    } 
  }
}



//
// section styles / typography
//

body {
  font-family: Roboto, Helvetica, sans-serif;
  font-weight: 300;
  background-color: black;
}

section {
  position: absolute;
  left: 2rem; right: 2rem;
  height: calc(100vh - 10.4rem);
  overflow: scroll;
  z-index: 1;
  opacity: 0;
  text-shadow: -1px -1px 0px white;
  line-height: 1.6;
  transition: opacity 200ms;
  h1 { 
    font-weight: 100; 
    //margin-top: 0;
  }
}