3D / WebGL

Brutalist Sci-fi Corridor

by Vanguardia · motionprompts.dev

On page load a preloader counter climbs to 100 over a black overlay, then a GSAP timeline fades the overlay, rotates the Three.js camera around a sodium-lit brutalist concrete corridor (ACES grade, UnrealBloom + film-grain post-processing) and scrambles the nav and heading text into view via staggered opacity; afterward the camera follows the mouse with a lerped parallax.

Type: Web motion
Framework: Three.js
Trigger: pointer
Duration: 0.1–4s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: mixed
Easing: power2
Complexity: 4/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, three, GLTFLoader, EffectComposer, RenderPass, ShaderPass, UnrealBloomPass

Load-time preloader: a 4s linear counter to 100, then overlay fade + a 2s power2.inOut camera orbit (180deg swing to the corridor axis) crossfaded with a random-order char scramble; afterwards a permanent rAF loop lerps the camera angle/height toward the pointer at 0.025/0.05. Nothing is scroll-driven.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev26,701 chars

# Brutalist Sci-fi Corridor — WebGL Preloader Reveal

## Goal
Build a full-viewport WebGL hero: a **brutalist concrete corridor** rendered in Three.js with **Un…

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.