public 3d-motion repository

liquid-glass-experience

// kolonatalie/liquid-glass-experience

High-performance interactive 3D Liquid Glass experience. Built with Three.js, Rapier physics (WASM), and GSAP. Optimized for 60 FPS with dynamic code splitting and modern SCSS architecture.

$ git log --oneline --stat
stars:3forks:0updated:2026-04-16
README.md
readonly

Natalia aka kolonatalie — Creative Developer

Liquid Glass Experience — Live Demo

Three.js GSAP TypeScript Sass (SCSS) Vite

Key Features

  • Real-time Liquid Physics: Powered by @dimforge/rapier3d-compat (WASM) for high-performance particle interaction.
  • Dynamic Metaballs: Utilizing MarchingCubes algorithm to create organic, fluid-like "liquid glass" surfaces.
  • Glassmorphism & PBR: Advanced MeshPhysicalMaterial with transmission, thickness, and IOR for realistic glass refraction.
  • Interactive Explosions: Raycaster-based interaction that allows users to "scatter" the liquid drops with a click.
  • Optimized Rendering: Smooth 60 FPS experience achieved through dynamic code splitting and lazy loading of heavy modules.

Tech Stack

  • Three.js
  • GSAP
  • Vite
  • Sass (Modern API): Using @use and @forward for modularity.
  • Stylelint: Enforcing BEM methodology and property order.
  • OKLCH: Modern color space for superior web visuals.

Installation

# Clone the repository
git clone https://github.com/kolonatalie/portfolio

# Install dependencies
npm install --legacy-peer-deps

# Start development server
npm run dev

Note: --legacy-peer-deps is required for ESLint 9 compatibility with some plugins.

Available Scripts

npm run devStarts Vite dev server at http://localhost:3000
npm run buildBuilds the project.
npm run previewLocally previews the production build
npm run lintAudits JS/TS and SCSS for errors.
npm run lint:fixAutomatically fixes linting and styling issues.

Connect with Me

I'm always open to discussing creative technology, motion design, or potential collaborations.

LinkedIn Badge X Badge Bluesky Badge Mastodon Badge GitHub Badge

metadata.json
TypeScriptCreative Codingfrontend-performanceGSAPliquid-effectmarching-cubesphysics-engineportfolio-projectrapierThree.jstypescriptweb-animationWebGL

[INFO] 4 topics link to curated motion topic pages.