diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..9a7c3a6
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+hacktheflag.net
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..25ff75f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
H
+
a
+
c
+
k
+
+
+
t
+
h
+
e
+
+
+
f
+
l
+
a
+
g
+
+
+
+
+
+
i
+
s
+
+
+
C
+
o
+
m
+
i
+
n
+
g
+
.
+
.
+
.
+
Coming...
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..f0b71c3
--- /dev/null
+++ b/index.js
@@ -0,0 +1,168 @@
+$(document).ready(function(){
+
+ /* ------------------------------------------------------------------------ *
+ 4 states per letter: Transparent | Line | Block | Visible.
+ These states are shuffled for a unique "decode" effect each time.
+ * ------------------------------------------------------------------------ */
+
+ var text = document.getElementsByClassName('decode-text')[0];
+ // debug with
+ // console.log(text, text.children.length);
+
+ // assign the placeholder array its places
+ var state = [];
+ for(var i = 0, j = text.children.length; i < j; i++ ){
+ text.children[i].classList.remove('state-1','state-2','state-3');
+ state[i] = i;
+ }
+
+ // shuffle the array to get new sequences each time
+ var shuffled = shuffle(state);
+
+ for(var i = 0, j = shuffled.length; i < j; i++ ){
+ var child = text.children[shuffled[i]];
+ classes = child.classList;
+
+ // fire the first one at random times
+ var state1Time = Math.round( Math.random() * (2000 - 300) ) + 50;
+ if(classes.contains('text-animation')){
+ setTimeout(firstStages.bind(null, child), state1Time);
+ }
+ }
+
+ // send the node for later .state changes
+ function firstStages(child){
+ if( child.classList.contains('state-2') ){
+ child.classList.add('state-3');
+ } else if( child.classList.contains('state-1') ){
+ child.classList.add('state-2')
+ } else if( !child.classList.contains('state-1') ){
+ child.classList.add('state-1');
+ setTimeout(secondStages.bind(null, child), 100);
+ }
+ }
+ function secondStages(child){
+ if( child.classList.contains('state-1') ){
+ child.classList.add('state-2')
+ setTimeout(thirdStages.bind(null, child), 100);
+ }
+ else if( !child.classList.contains('state-1') )
+ {
+ child.classList.add('state-1')
+ }
+ }
+ function thirdStages(child){
+ if( child.classList.contains('state-2') ){
+ child.classList.add('state-3')
+ }
+ }
+
+ function shuffle(array) {
+ var currentIndex = array.length, temporaryValue, randomIndex;
+
+ // While there remain elements to shuffle...
+ while (0 !== currentIndex) {
+ // Pick a remaining element...
+ randomIndex = Math.floor(Math.random() * currentIndex);
+ currentIndex -= 1;
+
+ // And swap it with the current element.
+ temporaryValue = array[currentIndex];
+ array[currentIndex] = array[randomIndex];
+ array[randomIndex] = temporaryValue;
+ }
+ return array;
+ }
+
+
+});
+
+$(document).ready(function(){
+
+ function fitElementToParent(el, padding) {
+ var timeout = null;
+ function resize() {
+ if (timeout) clearTimeout(timeout);
+ anime.set(el, {scale: 1});
+ var pad = padding || 0;
+ var parentEl = el.parentNode;
+ var elOffsetWidth = el.offsetWidth - pad;
+ var parentOffsetWidth = parentEl.offsetWidth;
+ var ratio = parentOffsetWidth / elOffsetWidth;
+ timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
+ }
+ resize();
+ window.addEventListener('resize', resize);
+ }
+
+ var sphereAnimation = (function() {
+
+ var sphereEl = document.querySelector('.sphere-animation');
+ var spherePathEls = sphereEl.querySelectorAll('.sphere path');
+ var pathLength = spherePathEls.length;
+ var hasStarted = false;
+ var aimations = [];
+
+ fitElementToParent(sphereEl);
+
+ var breathAnimation = anime({
+ begin: function() {
+ for (var i = 0; i < pathLength; i++) {
+ aimations.push(anime({
+ targets: spherePathEls[i],
+ stroke: {value: ['rgba(255,75,75,1)', 'rgba(50,50,50,.35)'], duration: 500},
+ translateX: [2, -4],
+ translateY: [2, -4],
+ easing: 'easeOutQuad',
+ autoplay: false
+ }));
+ }
+ },
+ update: function(ins) {
+ aimations.forEach(function(animation, i) {
+ var percent = (1 - Math.sin((i * .35) + (.0022 * ins.currentTime))) / 2;
+ animation.seek(animation.duration * percent);
+ });
+ },
+ duration: Infinity,
+ autoplay: false
+ });
+
+ var introAnimation = anime.timeline({
+ autoplay: false
+ })
+ .add({
+ targets: spherePathEls,
+ strokeDashoffset: {
+ value: [anime.setDashoffset, 0],
+ duration: 3900,
+ easing: 'easeInOutCirc',
+ delay: anime.stagger(190, {direction: 'reverse'})
+ },
+ duration: 2000,
+ delay: anime.stagger(60, {direction: 'reverse'}),
+ easing: 'linear'
+ }, 0);
+
+ var shadowAnimation = anime({
+ targets: '#sphereGradient',
+ x1: '25%',
+ x2: '25%',
+ y1: '0%',
+ y2: '75%',
+ duration: 30000,
+ easing: 'easeOutQuint',
+ autoplay: false
+ }, 0);
+
+ function init() {
+ introAnimation.play();
+ breathAnimation.play();
+ shadowAnimation.play();
+ }
+
+ init();
+
+ })();
+
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5191b36
--- /dev/null
+++ b/style.css
@@ -0,0 +1,117 @@
+*{
+ box-sizing: border-box;
+ margin: 0;
+}
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ flex-direction: column;
+ background-color: black;
+}
+h1{
+ color: white;
+ margin-bottom: 15px;
+}
+
+
+
+@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);
+ .decode-text {
+ width: 100%;
+ font-size: 30px;
+ text-align: center;
+}
+ .space {
+ display: inline-block;
+ width: 10px;
+}
+.h1{
+ font-size: larger;
+ font-weight: bolder;
+}
+ .text-animation {
+ display: inline-block;
+ position: relative;
+ color: transparent;
+ text-transform: uppercase;
+}
+ .text-animation:before {
+ content: "";
+ color: white;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ background: white;
+ width: 0;
+ height: 1.2em;
+ -webkit-transform: translate(-50%, -55%);
+ -ms-transform: translate(-50%, -55%);
+ transform: translate(-50%, -55%);
+}
+ .text-animation.state-1:before {
+ width: 1px;
+}
+ .text-animation.state-2:before {
+ width: 0.9em;
+}
+ .text-animation.state-3 {
+ color: white;
+}
+ .text-animation.state-3:before {
+ width: 0;
+}
+ #refresh {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ cursor: pointer;
+}
+ div {
+ font-family: "Share Tech Mono", monospace;
+}
+ body {
+ height: 100vh;
+ align-items: center;
+ display: flex;
+}
+
+
+
+.animation-wrapper {
+ width: 35%;
+ padding-bottom: 20%;
+ }
+
+ .sphere-animation {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 580px;
+ height: 580px;
+ margin: -290px 0 0 -290px;
+ }
+
+ .sphere path {
+ fill: url(#sphereGradient);
+ backface-visibility: hidden;
+ }
+
+ @media (min-width: 500px) {
+ .sphere path {
+ stroke-width: .4px;
+ }
+ }
+ @media screen and (max-width: 500px) {
+ .space {
+ display: block;
+ }
+ .animation-wrapper {
+ width: 90%;
+ padding-bottom: 40%;
+ }
+ .nr-hide{
+ display: none;
+ }
+ }
\ No newline at end of file