Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

I've made a game in CodePen.IO! Cast spells and fight demons! Made with Three.js GSAP and Stately.ai Can you save the crystal?

Steve Gardner

4,991 subscribers

76,701 views • 2 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Comments

Steve Gardner2 years ago

I have a lot of cool details to share about this one, but I'll save that for next week!

Viki ✨2 years ago

@CodePen @threejs @greensock @statelyai It's an incredible work! 🔥🔥🔥

Charlie Gerard2 years ago

@threejs @CodePen @greensock @statelyai This is so good!!!

Stately.ai2 years ago

@CodePen @threejs @greensock This is so good! 🪄

Steve Gardner2 years ago

@CodePen @threejs @greensock 🙏 Thank you for making such a great tool! It made managing all the states so much easier! Here are the state machines if anyone wants to take a peek!

Andre Vitorio2 years ago

@CodePen @threejs @greensock @statelyai Spooky fun! Great job @steeevg

Nerd or Die2 years ago

@CodePen @threejs @greensock @statelyai I’m not sure if I’m inspired or if I should just give up. So good.

Pete Barr 🤟2 years ago

@bruno_simon @CodePen @threejs @greensock @statelyai 😳 wow!

justboulatbek2 years ago

@CodePen @threejs @greensock @statelyai do you use blender or somethiing to build those assets before using them in threejs?

Steve Gardner2 years ago

@CodePen @threejs @greensock @statelyai Yeah, most of the assets are by @quaternius, I arranged his lovely 'Modular Ruins Pack' in Blender before exporting out for three.js. Thank you @quaternius, I should have mentioned you in the original tweet. Here's the amazing asset pack

Related Videos

Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS

Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS

Carl 💥 Creative Coding Club

10,756 views • 2 years ago

Interactive sunny-side pattern! 🍳 (a little tribute to my love for gooey shapes and dumb demos) Live demo & source code: Made with #webgl #shader and a bit of GSAP (GSAP) Hosted on CodePen.IO

Interactive sunny-side pattern! 🍳 (a little tribute to my love for gooey shapes and dumb demos) Live demo & source code: Made with #webgl #shader and a bit of GSAP (GSAP) Hosted on CodePen.IO

Ksenia Kondrashova

18,827 views • 1 year ago

It's slime time! On-scroll gooey overlay based on #GLSL shader and controlled with #GSAP #ScrollTrigger. Easy to customise and (I'm proud to say it 😎) responsive Live demo & source code: Made with GSAP ScrollTrigger GSAP Hosted on CodePen.IO

It's slime time! On-scroll gooey overlay based on #GLSL shader and controlled with #GSAP #ScrollTrigger. Easy to customise and (I'm proud to say it 😎) responsive Live demo & source code: Made with GSAP ScrollTrigger GSAP Hosted on CodePen.IO

Ksenia Kondrashova

21,611 views • 2 years ago

I made a web game You protect kittens with eye lasers Made with Three.js, mediapipe AI vision, and endless inspiration from nolen 🔗 game link below

I made a web game You protect kittens with eye lasers Made with Three.js, mediapipe AI vision, and endless inspiration from nolen 🔗 game link below

AA

109,559 views • 1 year ago

I've made some fun experiments with animated 3D text rendered in HTML! CodePen.IO. I plan to turn this into a handy little library to help make these kind of effects easier. These are animated with GSAP.

I've made some fun experiments with animated 3D text rendered in HTML! CodePen.IO. I plan to turn this into a handy little library to help make these kind of effects easier. These are animated with GSAP.

Steve Gardner

44,915 views • 3 years ago

Made With Gsap Enhance your GSAP skills with a range of smooth and well-crafted effects. →

Made With Gsap Enhance your GSAP skills with a range of smooth and well-crafted effects. →

Curated

17,497 views • 1 year ago

Please try playing the bomb tag game made by my 4-year-old daughter! It is a voxel web game made with Three.js, created on Voxcinder, and it runs in the browser and also on mobile phones. You can start just by clicking! Feel free to play!

Please try playing the bomb tag game made by my 4-year-old daughter! It is a voxel web game made with Three.js, created on Voxcinder, and it runs in the browser and also on mobile phones. You can start just by clicking! Feel free to play!

takahiro(John Smith)

10,588 views • 4 months ago

I've made a zombie survival game where you can enter every (500+) building in the game and explore a typical Dutch landscape/village. 🌳🏡

I've made a zombie survival game where you can enter every (500+) building in the game and explore a typical Dutch landscape/village. 🌳🏡

The Left Behind

763,372 views • 3 months ago

i made a game that forces me to work out 🏋️‍♂️ do a chin-up, save a cat 🐈 built with Three.js and mediapipe computer vision comment if you want to try. it's buggy but I can get it off localhost

i made a game that forces me to work out 🏋️‍♂️ do a chin-up, save a cat 🐈 built with Three.js and mediapipe computer vision comment if you want to try. it's buggy but I can get it off localhost

AA

281,227 views • 1 year ago

do a push-up, save a puppy 🐾 I made this fitness game with mediapipe AI vision, Three.js, and tonejs for sound effects which exercise should I add next?

do a push-up, save a puppy 🐾 I made this fitness game with mediapipe AI vision, Three.js, and tonejs for sound effects which exercise should I add next?

AA

29,366 views • 1 year ago

New website is live! 🛫 Made With Gsap Made With Gsap — Enhance your animation skills with a collection of 50 unique JavaScript effects. Designed by Florent Roux-Durraffourt and powered by GSAP & darkroom.engineering Lenis 💚 ↳

New website is live! 🛫 Made With Gsap Made With Gsap — Enhance your animation skills with a collection of 50 unique JavaScript effects. Designed by Florent Roux-Durraffourt and powered by GSAP & darkroom.engineering Lenis 💚 ↳

Michaël Garcia

17,944 views • 1 year ago

I made a Dark Souls-inspired Three.js game with Sol Ultra using Codex Sites. It's fully playable in the browser. I handled the prompts, references, and libraries like img2threejs. The game has shield blocking, dodge rolls, archery, and a full inventory system. Still blows my mind that you can build a 3D game like this in a single afternoon.

I made a Dark Souls-inspired Three.js game with Sol Ultra using Codex Sites. It's fully playable in the browser. I handled the prompts, references, and libraries like img2threejs. The game has shield blocking, dodge rolls, archery, and a full inventory system. Still blows my mind that you can build a 3D game like this in a single afternoon.

Meng To

169,453 views • 1 month ago

Here is a game that looks like it was made with 2D sprites on a tilemap But it’s actually a three.js scene Also, no external assets. It’s all code and a bit of shader magic The player can switch between the pixel view and the 3D scene Made with Opus 5

Here is a game that looks like it was made with 2D sprites on a tilemap But it’s actually a three.js scene Also, no external assets. It’s all code and a bit of shader magic The player can switch between the pixel view and the 3D scene Made with Opus 5

Dilum Sanjaya

46,003 views • 9 days ago

This is a website 🤯 Created by Abeto - a simple web-based game made with WebGL and Three.js Website: Love this!

This is a website 🤯 Created by Abeto - a simple web-based game made with WebGL and Three.js Website: Love this!

Maysarah✨

4,833,095 views • 2 months ago

Crazy experience hooking my laptop up to my tv via HDMI and playing a browser-based Three.js game made with AI in a few days with my wireless PS5 controller... Imagine if you can dream up any map on zombies (or any game/world) and play split screen with your friends from your couch using controllers on a Three.js game that runs in the browser… a little input lag on controller movement, but exciting to see where this space can go!

Crazy experience hooking my laptop up to my tv via HDMI and playing a browser-based Three.js game made with AI in a few days with my wireless PS5 controller... Imagine if you can dream up any map on zombies (or any game/world) and play split screen with your friends from your couch using controllers on a Three.js game that runs in the browser… a little input lag on controller movement, but exciting to see where this space can go!

Rishi

55,100 views • 23 days ago

I spent some hours playing The Adventures of Sir Kicksalot, a game heavily inspired by Dark Messiah. I had a really fun time with it, lots of kicking and different spells to cast, multiple ways to fight enemies including making them fight for you, and there's also a skill tree.

I spent some hours playing The Adventures of Sir Kicksalot, a game heavily inspired by Dark Messiah. I had a really fun time with it, lots of kicking and different spells to cast, multiple ways to fight enemies including making them fight for you, and there's also a skill tree.

FPSthetics

57,019 views • 3 months ago

MAVERICK X It is not her. It is Sasha. They purposely get possessed by demons so they can cast spells on their audience, and to get purposely possessed by demons, I won't mention what you have to do.

MAVERICK X It is not her. It is Sasha. They purposely get possessed by demons so they can cast spells on their audience, and to get purposely possessed by demons, I won't mention what you have to do.

Adam Hize

169,640 views • 1 year ago

Dear Muslims, Don't fight china. Fight made in china. Buy products made in Türkiye, Egypt, Saudi Arabia, Morocco, Indonesia, Bangladesh, and Malaysia. Save Uyghur lives, support your local and Muslim economies.

Dear Muslims, Don't fight china. Fight made in china. Buy products made in Türkiye, Egypt, Saudi Arabia, Morocco, Indonesia, Bangladesh, and Malaysia. Save Uyghur lives, support your local and Muslim economies.

Kuzzat Altay

16,442 views • 1 year ago

All Fan-Made Skin Entries in #Overwatch2 🎨 Players in China can now cast their vote, and the top design may be brought to life as the first fan-made skin in the game! Which skin is your favorite? 🗳️

All Fan-Made Skin Entries in #Overwatch2 🎨 Players in China can now cast their vote, and the top design may be brought to life as the first fan-made skin in the game! Which skin is your favorite? 🗳️

Overwatch Cavalry

838,994 views • 11 months ago