Let's build an interactive keyboard switch component.

Here's the full hero section from my upcoming Prismic course... this one took the longest out of everything. It has to be *just right*.

The loose keycaps are in a group and I just scale the group up to make them fly away. Lots of fun tricks in this one!

Here's the keycap color changer we're building in my upcoming Prismic course.

I kept the animation simpler for this one, but I think it's still pretty fun to play with.

Made with Three.js and @gsap-greensock.bsky.social. 3d model by the wonderful @leifs.website

Explosion on scroll.

We cover this in the upcoming course. Animating all the switches and keycaps is pretty involved, but worth it for the effect!

Three.js, React Three Fiber, GSAP

If you're making a fun keyboard site you need a fun little loader, right?

Here's a sneak peek of a component from my upcoming YouTube course! I'll give you 5 guesses as to what we're building this site to sell...

Stack is Next.js, Prismic, GSAP, React three fiber. Lots of fun 3d interactions in this one - coming soon!

I hate carousels, but I love this effect. It's so cool what adding some white space can do for an effect.