A growing collection of guides and fun stuff we've been building
Magic Floor: Player driven ripple effects
Just a misty, reactive floor inspired by Split Fiction. Arrow key movement moves the player and drives a WebGPU ripple simulation. Node-based shading, particles and cylindrical text bring the scene to life.
How we rebuilt Apple FaceID for the web
The team built Face ID for the web - in 1 day! Admittedly it doesn't do actual face verification... but it does hook into your camera and use machine learning to recognise when you smile. Made sexy by shader-powered visuals that give the big boys a run for their money!
How to use Google Sheets as a free CMS for Next.js Localisation - supporting unlimited locales
A lightweight localisation setup for Next.js App Router using TypeScript. Featuring locale-based routing, a custom parseT function, HTML element parsing, and translation syncing from Google Sheets.
Advanced scroll-based particle transitions using a WebGL simulation shader
Learn how I built the background particles on the Loopspeed home page using Three.js, a simulation shader (FBO) and the GSAP animation library.
Configure your Next.js Typescript project for custom shader materials and glsify in React Three Fiber
Get custom React Three Fiber shader materials with glslify working in your Next.js Typescript project. Step-by-step guidance on packages, config and code.
Build an animated scroll-controlled wave plane with React Three Fiber and custom shader material
This simple project is a great way to learn about ThreeJS shaders and how to use them in a Next.js Typescript environment.
Looking for an experienced team to help bring a project to life?
