Webgl skills

Particle Galaxy

nexu-io

Create stunning real-time particle galaxies with WebGL.

Raymarched Hero

nexu-io

Create stunning real-time 3D scenes with raymarching.

Three.js Post-Processing

calesthio

Enhance your 3D scenes with advanced visual effects.

Three.js Shaders

calesthio

Create custom visual effects with Three.js shaders.

Three.js Loaders

calesthio

Efficiently load 3D assets with Three.js.

Three.js Textures

calesthio

Comprehensive guide to Three.js texture handling.

Three.js Lighting

calesthio

Master lighting in your Three.js scenes.

Three.js Fundamentals

calesthio

Master 3D scene setup and rendering with Three.js.

Mesh Gradient Dark Blue Clean

mengto

Create a premium dark-blue mesh gradient design system.

WebGL Laser

mengto

Create stunning laser background effects with WebGL.

Pixel Reveal Gallery

nexu-io

Create stunning scroll-reactive image galleries with ease.

Liquid Metal Border

mengto

Add animated liquid-metal borders to your React components.

Phaser 4 Filters and Post-FX

phaserjs

Enhance your Phaser games with advanced visual effects.

WebGL Landing Steering

mengto

Guide your WebGL landing pages to specific visual outcomes.

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.

Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable Open Design web artifact.

A real-time synthwave scene — a perspective floor grid scrolling toward a banded retro sun under a neon starfield, all from one fragment shader. No textures. Rendered as a single self-contained `index.html`. Use when the brief asks for "synthwave", "outrun", "retro 80s", "neon grid", "perspective grid", "vaporwave", or a retro-futuristic hero. Open Design serves this in powered-preview mode so the GPU stack actually runs.

A real-time liquid-metal shader — a domain-warped noise field shaded as molten chrome, with a sweeping specular highlight over an iridescent thin-film (cosine-palette) sheen. No textures. Rendered as a single self-contained `index.html`. Use when the brief asks for "liquid metal", "molten chrome", "iridescent", "holographic", "metallic", "thin-film", or a reflective flowing surface. Open Design serves this in powered-preview mode so the GPU stack actually runs.

A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.

A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.

A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.

A scroll-reactive 3D image gallery in Three.js: Z-stacked images crossfade over per-image mood backgrounds with velocity breath, a glowing cursor trail and an editorial CMYK/RGB/HEX/PMS color card.

A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. Open Design serves this in powered-preview mode so the GPU stack actually runs.

Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero object or product-like visual with real lighting instead of CSS transform tricks.