PRISM: A Liquid Glass WebGL Carousel for Next.js

PRISM is a Next.js project showcase rendered with three.js, animated with GSAP, and finished with a custom liquid-glass GLSL shader.

It presents portfolio items as an infinite, scroll and touch-driven 3D carousel with chromatic refraction, six color themes, and sound generated live through the Web Audio API.

PRISM Github

Live Demo

Features

Renders project images as Three.js plane meshes inside an infinite horizontal loop.
Measures each image aspect ratio and calculates panel width from a shared height.
Applies chromatic dispersion, glow, shimmer, rim waves, zoom, and shape masking through a GLSL post-processing pass.
Adds inertial wheel and pointer movement with center snapping and velocity-based panel scaling.
Switches between six liquid-glass presets through animated shader uniform changes.
Opens a focused project state with previous, next, exit, and case study controls.
Generates interface sounds through Web Audio oscillators and exposes a mute shortcut.
Runs an automatic tour that advances to the next project every 4.5 seconds.

Use Cases

Creative studio portfolios present visual case studies as a continuous exhibition.
Product launch pages place hardware renders, campaign artwork, and technical details inside a full-screen sequence.
Digital agencies connect each project card to a drawer with tags, dates, descriptions, metrics, and an external project link.
Event installations and kiosk screens use the auto tour, keyboard controls, and large central focus state for unattended presentations.
Experimental landing pages reuse the WebGL engine as a base for custom shaders, image archives, fashion lookbooks, or interactive brand stories.

How To Use It

Install and Run the Project

Install the project and its dependencies.

git clone https://github.com/enabled404/prism-liquid-glass.git
cd prism-liquid-glass
npm install
npm run dev

Open http://localhost:3000.

Create a Production Build

The repository defines standard Next.js build and start scripts.

npm run build
npm run start

Replace the Demo Projects

Place each project image in public/, then edit PROJECTS in lib/carousel/config.js. Keep aspect set to null to let the engine read the image dimensions after the texture loads.

export const PROJECTS = [
  {
    id: "aurora-dashboard",
    src: "/projects/aurora-dashboard.jpg",
    aspect: null,
    brand: "Northstar Labs",
    title: "Aurora Analytics",
    desc: "Real-time product intelligence dashboard",
    category: "Data Visualization",
    year: "2026",
    fullDesc:
      "A product analytics interface with cohort views, event funnels, and live operational metrics.",
    tags: ["Next.js", "Three.js", "GSAP", "Analytics"],
    metrics: "Interactive Case Study",
    link: "https://example.com/aurora",
  },
];

The project drawer and overlay read these fields directly.

Field	Purpose
`id`	Supplies a stable project identifier.
`src`	Points to an image inside `public/`.
`aspect`	Sets a fixed image ratio. `null` triggers texture measurement.
`brand`	Renders the small label above the project title.
`title`	Renders the main project heading.
`desc`	Adds the short subtitle in the carousel overlay.
`category`	Supplies category text and category-chip matching.
`year`	Adds the project year to the detail view.
`fullDesc`	Fills the longer case study description.
`tags`	Creates technology pills and participates in category matching.
`metrics`	Adds the project highlight or result label.
`link`	Sets the external case study link.

Update the Category Chips

The category labels live in Components/CarouselSection.jsx. Each label searches the project category and tags values. A matched chip moves the carousel to the first matching project. It does not remove unrelated projects from the loop.

const CATEGORIES = [
  "All",
  "Data",
  "WebGL",
  "Brand",
  "Editorial",
  "Hardware",
];

Add a Liquid Glass Theme

Add a preset to LENS_PRESETS in lib/carousel/config.js. The navbar passes the selected object to engine.setTheme().

{
  id: "ice",
  name: "Arctic Ice",
  blueColor: "#7dd3fc",
  dispersion: 13,
  glow: 2.1,
  whiteGlow: 0.14,
  novaSize: 11,
}

Press G in the running site to open the lil-gui shader panel. Use the panel to test lens, focus, entry, and motion values before saving them in config.js.

Main Files

The App Router entry, React overlay, renderer, audio engine, and editable data remain separated across a small set of files.

File	Role
`app/page.js`	Mounts `CarouselSection` at the root route.
`app/layout.js`	Loads global CSS, Google fonts, and page metadata.
`app/globals.css`	Imports Tailwind CSS 4 and defines global interface styles.
`Components/CarouselSection.jsx`	Owns React state, keyboard shortcuts, auto tour, overlay text, and engine lifecycle.
`Components/Navbar.jsx`	Renders theme, category, audio, GUI, and auto-tour controls.
`Components/ProjectModal.jsx`	Renders the extended case study drawer.
`lib/carousel/config.js`	Stores projects, theme presets, layout values, lens uniforms, focus motion, and entry motion.
`lib/carousel/engine.js`	Creates the Three.js renderer, mesh pool, scrolling physics, focus animation, and GLSL lens pass.
`lib/carousel/audio.js`	Generates tick, pop, click, and sweep sounds with the Web Audio API.
`lib/carousel/gui.js`	Maps editable values to the lil-gui development panel.
`public/`	Stores the project images loaded as WebGL textures.

Configuration Reference

Most visual and interaction changes stay inside lib/carousel/config.js.

Export	Important Values	What It Changes
`PROJECTS`	`src`, `title`, `category`, `tags`, `link`	Project content and media.
`LENS_PRESETS`	`blueColor`, `dispersion`, `glow`, `whiteGlow`, `novaSize`	Navbar theme choices.
`CONFIG`	`PANEL_H`, `GAP`, `EASE`, `WHEEL`, `SNAP`, `SNAP_DELAY`	Panel dimensions and scroll behavior.
`LENS`	`shape`, `sizeX`, `sizeY`, `dispersion`, `blur`, `shimmer`, `samples`	Shader shape, refraction, color separation, and rim motion.
`FOCUS`	`cardDuration`, `focusDuration`, `stagger`, `dropDist`, `centerScale`	Selected-card transitions.
`ENTRY`	`enabled`, `delay`, `startH`, `riseDuration`, `growDuration`, `growDir`	Initial panel rise and growth sequence.
`UI_ANIM`	`duration`, `topShiftVh`, `revealDuration`, `revealStagger`	React overlay movement and reveal timing.

Controls and Shortcuts

Input	Action
Mouse wheel or trackpad	Moves through the horizontal project row.
Pointer drag or touch swipe	Applies direct movement with inertial settling.
Project click	Centers the card and enters focus mode.
Left and right arrows	Moves to the previous or next project.
`Esc`	Closes focus mode or the project drawer.
`M`	Toggles synthesized interface audio.
`G`	Shows or hides the shader tuning panel.
Auto Tour	Advances through the project catalog every 4.5 seconds.