Crane Text Reveal

A high-fidelity industrial construction animation. An animated overhead crane trolley coordinates with gravity-pendulum cable physics to pick up scattered text phrases, lift, swing, travel, and stack them into a pixel-perfect, responsive typography layout.

Turning Ideas

Powering up crane rig...

Rig Presets

Edit Words Stack

Line 1

Line 2

Line 3

Crane Rig Settings

Hook Style

Pickup Direction

Lift Height220px

Cable Cable Length160px

Render Crane Body

Physics & Forces

Swing Max Angle18°

Cable Damping0.960

Assembly Speeds

Travel Speed Multiplier1.0x

Placement Stagger Delay0.8s

Respect Accessibility

Required Dependencies

npm install gsap @gsap/react react-icons

Architecture & Setup

Copy these files into your codebase matching the structure below: 📁 src/ ├── 📁 css/ │ └── 📁 crane-text-reveal/ │ └── 📄 variables.css ├── 📁 types/ │ └── 📄 crane-text-reveal.types.ts ├── 📁 constants/ │ └── 📄 crane-text-reveal.constants.ts ├── 📁 hooks/ │ └── 📁 gsap/ │ └── 📁 crane-text-reveal/ │ ├── 📄 index.ts │ ├── 📄 animateCrane.ts │ └── 📄 useCraneTextRevealAnimation.ts └── 📁 components/ └── 📁 crane-text-reveal/ ├── 📄 CraneTextReveal.tsx ├── 📄 CraneTextRevealLoader.tsx └── 📁 preview/ ├── 📄 index.tsx ├── 📄 Controls.tsx └── 📄 Presets.tsx