Letter Super Nova

index.pug

- var letters = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

- var letters = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]

- var numRings= 100

section
	.wrapper
		//- each item in letters	
		//- 	div.el= item
		- for (var i= 0; i < numRings; i++)
			.ring-wrap
				.ring
					.el= letters[Math.floor(Math.random() * letters.length)]
				

letter-super-nova.markdown

Letter Super Nova

A Pen by ryan_brwn on CodePen.

License.

script.js

// $(document).ready(function(){
//   var windowH = $(window).height()/2,
//       windowW = $(window).width()/2,
//       sphere = $('.wrapper'),
//       vertPos,
//       horPos,
//       rate = .5;
  
//   var handleMouse = function(){
//       sphere.css({
//         'transform':'rotateX(' + (vertPos*-1 + 10) * rate + 'deg) rotateZ(' + (-horPos) * rate + 'deg)'
//       });
//     }
//   $(window).mousemove(function(e){
//     horPos = e.pageX*.15 - windowW;  
//     vertPos = e.pageY*.15 - windowH;
//     requestAnimationFrame(handleMouse);
//   });
// });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

$numRings: 100;
$start: 50px;
$end: $start + 250px;
$pulseDur: 1.5;
// $color1: mix(saturate(lighten(red, 30%), 40%), blue, 40%);
$color1: mix(saturate(lighten(red, 30%), 40%), blue, 40%);
$color2: saturate(lighten(cyan, 20%), 10%);
$dot-size: 0;
$ease: ease-in-out;

@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));
  @return $randomNum;
}

html, body {
	font-family: "Helvetica", "Arial", san-serif;
	// font-family: "source-code", "Arial", san-serif;
	color: white;
	background: black;	
}

section {
	width: 100vw;
	height: 100vh;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 400px;
	transform: translate3d(0,0,0);
}
.wrapper {
	$size: 30vw;
	width: $size;
	height: $size;
	position: relative;
	transform-style: preserve-3d;
	animation: orbit 30s linear infinite;
	will-change: transform;
}
.ring-wrap {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	// background: rgba(red, .3);
	border-radius: 100%;
	
	@for $i from 1 through $numRings {
		&:nth-child(#{$i*1}) {
			will-change: transform;
			transform: rotateX(360/$numRings*$i*1deg);
			transform: rotateZ( randomNum(0, 360)*1deg ) rotateX( randomNum(0, 360)*1deg ) rotateY( randomNum(0, 360)*1deg );
			
			.el {
				$delaySetting: ($pulseDur * .002) * $i + s;
				animation-delay: $delaySetting, $delaySetting;
				animation-fill-mode: both;
				font-weight: bold;
				font-size: 3vw;
				font-size: randomNum(2, 2.5)*1vw + randomNum(1, 10)*.01;
				// font-size: 2vw;
				text-transform: uppercase;
				// &:nth-child(even) {
				// 	animation-delay: ($pulseDur * .0025) * $i + 1.5s, ($pulseDur * .0025) * $i + 1.5s;				
				// }
				// animation-duration: 10/$i*10s + 2s;
			}
		}
	}
}
.ring {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.el {
		// mix-blend-mode: screen;
		will-change: transform;
		width: $dot-size;
		height: $dot-size;
		border-radius: 100%;
		// background: white;
		transition: transform .5s ease-in-out;
		transform: translateZ($start);	
		animation: pulse $pulseDur + s $ease infinite, fadeMe $pulseDur + s $ease infinite;
		animation-fill-mode: both, both;
}

// .wrapper:active .el {
// 	animation: pulse 2s ease-in-out infinite;
// }

@keyframes orbit {
	0%   {transform: rotateX(0deg)    rotateY(0deg)   }
	100% {transform: rotateX(360deg)  rotateY(360deg) }
}
@keyframes pulse {
	0%    {transform: translateZ($start); color: $color2, 20%; }
	20%   {color: $color2 }
	50%   {transform: translateZ($end); color: $color1;}
	100%  {transform: translateZ($end); color: $color1;}
}
@keyframes fadeMe {
	0%     {opacity: 0}
	5%     {opacity: 1}
	40%    {opacity: 1}
	55%    {opacity: 0}
	100%   {opacity: 0}
}