https://github.com/travisbreaks/creative-lab

HIGGS-BOSON: a vertical particle collider where the scrollbar controls depth and time. Scroll-driven physics, 3D artifacts, isotope grids. Next.js + GSAP + R3F.
https://github.com/travisbreaks/creative-lab

creative-coding gsap interactive-art nextjs particles physics r3f scroll-animation threejs webgl

Last synced: 4 months ago
JSON representation

HIGGS-BOSON: a vertical particle collider where the scrollbar controls depth and time. Scroll-driven physics, 3D artifacts, isotope grids. Next.js + GSAP + R3F.

• Host: GitHub
• URL: https://github.com/travisbreaks/creative-lab
• Owner: travisbreaks
• License: mit
• Created: 2026-02-28T21:12:05.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2026-03-01T05:51:32.000Z (4 months ago)
• Last Synced: 2026-03-01T05:56:45.525Z (4 months ago)
• Topics: creative-coding, gsap, interactive-art, nextjs, particles, physics, r3f, scroll-animation, threejs, webgl
• Language: TypeScript
• Homepage: https://travisbreaks.org/research/creative-lab/
• Size: 69.3 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Agents: agents.md

Awesome Lists containing this project

README

          
# Creative Lab

HIGGS-BOSON: a vertical "particle collider" sandbox where the scrollbar controls depth and time. Descend through experimental sectors that react to scroll velocity with physics-driven animations, 3D artifacts, and isotope grids.

[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://travisbreaks.org/research/creative-lab/)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

[![Next.js](https://img.shields.io/badge/Next.js-16-black)](https://nextjs.org)

[![React](https://img.shields.io/badge/React-19-61dafb)](https://react.dev)

[![Three.js](https://img.shields.io/badge/Three.js-R3F-black)](https://threejs.org)

![creative-lab](https://assets.travisbreaks.com/github/creative-lab.png)

## Tech Stack

Next.js 16, React 19, GSAP (ScrollTrigger, Flip, CustomEase), Lenis, React Three Fiber, Tailwind CSS

## Features

- **Scroll-velocity physics engine**: a shared context exposes real-time scroll speed, direction, and smoothed velocity to all components via a custom `useScrollVelocity()` hook

- **Sector 0 (Event Horizon)**: 20 experiment log entries with spaghettification: text skews and stretches in real-time as scroll speed increases, snapping back to clarity on stop

- **Sector 1 (Containment Iris)**: pinned scroll section with an iris breach animation and a spinning R3F 3D artifact at center

- **Sector 2 (Lattice)**: GSAP Flip-powered isotope grid that rearranges on interaction

- **Glass containment UI**: frosted section wrappers with accent color borders, monospace typography, and clinical lab aesthetic

## Development

```bash

npm install

npm run dev    # http://localhost:3000

npm run build  # Production build

```

---

Part of the [travisBREAKS](https://travisbreaks.org) portfolio.