Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/index.haml

Created December 1, 2022 11:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harunpehlivan/a12361ab62ea212be3321fc32dd156a6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harunpehlivan/a12361ab62ea212be3321fc32dd156a6 to your computer and use it in GitHub Desktop.
Download ZIP
Last.FM Instafest Generator
Raw
index.haml
%form#lastfm{"onsubmit"=>"event.preventDefault();findUser()", "autocomplete" => "off"}
%label Last.fm Username
%input#username{name: "username", type: "text"}/
%input{type: "submit"}/
#wrap
%h1#name{"data-splitting" => "chars"}
-3.times do
.day
-3.times do
.line
%span.inner
Raw
script.js
const day = document.getElementsByClassName("day");
const wrap = document.getElementById("wrap");
let bandList = [];
let line = 0;
let username;
let festusername;
let field = document.getElementById("username");
async function findUser() {
document.body.classList.add("submitted");
username = field.value;
document.getElementById("lastfm").reset();
const response = await fetch(
atob(
"aHR0cHM6Ly93cy5hdWRpb3Njcm9iYmxlci5jb20vMi4wLz9hcGlfa2V5PTU5MDhjMDQ4N2M0YjVmMjYyODFjMTU4ZGQ4M2I1OWQ2JmZvcm1hdD1qc29uJm1ldGhvZD11c2VyLmdldFRvcEFydGlzdHMmdXNlcj0="
) +
username +
atob("JnBlcmlvZD1vdmVyYWxsJmxpbWl0PTMwMA==")
);
const responseMessage = await response.json();
if (
responseMessage.topartists &&
responseMessage.topartists.artist.length > 250
) {
festusername = username;
restart();
} else {
festusername = "usernotfound";
username = atob("anVzdGluamhvbHQ=");
restart();
}
}
async function loadNames() {
const response = await fetch(
atob(
"aHR0cHM6Ly93cy5hdWRpb3Njcm9iYmxlci5jb20vMi4wLz9hcGlfa2V5PTU5MDhjMDQ4N2M0YjVmMjYyODFjMTU4ZGQ4M2I1OWQ2JmZvcm1hdD1qc29uJm1ldGhvZD11c2VyLmdldFRvcEFydGlzdHMmdXNlcj0="
) +
username +
atob("JnBlcmlvZD1vdmVyYWxsJmxpbWl0PTMwMA==")
);
const bands = await response.json();
bands.topartists.artist.forEach((band, i) => {
bandList.push(bands.topartists.artist[i].name);
});
for (let i = 0; i < 3; i++) {
for (let k = 0; k < 10; k++) {
bandSelect = Math.floor(Math.random() * (bandList.length - 0 + 1)) + 0;
bandAdd = bandList[bandSelect];
bandList.pop(bandAdd);
if (k > 2 && k < 6) {
line = 1;
} else if (k < 2) {
line = 0;
} else {
line = 2;
}
day[i].getElementsByClassName("line")[line].innerHTML +=
"<strong data-splitting='chars' style='--data-length:" +
bandAdd.length / 10 +
"vmin'>" +
bandAdd +
"</strong>";
}
}
let festname = festusername + "apalooza";
document.getElementById("name").innerHTML = festname;
document.body.style.setProperty("--name-size", festname.length / 8 + "vmin");
Splitting();
document.body.style.setProperty(
"--path",
"polygon(0 " +
Math.floor(Math.random() * (99 - 90) + 90) +
"%, 16% " +
Math.floor(Math.random() * (99 - 90) + 90) +
"%, 43% " +
Math.floor(Math.random() * (99 - 90) + 90) +
"%, 60% " +
Math.floor(Math.random() * (99 - 90) + 90) +
"%, 73% 97%, 84% " +
Math.floor(Math.random() * (99 - 90) + 90) +
"%, 100% " +
Math.floor(Math.random() * (99 - 90) + 90) +
"%, 100% 100%, 0 100%)"
);
document.body.style.setProperty(
"--path-2",
"polygon(0 " +
Math.floor(Math.random() * (99 - 87) + 87) +
"%, 16% " +
Math.floor(Math.random() * (99 - 87) + 87) +
"%, 23% " +
Math.floor(Math.random() * (99 - 87) + 87) +
"%, 40% " +
Math.floor(Math.random() * (99 - 87) + 87) +
"%, 63% 97%, 84% " +
Math.floor(Math.random() * (99 - 87) + 87) +
"%, 100% " +
Math.floor(Math.random() * (99 - 87) + 87) +
"%, 100% 100%, 0 100%)"
);
document.body.style.setProperty(
"--hue",
Math.floor(Math.random() * 2) * 260 + "deg"
);
setTimeout(() => {
document.body.classList.add("loaded");
}, 500);
}
function restart() {
document.body.classList.remove("loaded");
setTimeout(() => {
bandList = [];
document.querySelectorAll(".line").forEach((line) => {
line.innerHTML = "";
});
setTimeout(() => {
loadNames();
}, 500);
}, 1000);
}
let mouse = { x: 0, y: 0 };
let body = document.body;
let width = window.innerWidth / 2;
let height = window.innerWidth / 2;
body.addEventListener("mousemove", ({ clientX, clientY }) => {
mouse.x = ((width - event.pageX) * -1) / width;
mouse.y = ((height - event.pageY) * 1) / height;
body.style.setProperty("--mouseX", mouse.x);
body.style.setProperty("--mouseY", mouse.y);
});
Raw
scripts
<script src="https://unpkg.com/splitting@1.0.5/dist/splitting.min.js"></script>
Raw
style.scss
@font-face {
font-family: "Plinc";
src: url("https://assets.codepen.io/383755/Machinkly.woff2") format("woff2");
}
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
body {
perspective: 80vmin;
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
position: relative;
font-family: "Plinc";
--path: polygon(
0 89%,
16% 94%,
43% 91%,
60% 95%,
73% 97%,
84% 96%,
100% 95%,
100% 100%,
0 100%
);
background: radial-gradient(circle at bottom, #ffffff, #ffefba);
* {
box-sizing: border-box;
}
&.submitted {
form {
transform: translate(-50%, 37.5vmin);
}
}
form {
position: absolute;
z-index: 9;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
transition: transform 0.6s ease-in-out;
display: flex;
width: 300px;
flex-wrap: wrap;
* {
font-family: "Fredoka One";
}
label {
width: 100%;
padding: 0.5rem;
font-size: 1rem;
}
input {
height: 40px;
background: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d) 50% 0px /
100% 300% no-repeat;
color: #fff;
border: none;
border-radius: 0 50px 50px 0;
padding: 0 1rem;
margin: 0px;
flex-grow: 1;
cursor: pointer;
transition: 0.3s ease-in-out;
&:hover {
background-position: 50% 100%;
color: #1a2a6c;
}
&#username {
background: #fff;
cursor: auto;
color: #000;
box-shadow: inset 0 0 0 1px #000;
padding: 0 0.5rem;
border-radius: 50px 0 0 50px;
outline-color:#fdbb2d;
}
}
}
&.loaded {
#wrap {
background-position: 50% 100%;
filter: hue-rotate(var(--hue)) saturate(1);
opacity: 1;
span.inner {
transform: scale(1);
transition-delay: 3s;
}
h1 {
&:before {
opacity: 1;
transition-delay: 1s;
}
span span.char {
&:before {
transform: translate(-50%, -50%);
transition-delay: calc(
(var(--word-total) - var(--char-index)) * 0.015s + 1.5s
);
}
}
}
&:before {
clip-path: var(--path);
transition-delay: 2.4s;
}
&:after {
clip-path: var(--path-2);
transition-delay: 2.2s;
}
.day {
@for $i from 1 through 3 {
&:nth-of-type(#{$i}) {
&:before {
transform: translateX(-50%) scaleY(1);
transition-delay: #{$i/8 + 2}s;
}
.line {
@for $j from 1 through 6 {
&:nth-of-type(#{$j}) {
strong {
&:after {
transform: translate(0, -50%) scale(1);
transition-delay: calc(#{((($i * 1.75) + ($j/3))/3)}s);
}
span span.char {
transform: translateY(-300%);
transition-delay: calc(
(var(--char-index) * 0.015s) +
#{((($i * 1.5) + ($j/3))/3)}s
);
}
}
}
}
}
}
}
}
}
}
#wrap {
width: clamp(400px, 70vmin, 70vmin);
height: clamp(550px, 90vmin, 90vmin);
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
overflow: hidden;
padding-bottom: 7.5vmin;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
transform-style: preserve-3d;
transform: scale(0.85) translateY(-5%) rotateY(calc(var(--mouseX) * 6deg))
rotateX(calc(var(--mouseY) * 6deg));
background: linear-gradient(to bottom, #1a2a6c 75%, #b21f1f 90%, #fdbb2d)
50% 0% / 100% 400% no-repeat;
transition: background-position 1s ease-in-out, filter 1s ease-in-out,
opacity 1s ease-in-out;
opacity: 0;
position: relative;
filter: hue-rotate(0deg) saturate(0) brightness(20);
perspective: 50vmin;
span.inner {
position: absolute;
z-index: 9;
width: 95%;
height: 95%;
top: 2.5%;
left: 2.5%;
box-shadow: 0 0 0 0.15vmin #fff;
transition: 1s ease-in-out;
transform: scale(2);
}
h1 {
font-family: "Fredoka One";
font-size: clamp(
20px,
calc(7vmin - var(--name-size)),
calc(7vmin - var(--name-size))
);
margin: 3rem 0;
text-align: center;
width: 100%;
position: relative;
color: transparent;
display: inline-block;
flex-grow: 0;
text-transform: uppercase;
&:before {
content: "";
position: absolute;
z-index: -1;
height: 100vh;
width: 100vw;
left: 50%;
top: -15vmin;
transform: translateX(-50%);
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.5) 0.5px,
rgba(255, 255, 255, 0.005) 0.5px,
rgba(255, 255, 255, 0.005) 30px
)
50% 50% / 80px 80px,
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.25) 0.5px,
rgba(255, 255, 255, 0.005) 0.5px,
rgba(255, 255, 255, 0.005) 30px
)
calc(50% - 30px) calc(50% + 30px) / 80px 80px,
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.5) 0.5px,
rgba(255, 255, 255, 0.005) 0.5px,
rgba(255, 255, 255, 0.005) 30px
)
calc(50% - 50px) calc(50% + 10px) / 80px 80px,
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.35) 0.5px,
rgba(255, 255, 255, 0.005) 0.5px,
rgba(255, 255, 255, 0.005) 30px
)
calc(50% - 70px) calc(50% + 40px) / 80px 80px;
opacity: 0;
transition: 0.5s ease-in-out;
}
span.char {
position: relative;
&:before {
content: attr(data-char);
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -700%) scaleY(6);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.075);
}
}
}
&:before,
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: linear-gradient(
to bottom,
lighten(#1a2a6c, 10%) 75%,
darken(#1a2a6c, 10%)
);
transition: clip-path 0.6s ease-in-out;
clip-path: polygon(
0 100%,
16% 100%,
43% 100%,
60% 100%,
73% 100%,
84% 100%,
100% 100%,
100% 100%,
0 100%
);
transition-delay: 0.1s;
transform-origin: 50% 80%;
}
&:after {
transform: scaleX(-1);
z-index: 0;
opacity: 0.5;
transition-delay: 0s;
transform-origin: 50% 70%;
}
.day {
display: flex;
align-content: center;
justify-content: center;
flex-wrap: wrap;
padding: 0 5vmin 3vmin;
width: 100%;
color: #fff;
position: relative;
z-index: 9;
flex-grow: 1;
&:before {
font-family: "Fredoka One";
text-transform: uppercase;
position: absolute;
left: 50%;
top: -1vmin;
font-size: 1.5vmin;
width: 100%;
background: linear-gradient(
to right,
transparent,
#fff 20vmin,
transparent 20vmin,
transparent calc(100% - 20vmin),
#fff calc(100% - 20vmin),
transparent
)
50% 50% / calc(100% - 5vmin) 0.15vmin no-repeat;
text-align: center;
transform: translateX(-50%) scaleY(0);
transition: 0.3s ease-in-out;
transform-origin: bottom;
}
&:first-of-type {
&:before {
content: "Monday December 22";
}
}
&:nth-of-type(2) {
&:before {
content: "Tuesday December 23";
}
}
&:nth-of-type(3) {
&:before {
content: "Wednesday December 24";
}
}
.line {
width: 100%;
text-align: center;
font-size: 2.5vmin;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 100%;
strong {
padding: 0.25rem 1rem;
font-size: clamp(
12px,
calc(3.5vmin - var(--data-length)),
calc(3.5vmin - var(--data-length))
);
position: relative;
word-break: keep-all;
span.word {
display: inline-block;
position: relative;
overflow: hidden;
}
span span.char {
position: relative;
color: rgba(255, 255, 255, 0.5);
transform: translateY(150%);
display: inline-block;
transition: transform 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.075);
&:before,
&:after {
content: attr(data-char);
color: rgba(255, 255, 255, 0.75);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 100%);
}
&:after {
color: rgba(255, 255, 255, 1);
transform: translate(-50%, 250%);
}
}
&:after {
content: "•";
position: absolute;
top: 50%;
left: calc(100% - (var(--data-length) / 2));
transform: translate(0, -50%) scale(0);
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&:last-of-type {
&:after {
content: "";
}
}
}
&:first-of-type {
strong {
font-size: clamp(
18px,
calc(4.5vmin - var(--data-length)),
calc(5vmin - var(--data-length))
);
}
}
&:last-of-type {
white-space: nowrap;
strong {
font-size: clamp(
7px,
calc(2.5vmin - var(--data-length)),
calc(2.5vmin - var(--data-length))
);
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment