A growing collection of
guides and fun stuff
we've been building
Scroll-driven colour themes with GSAP and Tailwind CSS
Build a colour palette that responds to scroll position using CSS variables, Oklab mixing, GSAP ScrollTrigger, and Tailwind CSS utilities.
Building a 3D Penalty Shootout Game with React Three Fiber
With the 2026 World Cup in full swing, here is how I built an interactive penalty shootout game for the web - flick-to-kick controls, deterministic Rapier physics, a diving goalkeeper that makes real saves, and the tricks that keep it at 60fps on mobile.
Quizroller: An infinite rolling quiz game
What does it take to build a 3D game with Three.js and WebGL? Discover the tech, challenges, and solutions I used to create this immersive proof of concept.
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.
LiquidGlass: Shimmering Glass Effect for React
A reusable Apple-inspired “liquid glass” wrapper built for React. It uses SVG refraction, chromatic aberration, and GPU-assisted backdrop blur/saturation. Customisable with props.
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.
Animated Grid in Next.js: A Step-by-Step Tailwind CSS and GSAP Tutorial
A guide to mapping data into a responsive grid, animating it for desktop and mobile, and making it reusable.
Scroll-driven image sequence in React with GSAP
A step-by-step guide to creating a scroll-driven image sequence canvas in Next.js using GSAP.
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?
Meet Loopspeed
