three-js-and-animations
Six demos · one repo

Interactive web, rendered & animated.

A small collection of frontend showcases — GSAP-powered motion, Three.js / WebGL scenes, and an audio-reactive visualizer. Each app is its own Vite build, deployed under this domain.

Browse showcases View source
01

Three.js WebGL Showcase

GPU particles, custom GLSL shaders, and GLTF viewers — routed with TanStack Router, lazy-loaded per scene.

  • three
  • @react-three/fiber
  • GLSL
  • TanStack
Launch demo
02

Music Visualizer

Audio-reactive scene driven by real-time FFT — wave-distortion shaders, particle aura, and a beat-synced camera.

  • R3F
  • Web Audio API
  • Postprocessing
  • FFT
Launch demo
03

GSAP Animations Showcase

A curated set of high-performance GSAP patterns — scroll reveals, text splits, magnetic cursors, page transitions.

  • GSAP
  • ScrollTrigger
  • React Router
  • shadcn/ui
Launch demo
04

Shader Lab

Eleven hand-written GLSL demos on one fullscreen canvas — water, aurora, plasma, voronoi, truchet, tunnel, raymarched SDF, hologram, GPU particles and more.

  • R3F
  • GLSL ES
  • WebGL2
  • Web Audio
Launch demo
05

Physics Playground

Draggable Matter.js cards with elastic GSAP hover — a magnetic cursor, dynamic collisions, slow-motion, and a drifting particle field. Mouse, touch, and keyboard.

  • Matter.js
  • GSAP
  • React
  • TypeScript
Launch demo
06

Camp Nou — A Matchday Story

A blaugrana-styled scroll story at Camp Nou — full-bleed hero, a pinned in-place carousel that cycles the 23-man squad (roster + photos sourced live from Wikipedia / Commons), a coaching-staff grid, and a parallax fans bleed. All-DOM, GSAP ScrollTrigger + Lenis, IntersectionObserver-driven text reveals.

  • React
  • GSAP ScrollTrigger
  • Lenis
  • IntersectionObserver
  • Tailwind
Launch demo

Built with