initializing fx_engine v2.0_

FX LAB

Laboratoire d'effets visuels pour le web moderne. Particules, shaders, interactions — vanilla JS, zéro framework.

Explorer Systèmes
scroll
7
Systèmes
30+
Effets
0
Framework
60
FPS
// 01 — flow field

Particules Canvas 2D

Champ de forces procédural. Les particules suivent un flux généré par du bruit simplex. Interactif, configurable.

flow_field.js — 200 particles
200
3
30
50
// 02 — npr shaders

Shaders GLSL

Non-photorealistic rendering. Aquarelle, cel-shading, wireframe, hachures, goo — temps réel sur GPU.

npr_shader.glsl — WebGL
50%
160°
40%
// 03 — mouse interaction

Paint & Draw

Dessinez directement sur le canvas. Quatre modes : trainée, ondulations, dispersion, connexions.

paint.js — Canvas 2D
30
8
20
60%
// 04 — ripple

Ondulations

Simulation d'ondes 2D. Cliquez sur le canvas ou n'importe où sur la page.

ripple.js — Wave simulation
20
96%
8
// 05 — matrix

Matrix Rain

Pluie de caractères procédurale. Canvas 2D pur, effet cinématique.

matrix_rain.js
// 06 — geo morph

Geometric Morphing

Formes géométriques qui se transforment. Lissajous, spirales, polygones — animation fluide.

geomorph.js — Parametric shapes
// 07 — scroll driven

Scroll-Driven 3D

Le fond Three.js réagit à votre scroll. Particules, couleurs, caméra — tout est synchronisé.

scroll position: 0%
// 08 — systems

Systèmes visuels

🧊

Three.js

3D WebGL complète. Particules, shaders, scènes, post-processing. Le standard.

WebGL 3D
🖌️

Canvas 2D

Zéro dépendance. Flow field, paint, ripple, matrix. Contrôle pixel par pixel.

Canvas 2D
🌀

GLSL Shaders

Vertex / Fragment custom. NPR, distorsion, transitions, génératif.

GLSL
⚡

tsparticles

Système de particules configurable. Confetti, snow, bubbles, connexions.

Particles
🎬

GSAP

Timeline, ScrollTrigger, MorphSVG, MotionPath. Le roi de l'animation.

Animation
🔮

PIXI.js

2D WebGL haute perf. Sprites massifs, filters, blend modes.

WebGL 2D