Here you go: https://cdn.shopify.com/oxygen-v2/37366/33371/69946/1416955/assets/MayhemSketch-Bj3SQybz.js
Here are the words for each part of the song:
,zr=["AND YOUR HEART BEATS FAST CUZ YOU’RE IN THE ZONE","I CAN HEAR EVERYTHING YOU’RE SAYIN’ FROM HERE","CHOKE ON THE FAME AND HOPE IT GETS YOU HIGH","AND YOU CAN’T HEAR HER WITH THE MUSIC ON","TAP ON MY VEIN SUCK ON MY DIAMOND BLOOD","ILL BURN A HOLE RIGHT THROUGH YOUR EYES","STANDING IN THE SHADOW OF ANOTHER MAN","LOOKIN’ AT YOU LIKE A ZOMBIE KILLAH","HAVE BEEN SO WORRIED THAT I’M LOST","(YEAH YOUR GIRLFRIEND ISN’T HERE)","GOODBYE ILL SEE YOU IN MY DREAMS","AH AH AH AH AH AH AHAHA AH AAAA","BUT HER FRIEND IS WAY MORE FUN","A LEGEND IN YOUR NEIGHBORHOOD","SING FOR ME A SINFUL MELODY","YOU CAN’T HIDE WHO YOU ARE","TOMORROW YOU’LL DESERT ME","IN THE BACK OF THIS PARTY","IM THE PERFECT CELEBRITY","IF I’M GONNA GET YOU HOME","AND YOUR CLOSING IN ON ME","LIKE THE WORDS OF A SONG","DRUG TO LAST A LIFETIME","YEAH YOU WANNA BE COOL","I CAN GET YOU MO-O-ORE","BUT THE FEELINGS RIGHT","I TRY SO HARD TO SING","BRING ME YOUR DESIRE","YOU’RE OUT OF BREATH","AND WE BOTH KNOW WHY","(DJ HIT THE LIGHTS)"]
EDIT: This effect can be done with just regular code. But in this case it’s a part of the page. It is probably powered by React and a library called three.js. The part helps with the look of the page and makes it responsive. To do this they make paths. Then they split the words into letters. Then the letters follow the paths. You can do this many ways. You can move them, or use code for positioning. Once you click your mouse you make a new path. Then you spell out the words one letter at a time on the new path. It’s not very hard even though it might look it. The fact that it’s on Shopify doesn’t matter much. Most of the code is in files. You could even write the page with code.
But there is not a single 3D thing on the page…? This looks like a 2D library such as p5.js or GSAP.
@Clay
You’re right, I know three.js is more than capable of doing this but I assumed they would use a 2D library.
Valen said:
@Lexi
That’s a lot of code
There is code being sent to three.js as a set of letters - look for the code that says float() vec2() etc. That probably is the part that makes the text move but I’m not going to act like I know the most about it. I do spend time every now and again on https://www.shadertoy.com and it blows my mind.
Valen said:
@Lexi
That’s a lot of code
I doubt someone wrote all of that
Most of the code is pieces put together. You can start from the bottom of the page at the variable Hx and see it starts with a call. This is a React call.
import{r as Kl,j as xf} from "./components-DaCeZuFI.js" # <-- React Components
...
export{Hx as MayhemSketch}; # <-- Hx is the start.
@Lexi
Everything can be done with regular code except for WebAssembly. When writing hard to do parts in React, you should not depend on React.
I want to learn these things one day
Vince said:
I want to learn these things one day
Me too. I’m still learning. I don’t even know much about JavaScript. Don’t even get me started on Python
Vince said:
I want to learn these things one day
Me too. I’m still learning. I don’t even know much about JavaScript. Don’t even get me started on Python
Python is much easier than JavaScript, just so you know.
Vince said:
I want to learn these things one day
Me too. I’m still learning. I don’t even know much about JavaScript. Don’t even get me started on Python
How old are you?
It looks like it’s a mix of code. I am impressed it is on a Shopify site.
Ellis said:
It looks like it’s a mix of code. I am impressed it is on a Shopify site.
https://www.youtube.com/watch?v=NeleJTzpQsE&t=7s
Thank you!
Ellis said:
It looks like it’s a mix of code. I am impressed it is on a Shopify site.
https://www.youtube.com/watch?v=NeleJTzpQsE&t=7s
Why are you impressed that it’s on a Shopify site?
@Shane
Most Shopify sites are templates.
This is a custom-built Shopify site. It was coded using Liquid and CSS and code. When I see good work, I’m impressed.
All the times I’ve worked on Shopify sites have not been good. I’m impressed they did it and it came out great.