Crane Text Reveal
Turning Ideas
Powering up crane rig...
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
Animation Controls
Rig Presets
Edit Words Stack
Line 1
Line 2
Line 3
Crane Rig Settings
220px
160px
Physics & Forces
18°
0.960
Assembly Speeds
1.0x
0.8s