Prism
An experimental WebGL scene: a refractive glass form that reacts to the cursor and scroll, built to learn shaders, post-processing and performance budgeting.
Overview
Prism is a learning project in real-time 3D for the web. A single glass geometry sits in the centre of the page; light bends through it, colour bands shift as the cursor moves, and scrolling rotates and splits the form into its facets.
Challenge
Refraction, bloom and depth of field are expensive. The experiment had to hit 60 fps on a mid-range laptop, degrade gracefully on phones, and stay under a small JavaScript budget.
Process
- 01
Started with a plain mesh and a transmission material, then wrote a custom fragment shader for the colour dispersion.
- 02
Added a post-processing pass for bloom with a strict resolution cap.
- 03
Tied scroll progress to rotation and facet separation through GSAP ScrollTrigger and Lenis.
- 04
Profiled on a low-end device and added a quality switch that drops passes before dropping frames.
Solution
A React Three Fiber scene inside a Next.js page. The material is a custom shader, post-processing is limited to one bloom pass, and every animation is driven by scroll or pointer rather than a free-running loop, so the GPU idles when nothing changes.
Features
AI Learning Platform
A modern learning platform where students get personalised resources, an AI study assistant, progress tracking and interactive lessons in one place.
Open case study