A growing collection of guides, patterns, and fun stuff I've been doing in the web design and engineering space

Mostly React, Next, Typescript, GSAP, ThreeJS and GLSL Shaders

Mar 2025

React Three Fiber with WebGPU and Three Shading Language (TSL) Node Material

A short guide to getting started with the WebGPU Renderer and beginning to utilise the power of Three Node Materials.

Feb 2025

Animated CSS Grid in Next.js: A Step-by-Step Tailwind and GSAP Tutorial

A guide to mapping data into a responsive grid, animating it for desktop and mobile, and making it reusable.

Jan 2025

Scroll-driven image sequence header in React with GSAP

A guide to creating a scroll-driven image sequence header in React/Next.js with GSAP.

Jan 2025

Build an animated wave plane in Next.js (Typescript) 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 React Typescript environment.

Jan 2025

Configure your Next.js Typescript project for custom shader materials and glsify in React Three Fiber

Step-by-step guidance on packages, config and code. Get custom React Three Fiber shader materials with glslify working in your Next.js Typescript project.