sveltekit-webgl-experience Svelte Themes

Sveltekit Webgl Experience

Experimental showcase of 60FPS web performance. Includes custom state management for boot sequences, GLSL shaders, and physics-based UI.

Project Logo

✦ MERT MUTLU | Digital Portfolio

"Identity Verified. Welcome to the Protocol."

A high-fidelity immersive web experience bridging the gap between cinematic storytelling and modern web performance. This project explores the intersection of Creative Development, WebGL, and Interactive UI.


⚡️ Key Features

🔐 Identity Verification Protocol (New)

A cinematic "Security Clearance" entry system. Users must authenticate via a typewriter-style terminal before accessing the main site.

  • Tech: Custom userStore state management + GSAP timelines.
  • Vibe: Cyberpunk/classified data clearance.

🔓 "The Protocol" Cyber-Lock Game

A hidden mini-game embedded in the homepage.

  • Objective: Align rotating neon security rings to "breach" the system.
  • Mechanics: Physics-based rotation, collision detection, and win/loss states.

💧 Liquid Physics Cursor

A custom trailing cursor that mimics fluid dynamics.

  • Behavior: Lags organically behind the mouse and expands magnetically over interactive elements.
  • Tech: Svelte spring motion for 60FPS smoothness.

🎥 Cinematic Grain & Typography

  • Grain Overlay: A custom canvas-based noise generator for filmic texture.
  • Kinetic Type: Typewriter and scramble effects on hover (e.g., Developer Signature).

🛠 Tech Stack

Domain Technology Usage
Framework SvelteKit SSR, Routing, State Management
3D Engine Three.js + Threlte WebGL Rendering, Particle Globe, Monolith
Animation GSAP Complex Sequences, Timelines, ScrollTriggers
Styling TailwindCSS Utility-first styling system
Smooth Scroll Lenis Inertia-based smooth scrolling

🚀 Development Setup

1. Clone & Install

git clone https://github.com/yourusername/ucuncubinyil-portfolio.git
cd ucuncubinyil-portfolio
npm install

2. Run Dev Server

npm run dev
# Access at http://localhost:5173

3. Build for Production

npm run build

👨‍💻 Developer Signature

Handcrafted by Tahsin Mert Mutlu Creative Engineer & Frontend Developer

“Code is poetry written with logic.”

LinkedInGitHub

Top categories

Loading Svelte Themes