@font-face {
font-family: "Avant Garde";
src: url("https://assets.codepen.io/383755/avant-garde.woff2") format("woff2");
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
box-sizing: border-box;
overflow: hidden;
background: #fff;
--mouseX: 0;
--mouseY: 0;
--x: 0;
--progress: 0;
font-family: "Avant Garde", Helvetica, sans-serif;
cursor: none;
&:after{
content:'';
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:-100;
background:var(--label) 50% 50% / cover;
filter:blur(10px);
opacity:0;
transition:0.3s ease-in-out;
}
> span {
position: absolute;
bottom: 10px;
font-size: 12px;
transition: 0.3s ease-in-out;
display: inline-block;
overflow: hidden;
padding: 0 20px;
span {
display: inline-block;
position: relative;
transition: 0.3s ease-in-out;
&:before {
content: "pause";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-150%);
}
}
}
> strong {
position: absolute;
left: 0.5rem;
top: 50%;
writing-mode: vertical-lr;
font-size: 25px;
&:last-of-type {
left: auto;
right: 0.5rem;
}
span {
display: inline-block;
padding: 2px 0;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(
to bottom,
transparent 25%,
#000 33%,
#000 66%,
transparent 75%
);
background-size: 100% 300%;
background-position: 50% 100%;
animation: shift 2s ease-in-out infinite;
@keyframes shift {
to {
background-position: 50% 0%;
}
}
@for $i from 1 through 3 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i/4}s;
}
}
}
}
&:before {
transform-style: preserve-3d;
content: "";
position: absolute;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 99;
backdrop-filter: blur(30px) saturate(0);
-webkit-mask: linear-gradient(
to right,
#000,
transparent 25%,
transparent 75%,
#000
);
}
&:hover {
#cursor {
opacity: 1;
}
}
#cursor {
width: 30px;
height: 30px;
transform: scale(0.75);
border-radius: 100%;
box-shadow: 0 0 0 5px #000;
position: absolute;
background: #fff;
z-index: 999;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
mix-blend-mode: soft-light;
&:before,
&:after {
content: "";
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
transition: 0.3s ease-in-out;
transform:scaleY(1);
background: #000;
clip-path: polygon(20% 0, 100% 50%, 100% 50%, 20% 100%);
}
}
#marquee {
position: absolute;
width: 100vw;
z-index: 100;
overflow: hidden;
top: 50%;
transform: translateY(-50%) skewY(20deg);
left: 0;
pointer-events: none;
display: flex;
padding: 5vw 0;
z-index: -100;
.content {
display: flex;
width: 100%;
justify-content: space-around;
animation: scroll 18s linear infinite;
h1 {
color: #efefef;
font-size: 5vw;
letter-spacing: 5.35vw;
width: 100vw;
line-height: 1;
font-weight: 900;
margin: 0;
span {
display: inline-block;
animation: bob 1.5s ease-in-out infinite alternate;
@for $i from 1 through 20 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i/-2.25}s;
}
}
@keyframes bob {
from {
transform: translateY(0vw) skewY(-20deg);
}
to {
transform: translateY(2.5vw) skewY(-20deg);
}
}
}
}
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
}
&.playing {
&:after{
transition:opacity 1s ease-in-out 0.5s;
opacity:1;
transform:scale(1.25) translate(calc(var(--mouseX) * -5px), calc(var(--mouseY) * -5px));
}
> span span {
transform: translateY(100%);
}
#cursor {
&:before {
clip-path: polygon(10% 0, 40% 0, 40% 100%, 10% 100%);
}
&:after {
clip-path: polygon(60% 0, 90% 0, 90% 100%, 60% 100%);
}
}
#main {
pointer-events: none;
.panel {
pointer-events: all;
}
}
}
&.noclick {
#cursor{
&:before, &:after{
transform:scaleY(0);
}
}
> span {
transform: translateY(50px);
}
#player {
opacity: 0;
}
#wrapper {
pointer-events: none;
}
}
#main {
height: 100vh;
width: 100vw;
position: fixed;
overflow: scroll;
top: 0;
left: 0;
z-index: 9;
* {
transform-style: preserve-3d;
}
#albums {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 9;
pointer-events: none;
display: grid;
place-items: center;
perspective: 600px;
.albumwrap {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transform: rotateX(90deg);
transform-origin: 50% calc(50vh + 50px);
}
.album {
position: absolute;
width: 500px;
height: 500px;
transform-origin: 50% 2500px;
left: calc(50% - 250px);
top: calc(50% - 250px);
pointer-events: none;
audio {
position: absolute;
top: 0;
left: 0;
z-index: 999;
pointer-events: none;
opacity: 0;
}
&.playing {
.cover {
transform: rotateX(-90deg) translateY(100vh) scale(0.5);
transition: transform 0.75s cubic-bezier(0.275, 0.885, 0.32, 1) 0.3s;
span {
transform: translateY(-50%) rotate(180deg) translateX(75vw);
&:before {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transition: clip-path 0.3s
cubic-bezier(0.175, 0.885, 0.32, 1.075) 0s;
}
&:last-of-type {
transform: translateY(-50%) translateX(75vw);
}
}
&:after {
transition: 0.3s ease-in-out;
transform: rotateY(0deg) translateZ(-2px);
}
&:before {
top: 200%;
transition: top 0.5s cubic-bezier(0.275, 0.885, 0.32, 1) 0.3s;
}
img {
transition: 0.3s ease-in-out;
transform: rotateY(0deg);
}
}
}
.cover {
width: 100%;
height: 100%;
transform-origin: 50% 325px;
transform: rotateX(-90deg) translateY(15px) scale(0.75);
top: 0;
left: 0;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.075);
span {
position: absolute;
left: -50px;
writing-mode: vertical-lr;
display: inline-block;
height: 100%;
top: 50%;
transform: translateY(-50%) rotate(180deg);
font-weight: 900;
pointer-events: none;
transition: transform 0.75s cubic-bezier(0.375, 0.885, 0.32, 1) 0.6s;
font-size: 20px;
&:before {
content: "";
position: absolute;
width: 490px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23000000; stroke-width:1.5; stroke-linecap:round; %7D %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E")
0px 50% / 80px 80px repeat-x;
animation: waving 3s linear infinite reverse;
transform: scaleX(1);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: clip-path 1s cubic-bezier(0.175, 0.885, 0.32, 1.075)
1s;
@keyframes waving {
to {
background-position: 80px 50%, 160px 50%;
}
}
left: -480px;
top: 0;
transform-origin: 100% 5px;
transform: rotate(-90deg);
}
strong {
display: inline-block;
position: relative;
background: #fff;
z-index: 2;
padding-bottom: 10px;
}
&:last-of-type {
left: auto;
right: -50px;
transform: translateY(-50%);
}
}
&:before,
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 135%;
left: 0;
}
&:before {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.05),
rgba(255, 255, 255, 0.005) 50%
);
transform: rotateY(calc(var(--mouseX) * 7.5deg))
rotateX(calc(var(--mouseY) * -7.5deg + 45deg)) rotate(180deg)
translateZ(225px);
transition: top 1s cubic-bezier(0.275, 0.885, 0.32, 1) 0s;
}
&:after {
top: 0;
transform: rotateY(calc(var(--mouseX) * 7.5deg))
rotateX(calc(var(--mouseY) * 7.5deg)) translateZ(-1.5px)
translateX(calc(var(--mouseX) * -4px))
translateY(calc(var(--mouseY) * 3px)) scale(1.005);
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25)
),
var(--src) 50% 50% / cover;
}
img,
&:after {
border-radius: 3px;
}
img {
height: 500px;
width: auto;
object-fit: cover;
transform: rotateY(calc(var(--mouseX) * 7.5deg))
rotateX(calc(var(--mouseY) * 7.5deg));
}
}
@for $i from 1 through 10 {
&:nth-of-type(#{$i}) {
transform: rotate(
calc(var(--progress) * -360deg + #{(36 * ($i - 1))}deg)
);
}
}
}
}
#wrapper {
height: 1000vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(10, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
.panel {
height: 100vh;
width: 100vw;
z-index: 999;
}
}
}
&.scale {
#player {
transform: scale(1);
transition: transform 1s ease-in-out 0s;
}
}
#lp,
.base {
animation: stopPlaying 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.075) 1
forwards;
@keyframes stopPlaying {
from {
transform: rotateX(calc(70deg + (var(--mouseY) * 10deg)))
rotate(calc(-35deg + (var(--mouseX) * 20deg))) translateZ(var(--z2))
translate(0);
}
to {
transform: rotateX(0) rotate(0) translateZ(var(--z))
translate(var(--x), var(--y));
}
}
}
.wrap {
--z: -200px;
--z2: 0px;
--y: 0px;
}
#lp {
width: 300px;
height: 300px;
border-radius: 100%;
z-index: 999;
top: 75px;
left: 25px;
--z: 300px;
--z2: 10px;
--x: 25px;
--y: -25px;
transform: translateZ(var(--z));
transform-origin: calc(50% + 25px) 50%;
.disc,
.disc:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: rotateX(0deg) translateZ(0px);
}
.disc:before {
background: radial-gradient(
circle at center,
#fff 5px,
#000 5px,
#000 6px,
transparent 5.5px,
transparent 40px,
#fff 40px,
#fff 41px,
#000 41px,
#000 75px,
rgba(255, 255, 255, 0.001) 100px
),
var(--label) 50% 50% / 100px 100px no-repeat,
repeating-radial-gradient(
circle at center,
#000 2px,
#222 2px,
#222 3px,
#000 3px,
#000 5px
);
}
}
&.playing {
#lp {
.disc {
transform: rotateX(180deg) translateZ(0px);
transition: transform 0.4s ease-in-out;
}
}
#lp,
.base {
animation: startPlaying 0.5s ease-in-out 1 forwards;
.disc:before {
animation: spin 3s linear infinite 0.5s;
@keyframes spin {
to {
transform: rotate(360deg);
}
}
}
#dials {
.slider {
.face {
transform: translateY(-60px) rotateX(-90deg);
transition: 1.5s ease-in-out 0.5s;
}
}
.dial {
transform: translateZ(0px) rotateX(-90deg);
transition-delay: 0.35s;
&:nth-of-type(2) {
transition-delay: 0.45s;
}
}
}
}
.wrap {
transform: translateZ(0px);
.base {
@keyframes startPlaying {
from {
transform: rotateX(0) rotate(0) translateZ(var(--z))
translate(var(--x), var(--y));
}
to {
transform: rotateX(calc(70deg + (var(--mouseY) * 10deg)))
rotate(calc(-35deg + (var(--mouseX) * 20deg)))
translateZ(var(--z2)) translate(0, 0) scale(1.05);
}
}
}
}
}
.wrap {
transform: translateZ(-100px);
transition: 0.5s ease-in-out;
}
#player {
width: 600px;
height: 600px;
position: relative;
display: grid;
place-items: center;
transition: transform 1s ease-in-out 1.5s;
transform: scale(0.5);
pointer-events: none;
perspective: 600px;
opacity: 1;
filter: drop-shadow(-1px 0 0 #000) drop-shadow(0px -1px 0 #000)
drop-shadow(1px 0 0 #000) drop-shadow(0 1px 0 #000)
drop-shadow(-1.5px 0 0 #000) drop-shadow(1.5px 0 0 #000)
drop-shadow(0 -1.5px 0 #000) drop-shadow(0 1.5px 0 #000);
* {
transform-style: preserve-3d;
position: absolute;
&:before,
&:after {
transform-style: preserve-3d;
position: absolute;
}
}
}
#dials {
width: 80px;
height: 20px;
bottom: 10px;
right: 10px;
.slider {
right: 30px;
bottom: 50px;
height: 75px;
width: 5px;
background: #ccc;
.face {
width: 30px;
bottom: 0px;
height: 10px;
background: #000;
left: -15px;
transform-origin: bottom;
transform: rotateX(-90deg);
transition: 0.5s ease-in-out;
&:before,
&:after {
content: "";
}
&:before {
width: 100%;
height: 5px;
top: -5px;
left: 0;
background: #999;
transform-origin: bottom;
transform: rotateX(90deg);
}
&:after {
width: 5px;
height: 100%;
bottom: 0;
left: -5px;
background: #555;
transform-origin: right;
transform: rotateY(-90deg);
}
}
}
.dial {
height: 15px;
width: 20px;
bottom: 10px;
transform-origin: bottom;
transform: translateZ(-20px) rotateX(-90deg);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.075);
left: 0;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(
ellipse at center,
#222,
#000 10px,
transparent 10px
)
50% 0px / 100% 30% no-repeat,
linear-gradient(
to right,
#333,
#777 calc(50% + var(--mouseX) * -25%),
#333
);
transform-style: preserve-3d;
transform: rotateY(calc(-35deg + (var(--mouseX) * 20deg)))
translateX(calc(var(--mouseX) * 1px));
border-radius: 50px / 20px;
}
&:nth-of-type(2) {
left: 30px;
&:before {
background: radial-gradient(
ellipse at center,
#222,
#000 10px,
transparent 10px
)
50% 0px / 100% 30% no-repeat,
linear-gradient(
to right,
#222,
#777 calc(75% + var(--mouseX) * -25%),
#222
);
}
}
}
}
.wrap {
width: 400px;
height: 400px;
position: relative;
* {
transform-style: preserve-3d;
position: absolute;
}
}
.base {
width: 400px;
height: 350px;
background: #efefef;
bottom: 0;
left: 0;
transform: rotateX(0) rotate(0);
#needle {
width: 30px;
height: 60px;
top: 10px;
right: 10px;
transform: translateZ(5px) rotate(0deg) rotateX(2.5deg);
transition: 0.5s ease-in-out;
&.playing {
transition-delay: 1s;
transform: translateZ(5px) rotate(0deg) rotateX(1deg);
.needleinner {
transition-delay: 0s;
transform: rotate(26deg);
}
}
.needleinner {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: 1s ease-in-out;
transition-delay: 0.5s;
}
.pivot,
.arm,
.cartridge {
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #666;
transform: translateZ(20px);
.inner {
width: 100%;
height: 100%;
&:first-of-type {
top: 0;
left: -100%;
background: #222;
transform-origin: right;
transform: rotateY(-90deg);
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #666;
transform: translateZ(-30px);
}
}
&:nth-of-type(2) {
top: 100%;
left: 0;
background: #333;
transform-origin: top;
transform: rotateX(-90deg);
}
}
}
.cartridge {
top: 240px;
transform: scale(0.5) scaleY(1.25) scaleZ(0.5) translateZ(40px);
.inner {
&:nth-of-type(2) {
height: 30px;
&:before {
content: "";
position: absolute;
width: 3px;
height: 10px;
background: #999;
top: 30px;
left: 15px;
transform: translateZ(-2.5px);
}
}
}
}
.arm {
width: 10px;
height: 250px;
left: 10px;
.inner {
&:first-of-type {
width: 10px;
left: -10px;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #666;
transform: translateZ(-10px);
}
}
&:nth-of-type(2) {
height: 10px;
}
}
}
}
#platter {
width: 300px;
height: 300px;
background: radial-gradient(circle at center, #444 67.5%, #777 65%);
border-radius: 100%;
left: 25px;
top: calc(50% - 150px);
transform: translateZ(10px);
&.playing {
&:before,
&:after {
animation-play-state: running;
}
}
.pin {
width: 10px;
height: 20px;
top: calc(50% - 17.5px);
left: calc(50% - 7.5px);
transform-origin: bottom;
transform: rotateX(-90deg);
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(
circle at center,
#fff 1px,
rgba(255, 255, 255, 0.001) 3px
)
calc(var(--mouseX) * -2px) -5px / 100% 100%,
linear-gradient(
to right,
#888,
lighten(#888, 20%) calc(20% - (var(--mouseX) * 20%)),
#888
);
box-shadow: inset 0 0 0 2px #000;
top: 0;
left: 0;
border-radius: 50px 50px 0 0;
transform: rotateY(calc(-35deg + (var(--mouseX) * 20deg)))
translateX(calc(var(--mouseX) * 1px));
}
}
&:before,
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(
circle at center,
transparent 0px,
rgba(0, 0, 0, 0.15) 1px,
rgba(0, 0, 0, 0.15) 2px,
transparent 2px,
transparent 3px
)
0px 50% / 6px 6px,
linear-gradient(
to right,
#888,
lighten(#888, 30%) calc(50% - (var(--mouseX) * 50%)),
#888
);
border-radius: 100%;
transform: translateZ(-5px) rotate(45deg);
animation: bgposition 10s linear infinite;
animation-play-state: paused;
@keyframes bgposition {
to {
background-position: -300px 50%, 50% 50%;
}
}
}
&:before {
transform: translateZ(-10px) rotate(45deg);
}
}
.side {
width: 400px;
height: 30px;
top: 100%;
left: 0;
background: linear-gradient(
to right,
#dedede,
lighten(#dedede, 20%) calc(20% - (var(--mouseX) * 20%)),
lighten(#dedede, 20%) calc(40% - (var(--mouseX) * 20%)),
#dedede
);
transform-origin: top;
transform: rotateX(-90deg);
&:nth-of-type(2) {
width: 350px;
background: linear-gradient(
to right,
darken(#efefef, 40%) calc(10% - (var(--mouseX) * 40%)),
darken(#efefef, 10%)
);
left: -350px;
transform-origin: top right;
transform: rotateX(-90deg) rotateY(-90deg);
}
}
}
}
!
