A growing collection of guides and fun stuff we've been building
#tutorial#react#svg#ui#tailwind
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.
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!
Matthew Frawley, Theo Walton, Tom Isherwood •Aug 2025
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.
Matthew Frawley •Aug 2025
#tutorial#react#gsap#tailwind
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.
Eduard Radd, Matthew Frawley •Feb 2025
#tutorial#nextjs#typescript#html canvas#gsap
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.
Matthew Frawley •Jan 2025
#tutorial#nextjs#threejs#typescript#webgl#glslify#custom shader material
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.