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
07

Car Configurator

A premium BMW M3 GTR E46 configurator in a Need-for-Speed garage — a real 3D model with GSAP paint transitions, wheel & caliper finishes, angel-eye headlights, cinematic camera presets, and a reflective stage with bloom.

  • R3F
  • drei
  • GSAP
  • postprocessing
  • TypeScript
Launch demo
08

Cyberpunk Portfolio

A futuristic developer portfolio — Cyberpunk 2077 × Blade Runner. An animated boot intro, GPU neon particles, an interactive 3D workspace and scroll-driven camera transitions, with glassmorphism UI and bloom. Built on Next.js (static export).

  • Next.js
  • R3F
  • GSAP
  • Lenis
  • GLSL
Launch demo
09

SVG Motion Lab

Interactive SVG animation techniques — self-drawing strokes, shape morphing, grid staggers and motion paths with anime.js v4, plus a runtime-controlled Lottie player. Built with Vue 3.

  • Vue 3
  • anime.js v4
  • Lottie
  • Vite
Launch demo

Built with