3D / WebGL

ThreeJS 3D Video Gallery

by Vanguardia · motionprompts.dev

A Three.js WebGL grid of video-textured planes curved into a parabolic wall, each plane mapped to a looping muted video texture. Mouse movement drives a per-frame requestAnimationFrame loop that applies parallax, oscillation and rotation to every plane, eases the camera lookAt target, and tilts the CSS-3D headline via a cubic-bezier transform.

Type: Web motion
Framework: Three.js
Trigger: pointer
Duration: 0.25–1.8s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Complexity: 4/5
Pinned: no
Reduced motion: not handled
Libraries: three

mouse-lerped (0.05) camera lookAt across a parabolic WebGL video wall; each of the 49 planes adds randomized parallax and a sin(time+phase)*mouseDistance*0.1 oscillation, while the CSS-3D headline tilts on a 0.5s easeOutCubic transition

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev26,794 chars

# Framecast — 3D Curved Video Wall (Three.js)

## Goal
Build a full-viewport, white WebGL scene: a **7×7 grid of 49 flat planes**, each textured with a **loopin…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Leon’s 15-second motion design reel

1906 San Francisco Market Street in Blender

Mobile game reward animation template

Glass and gold mosaic that comes alive

Fresh recipes, every week.