Tower Crane Reveal

A heavy industrial construction animation. A fully vector SVG tower crane executes horizontal jib travel and custom cable physics to lift, swing, and construct any arbitrary ReactNode payload from off-screen into the center of the viewport.

Constructing Crane...

Structural Presets

Preview Payload

Payload Type

Crane Rig Settings

Crane Side

Reveal Path

Crane Scale1.00x

Construction Grid Guide

Horizontal Travel

Physics & Forces

Max Swing Amplitude14°

Cable Elasticity (Bounciness)45%

Wind Force (Ambient Sway)15%

Timing Controls

Assembly Speed Factor1.0x

Hook Self-Rotation

Required Dependencies

npm install gsap @gsap/react react-icons

Architecture & Setup

Copy these files into your codebase matching the structure below: 📁 src/ ├── 📁 css/ │ └── 📁 tower-crane-reveal/ │ └── 📄 variables.css ├── 📁 types/ │ └── 📄 tower-crane-reveal.types.ts ├── 📁 constants/ │ └── 📄 tower-crane-reveal.constants.ts ├── 📁 hooks/ │ └── 📁 gsap/ │ └── 📁 tower-crane-reveal/ │ ├── 📄 index.ts │ ├── 📄 animateTowerCrane.ts │ └── 📄 useTowerCraneRevealAnimation.ts └── 📁 components/ └── 📁 tower-crane-reveal/ ├── 📄 TowerCraneReveal.tsx ├── 📄 TowerCraneRevealLoader.tsx ├── 📄 CraneTower.tsx ├── 📄 CraneJib.tsx ├── 📄 CraneTrolley.tsx ├── 📄 CraneHook.tsx ├── 📄 PayloadContainer.tsx └── 📁 preview/ ├── 📄 index.tsx ├── 📄 Controls.tsx └── 📄 Presets.tsx