Liquid Glass Experience — Live Demo

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 dev	Starts Vite dev server at http://localhost:3000
npm run build	Builds the project.
npm run preview	Locally previews the production build
npm run lint	Audits JS/TS and SCSS for errors.
npm run lint:fix	Automatically fixes linting and styling issues.

---

Connect with Me

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