Fardeen

Experiments in three-dimensional space. Pure CSS 3D transforms, WebGL particle systems, and interactive physics. Drag, hover, and interact with each piece.

CSS 3D Cube

01 / CSS TRANSFORMS
Front
Back
Right
Left
Top
Bottom
Drag to rotate

How it works

Pure CSS transform-style: preserve-3d with six face elements translated ±70px along each axis. Mouse drag maps cursor delta to X/Y rotation angles. No JavaScript animations. the browser's GPU compositor handles all 3D projection via CSS perspective and matrix transforms.

Particle Galaxy

02 / THREE.JS + WEBGL
15,000 particles

How it works

15,000 points distributed along logarithmic spiral arms using parametric equations. Each particle's position is computed from r = a × e^(b×θ) with random scatter. Rendered as a Three.js BufferGeometry point cloud with size attenuation and additive blending for the glow effect. Rotates on the Y-axis at 60fps.

Animated Wireframe Terrain

03 / THREE.JS + NOISE

How it works

A 60×60 PlaneGeometry with vertices displaced by 2D simplex noise. The noise offset scrolls over time, creating a flowing ocean-like effect. Rendered as a wireframe MeshBasicMaterial with vertex-based color gradients. Camera orbits automatically. Mouse position subtly tilts the camera angle.

3D Parallax Layers

04 / CSS PERSPECTIVE
Move your mouse over the scene

How it works

Multiple stacked div layers at different Z-depths respond to mouse position. The CSS perspective property creates depth foreshortening. Layers closer to the camera move more than distant ones. Each layer's transform is computed from the mouse offset multiplied by its depth factor.

Isometric Height Map

05 / CSS 3D GRID
Hover cells to raise them

How it works

An 8×8 grid of div elements with CSS rotateX(55deg) rotateZ(45deg) creates an isometric projection. Each cell uses translateZ() to simulate height. Hover raises cells with spring-eased transitions. Wave mode animates translateZ using sin(x + y + time) across the grid. All transforms are GPU-accelerated via CSS transform-style: preserve-3d.