Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="container">
<!-- Edit the letter attr to: N, E, T, F, L, I or X -->
   <netflixintro letter="N">
    <div class="helper-1">
      <div class="effect-brush">
        <span class="fur-31"></span>
        <span class="fur-30"></span>
        <span class="fur-29"></span>
        <span class="fur-28"></span>
        <span class="fur-27"></span>
        <span class="fur-26"></span>
        <span class="fur-25"></span>
        <span class="fur-24"></span>
        <span class="fur-23"></span>
        <span class="fur-22"></span>
        <span class="fur-21"></span>
        <span class="fur-20"></span>
        <span class="fur-19"></span>
        <span class="fur-18"></span>
        <span class="fur-17"></span>
        <span class="fur-16"></span>
        <span class="fur-15"></span>
        <span class="fur-14"></span>
        <span class="fur-13"></span>
        <span class="fur-12"></span>
        <span class="fur-11"></span>
        <span class="fur-10"></span>
        <span class="fur-9"></span>
        <span class="fur-8"></span>
        <span class="fur-7"></span>
        <span class="fur-6"></span>
        <span class="fur-5"></span>
        <span class="fur-4"></span>
        <span class="fur-3"></span>
        <span class="fur-2"></span>
        <span class="fur-1"></span>
      </div>
      <div class="effect-lumieres">
        <span class="lamp-1"></span>
        <span class="lamp-2"></span>
        <span class="lamp-3"></span>
        <span class="lamp-4"></span>
        <span class="lamp-5"></span>
        <span class="lamp-6"></span>
        <span class="lamp-7"></span>
        <span class="lamp-8"></span>
        <span class="lamp-9"></span>
        <span class="lamp-10"></span>
        <span class="lamp-11"></span>
        <span class="lamp-12"></span>
        <span class="lamp-13"></span>
        <span class="lamp-14"></span>
        <span class="lamp-15"></span>
        <span class="lamp-16"></span>
        <span class="lamp-17"></span>
        <span class="lamp-18"></span>
        <span class="lamp-19"></span>
        <span class="lamp-20"></span>
        <span class="lamp-21"></span>
        <span class="lamp-22"></span>
        <span class="lamp-23"></span>
        <span class="lamp-24"></span>
        <span class="lamp-25"></span>
        <span class="lamp-26"></span>
        <span class="lamp-27"></span>
        <span class="lamp-28"></span>
      </div>
    </div>
    <div class="helper-2">
      <div class="effect-brush">
        <span class="fur-31"></span>
        <span class="fur-30"></span>
        <span class="fur-29"></span>
        <span class="fur-28"></span>
        <span class="fur-27"></span>
        <span class="fur-26"></span>
        <span class="fur-25"></span>
        <span class="fur-24"></span>
        <span class="fur-23"></span>
        <span class="fur-22"></span>
        <span class="fur-21"></span>
        <span class="fur-20"></span>
        <span class="fur-19"></span>
        <span class="fur-18"></span>
        <span class="fur-17"></span>
        <span class="fur-16"></span>
        <span class="fur-15"></span>
        <span class="fur-14"></span>
        <span class="fur-13"></span>
        <span class="fur-12"></span>
        <span class="fur-11"></span>
        <span class="fur-10"></span>
        <span class="fur-9"></span>
        <span class="fur-8"></span>
        <span class="fur-7"></span>
        <span class="fur-6"></span>
        <span class="fur-5"></span>
        <span class="fur-4"></span>
        <span class="fur-3"></span>
        <span class="fur-2"></span>
        <span class="fur-1"></span>
      </div>
    </div>
    <div class="helper-3">
      <div class="effect-brush">
        <span class="fur-31"></span>
        <span class="fur-30"></span>
        <span class="fur-29"></span>
        <span class="fur-28"></span>
        <span class="fur-27"></span>
        <span class="fur-26"></span>
        <span class="fur-25"></span>
        <span class="fur-24"></span>
        <span class="fur-23"></span>
        <span class="fur-22"></span>
        <span class="fur-21"></span>
        <span class="fur-20"></span>
        <span class="fur-19"></span>
        <span class="fur-18"></span>
        <span class="fur-17"></span>
        <span class="fur-16"></span>
        <span class="fur-15"></span>
        <span class="fur-14"></span>
        <span class="fur-13"></span>
        <span class="fur-12"></span>
        <span class="fur-11"></span>
        <span class="fur-10"></span>
        <span class="fur-9"></span>
        <span class="fur-8"></span>
        <span class="fur-7"></span>
        <span class="fur-6"></span>
        <span class="fur-5"></span>
        <span class="fur-4"></span>
        <span class="fur-3"></span>
        <span class="fur-2"></span>
        <span class="fur-1"></span>
      </div>
    </div>
    <div class="helper-4">
      <div class="effect-brush">
        <span class="fur-31"></span>
        <span class="fur-30"></span>
        <span class="fur-29"></span>
        <span class="fur-28"></span>
        <span class="fur-27"></span>
        <span class="fur-26"></span>
        <span class="fur-25"></span>
        <span class="fur-24"></span>
        <span class="fur-23"></span>
        <span class="fur-22"></span>
        <span class="fur-21"></span>
        <span class="fur-20"></span>
        <span class="fur-19"></span>
        <span class="fur-18"></span>
        <span class="fur-17"></span>
        <span class="fur-16"></span>
        <span class="fur-15"></span>
        <span class="fur-14"></span>
        <span class="fur-13"></span>
        <span class="fur-12"></span>
        <span class="fur-11"></span>
        <span class="fur-10"></span>
        <span class="fur-9"></span>
        <span class="fur-8"></span>
        <span class="fur-7"></span>
        <span class="fur-6"></span>
        <span class="fur-5"></span>
        <span class="fur-4"></span>
        <span class="fur-3"></span>
        <span class="fur-2"></span>
        <span class="fur-1"></span>
      </div>
    </div>
  </netflixintro>
</div>
              
            
!

CSS

              
                html,
body
	margin: 0
	padding: 0
	width: 100%
	height: 100%

$bg-color: #000000
$base-color: #e40913

#container
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center
	width: 100%
	height: 100%
	background-color: $bg-color
	overflow: hidden
	
	netflixintro
		display: block
		position: relative
		width: 300px
		height: 300px
		overflow: hidden
		animation-name: zoom-in
		animation-delay: .5s
		animation-duration: 3.5s
		animation-timing-function: ease-in
		animation-fill-mode: forwards
		background-size: 4000px
		background-position: -1950px 0
		&::before
			content: ""
			position: absolute
			display: block
			background-color: $bg-color
			width: 150%
			height: 30%
			left: -25%
			bottom: -27%
			border-radius: 50%
			z-index: 5
			transform-origin: left center
			background-size: 4000px
			background-position: -1950px 0
	
		&[letter="N"]
			transform-origin: 30% center
			.helper-1
				width: 19.5%
				height: 100%
				background-color: rgba($base-color, .5)
				left: 22.4%
				top: 0
				transform: rotate(180deg)
				animation-name: fading-lumieres-box
				animation-duration: 2s
				animation-delay: .6s
				animation-fill-mode: forwards
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2.5s
					animation-fill-mode: forwards
					animation-delay: 1.2s
					[class*="fur-"]
						bottom: 0
						height: 40%
			.helper-3
				width: 19%
				height: 150%
				left: 40.5%
				top: -25%
				transform: rotate(-19.5deg)
				box-shadow: 0px 0px 35px -12px rgba(0, 0, 0, .4)
				overflow: hidden
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .8s
			.helper-2
				width: 19.5%
				height: 100%
				left: 57.8%
				top: 0
				transform: rotate(180deg)
				overflow: hidden
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .5s
	
		&[letter="E"]
			transform-origin: 30% center
			.helper-1
				width: 19.5%
				height: 100%
				background-color: rgba($base-color, .5)
				left: 22%
				top: 0
				transform: rotate(180deg)
				animation-name: fading-lumieres-box
				animation-duration: 2s
				animation-delay: .6s
				animation-fill-mode: forwards
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2.5s
					animation-fill-mode: forwards
					animation-delay: 1.2s
					[class*="fur-"]
						bottom: 0
						height: 40%
			.helper-2
				width: 17.5%
				height: 50%
				left: 38%
				top: -49px
				transform: rotate(270deg)
				overflow: hidden
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .8s
			.helper-3
				width: 17%
				height: 39%
				left: 33%
				top: 29%
				transform: rotate(-90deg)
				box-shadow: 0px 0px 35px -12px rgba(0, 0, 0, 0.4)
				overflow: hidden
				animation-name: fading-out
				animation-duration: 2s
				animation-fill-mode: forwards
				animation-delay: 1s
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .6s
			.helper-4
				width: 17.5%
				height: 50%
				left: 38%
				top: 196px
				transform: rotate(270deg)
				overflow: hidden
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .4s
					animation-delay: .5s
	
		&[letter="T"]
			transform-origin: center center
			.helper-1
				width: 19.5%
				height: 100%
				background-color: rgba($base-color, .5)
				left: 38%
				top: 0
				transform: rotate(180deg)
				animation-name: fading-lumieres-box
				animation-duration: 2s
				animation-delay: .6s
				animation-fill-mode: forwards
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2.5s
					animation-fill-mode: forwards
					animation-delay: 1s
					[class*="fur-"]
						bottom: 0
						height: 40%
			.helper-2
				width: 17.5%
				height: 54%
				left: 39%
				top: -55px
				transform: rotate(270deg)
				overflow: hidden
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .5s


		&[letter="F"]
			transform-origin: 30% center
			.helper-1
				width: 19.5%
				height: 100%
				background-color: rgba($base-color, .5)
				left: 22%
				top: 0
				transform: rotate(180deg)
				animation-name: fading-lumieres-box
				animation-duration: 2s
				animation-delay: .6s
				animation-fill-mode: forwards
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2.5s
					animation-fill-mode: forwards
					animation-delay: 1.2s
					[class*="fur-"]
						bottom: 0
						height: 40%
			.helper-2
				width: 17.5%
				height: 50%
				left: 38%
				top: -49px
				transform: rotate(270deg)
				overflow: hidden
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .7s
			.helper-3
				width: 17%
				height: 39%
				left: 33%
				top: 29%
				transform: rotate(-90deg)
				box-shadow: 0px 0px 35px -12px rgba(0, 0, 0, 0.4)
				overflow: hidden
				animation-name: fading-out
				animation-duration: 2s
				animation-fill-mode: forwards
				animation-delay: 1s
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .5s


		&[letter="L"]
			transform-origin: 30% center
			.helper-1
				width: 19.5%
				height: 100%
				background-color: rgba($base-color, .5)
				left: 22%
				top: 0
				transform: rotate(180deg)
				animation-name: fading-lumieres-box
				animation-duration: 2s
				animation-delay: .6s
				animation-fill-mode: forwards
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2.5s
					animation-fill-mode: forwards
					animation-delay: .8s
					[class*="fur-"]
						bottom: 0
						height: 40%
			.helper-2
				width: 17.5%
				height: 50%
				left: 38%
				top: 196px
				transform: rotate(270deg)
				overflow: hidden
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .4s

		&[letter="I"]
			transform-origin: center center
			.helper-1
				width: 19.5%
				height: 100%
				background-color: rgba($base-color, .5)
				left: 38%
				top: 0
				transform: rotate(180deg)
				animation-name: fading-lumieres-box
				animation-duration: 2s
				animation-delay: .6s
				animation-fill-mode: forwards
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2.5s
					animation-fill-mode: forwards
					animation-delay: 1s
					[class*="fur-"]
						bottom: 0
						height: 40%

		&[letter="X"]
			transform-origin: center center
			.helper-1
				width: 19%
				height: 150%
				left: 40.5%
				top: -25%
				transform: rotate(-19.5deg)
				animation-name: fading-lumieres-box
				animation-duration: 2s
				animation-delay: .6s
				animation-fill-mode: forwards
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2.5s
					animation-fill-mode: forwards
					animation-delay: 1.2s
					[class*="fur-"]
						bottom: 0
						height: 40%
			.helper-2
				width: 19%
				height: 150%
				left: 40.5%
				top: -25%
				transform: rotate(19.5deg)
				overflow: hidden
				.effect-brush
					animation-name: brush-moving
					animation-duration: 2s
					animation-fill-mode: forwards
					animation-delay: .5s

		[class*="helper-"]
			position: absolute
			
			.effect-brush
				position: absolute
				width: 100%
				height: 300%
				top: 0
				overflow: hidden
				&::before
					display: block
					content: ""
					position: absolute
					background-color: $base-color
					width: 100%
					height: 70%
					box-shadow: 0px 0px 29px 24px $base-color
				
				[class*="fur-"]
					display: block
					position: absolute
					bottom: 10%
					height: 30%

				.fur-1
					left: 0%
					width: 3.8%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 15%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 100%)
				.fur-2
					left: 3.8%
					width: 2.8%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 10%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0) 100%)
				.fur-3
					left: 6.6%
					width: 4.8%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 37%, rgba(0, 0, 0, 0) 100%)
				.fur-4
					left: 11.4%
					width: 4%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 23%, rgba(0, 0, 0, 0) 100%)
				.fur-5
					left: 15.4%
					width: 4%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 15%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%)
				.fur-6
					left: 19.4%
					width: 2.5%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 27%, rgba(0, 0, 0, 0) 89%, rgba(0, 0, 0, 0) 100%)
				.fur-7
					left: 21.9%
					width: 4%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 20%, rgba(0, 0, 0, 0) 100%)
				.fur-8
					left: 25.9%
					width: 2%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 30%, rgba(0, 0, 0, 0) 100%)
				.fur-9
					left: 27.9%
					width: 4%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 35%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
				.fur-10
					left: 31.9%
					width: 3.5%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 39%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
				.fur-11
					left: 35.4%
					width: 2%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 34%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
				.fur-12
					left: 37.4%
					width: 2.6%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 22%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
				.fur-13
					left: 40%
					width: 6%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 47%, rgba(0, 0, 0, 0) 100%)
				.fur-14
					left: 46%
					width: 2%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 36%, rgba(0, 0, 0, 0) 100%)
				.fur-15
					left: 48%
					width: 5.5%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 29%, rgba(0, 0, 0, 0) 100%)
				.fur-16
					left: 53.5%
					width: 3%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 39%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
				.fur-17
					left: 56.5%
					width: 4.1%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 45%, rgba(0, 0, 0, 0) 100%)
				.fur-18
					left: 60.6%
					width: 2.4%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 34%, rgba(0, 0, 0, 0) 100%)
				.fur-19
					left: 63%
					width: 4%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 47%, rgba(0, 0, 0, 0) 100%)
				.fur-20
					left: 67%
					width: 1.5%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 27%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
				.fur-21
					left: 68.5%
					width: 2.8%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 37%, rgba(0, 0, 0, 0) 100%)
				.fur-22
					left: 71.3%
					width: 2.3%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 9%, rgba(0, 0, 0, 0) 100%)
				.fur-23
					left: 73.6%
					width: 2.2%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 28%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0) 100%)
				.fur-24
					left: 75.8%
					width: 1%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 37%, rgba(0, 0, 0, 0) 100%)
				.fur-25
					left: 76.8%
					width: 2.1%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 28%, rgba(0, 0, 0, 0) 100%)
				.fur-26
					left: 78.9%
					width: 4.1%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 34%, rgba(0, 0, 0, 0) 100%)
				.fur-27
					left: 83%
					width: 2.5%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 21%, rgba(0, 0, 0, 0) 100%)
				.fur-28
					left: 85.5%
					width: 4.5%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 39%, rgba(0, 0, 0, 0) 100%)
				.fur-29
					left: 90%
					width: 2.8%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 30%, rgba(0, 0, 0, 0) 100%)
				.fur-30
					left: 92.8%
					width: 3.5%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 19%, rgba(0, 0, 0, 0) 100%)
				.fur-31
					left: 96.3%
					width: 3.7%
					background: linear-gradient(to bottom, $base-color 0%, $base-color 37%, rgba(0, 0, 0, 0) 100%)

			.effect-lumieres
				position: absolute
				width: 100%
				height: 100%
				opacity: 0
				animation-name: showing-lumieres
				animation-duration: 2s
				animation-delay: 1.6s
				animation-fill-mode: forwards

				[class*="lamp-"]
					position: absolute
					display: block
					height: 100%
					box-shadow: 0px 0px 10px 0px rgba($base-color, 0.75)
					background: var(--color)

					&::before
						position: absolute
						content: " "
						display: block
						width: 100%
						height: 100%
						background: var(--color)
						box-shadow: 0px 0px 10px 0px rgba($base-color, 0.75)

				.lamp-1
					--color: #ff0100
					z: 6
					left: 0.7%
					width: 1%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-2
					--color: #ffde01
					left: 2.2%
					width: 1.4%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-3
					--color: #ff00cc
					left: 5.8%
					width: 2.1%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-4
					--color: #04fd8f
					left: 10.1%
					width: 2%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-5
					--color: #ff0100
					left: 12.9%
					width: 1.4%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-6
					--color: #ff9600
					left: 15.3%
					width: 2.8%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-7
					--color: #0084ff
					left: 21.2%
					width: 2.5%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-8
					--color: #f84006
					left: 25%
					width: 2.5%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-9
					--color: #ffc601
					left: 30.5%
					width: 3%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-10
					--color: #ff4800
					left: 36.3%
					width: 3%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-11
					--color: #fd0100
					left: 41%
					width: 2.2%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-12
					--color: #01ffff
					left: 44.2%
					width: 2.6%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-13
					--color: #ffc601
					left: 51.7%
					width: 0.5%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-14
					--color: #ffc601
					left: 52.1%
					width: 1.8%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-15
					--color: #0078fe
					left: 53.8%
					width: 2.3%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-16
					--color: #0080ff
					left: 57.2%
					width: 2%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-17
					--color: #ffae01
					left: 62.3%
					width: 2.9%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-18
					--color: #ff00bf
					left: 65.8%
					width: 1.7%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-19
					--color: #a601f4
					left: 72.8%
					width: 0.8%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-20
					--color: #f30b34
					left: 74.3%
					width: 2%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-21
					--color: #ff00bf
					left: 79.8%
					width: 2%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-22
					--color: #04fd8f
					left: 78.2%
					width: 2%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-23
					--color: #01ffff
					left: 78.5%
					width: 2%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-24
					--color: #a201ff
					left: 85.3%
					width: 1.1%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-25
					--color: #ec0014
					left: 86.9%
					width: 1.1%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-26
					--color: #0078fe
					left: 88.8%
					width: 2%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-27
					--color: #ff0036
					left: 92.4%
					width: 2.4%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s
				.lamp-28
					--color: #06f98c
					left: 96.2%
					width: 2.1%
					animation-delay: (random(200) / 100) + s
					&::before
						left: percentage((random(200) / 100))
						animation-delay: (random(200) / 100) + s

				.lamp-1,
				.lamp-3,
				.lamp-5,
				.lamp-7,
				.lamp-9,
				.lamp-11,
				.lamp-13,
				.lamp-15,
				.lamp-17,
				.lamp-19,
				.lamp-21,
				.lamp-23,
				.lamp-25,
				.lamp-27
					animation-name: lumieres-moving-left
					animation-duration: 5s
					animation-fill-mode: forwards
					&::before 
						animation-name: lumieres-moving-left
						animation-duration: 5.5s
				 
				.lamp-2,
				.lamp-4,
				.lamp-6,
				.lamp-8,
				.lamp-10,
				.lamp-12,
				.lamp-14,
				.lamp-16,
				.lamp-18,
				.lamp-20,
				.lamp-22,
				.lamp-24,
				.lamp-26,
				.lamp-28
					animation-name: lumieres-moving-right
					animation-duration: 5s
					animation-fill-mode: forwards
					&::before 
						animation-name: lumieres-moving-right
						animation-duration: 5.5s
					
@keyframes brush-moving
	0%
		transform: translateY(0)
	100%
		transform: translateY(-100%)
	
@keyframes fading-out
	0%
		opacity: 1
	100%
		opacity: 0

@keyframes lumieres-moving-right
	0%
		transform: translate(0)
	40%
		transform: translate(-10px) scaleX(1)
	50%
		transform: translate(-60px)
	100%
		transform: translate(-120px) scaleX(3)

@keyframes lumieres-moving-left
	0%
		transform: translate(0)
	40%
		transform: translate(10px) scaleX(1)
	50%
		transform: translate(60px)
	100%
		transform: translate(120px) scaleX(3)

@keyframes zoom-in
	0%
		transform: scale(1)
	100%
		transform: scale(15)

@keyframes showing-lumieres
	0%
		opacity: 0
	100%
		opacity: 1

@keyframes fading-lumieres-box
	0%
		background-color: rgba($base-color, .5)
	100%
		background-color: rgba($base-color, .0)

              
            
!

JS

              
                // no javascript =)
              
            
!
999px

Console