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, path morphing and transforms with KUTE.js, plus a runtime-controlled Lottie player. Built with Vue 3.

  • Vue 3
  • anime.js
  • KUTE.js
  • Lottie
Launch demo
10

Infinite Universe

Drift forever through an endless procedural cosmos — floating islands and glowing worlds connected by threads of light, a cinematic camera flying between them, dynamic lighting, warp jumps and hidden easter eggs.

  • R3F
  • GSAP
  • simplex-noise
  • GLSL
  • postprocessing
Launch demo
11

AI Data Visualization

Six procedurally generated datasets — company analytics, a trading session, spacecraft telemetry, city traffic, a packet fabric and a century of climate — rendered as flowing graphs, morphing charts and animated node networks, with a statistical analyst reading them back.

  • Svelte 5
  • D3
  • Canvas
  • d3-force
  • TypeScript
Launch demo
12

Interactive Museum

A portfolio you walk through instead of scroll. Six rooms — atrium, kinetic hall, gallery, timeline, constellation, guest hall — each with its own lighting rig, synthesized spatial ambience and one hidden interaction. First-person controls, or take the guided tour. Every texture and every sound is generated at runtime; the build ships no images and no audio.

  • Babylon.js 9
  • SolidJS
  • Web Audio
  • First-person
  • TypeScript
Launch demo
13

Holographic OS

A futuristic desktop you can actually use — glass windows that drag, resize and snap to the screen edges, three virtual desktops, right-click menus, folders that open in 3D, a dock that magnifies, live GPU and thermal graphs, a simulated weather system with four climates, an idle lock screen, and NOVA, an assistant that runs the desktop instead of describing it. All projected over a volumetric WebGL lattice. No images, no audio, no network calls.

  • Preact
  • Signals
  • OGL
  • interact.js
  • GLSL ES 3.0
Launch demo
14

Scale — a descent into DNA

One continuous scroll from living tissue to hydrogen bonds and back out again: a drifting field of cells, a cell interior, the nucleus and its 23 chromosome territories, a chromosome unwinding into beads-on-a-string, B-DNA carrying a real coding sequence with true major and minor grooves, base pairs resolved to their ring atoms, a polymerase opening a transcription bubble, a ribosome reading codons while the chain folds, and finally the p53 interaction network with the feedback loop that shuts it back off. Nine scales that crossfade rather than cut. No 3D engine, no model files, no textures.

  • Angular 21
  • Zoneless + signals
  • WebGL2
  • GLSL ES 3.0
  • No 3D engine
Launch demo
15

Interactive Chess World

Chess where no piece simply slides. Knights crouch and somersault over the corner of their L, landing hard enough to shake the camera. Queens never cross the board at all — they come apart into a column of sparks and rebuild themselves on the far square. Rooks charge behind a shockwave, bishops streak down the diagonal, captured pieces burst apart, and a mated king falls over. Play it against a hand-written engine, or watch six famous games replayed in Cinema. No models, no textures, no audio files — pieces are turned on a lathe at boot and every sound is an oscillator.

  • Nuxt 4
  • PlayCanvas 2
  • Chess engine from scratch
  • Web Worker search
  • Custom palettes
  • Web Audio
Launch demo

Built with