Floatype — Interactive 3D Typography Component for Framer

Preview

Turn ordinary headlines into immersive 3D scenes.

Floatype is a customizable Three.js component built specifically for Framer. Add your own text, surround it with a field of floating cubes, and control the entire visual directly from the Framer properties panel—no coding required.

What you can customize:

• Your own text
• Rainbow or custom text colors
• Regular or bold 3D typography
• Text size, depth, and bevel
• Rainbow or custom cube colors
• Cube density and transparency
• Transparent or colored background
• Float and Zoom interaction modes
• Mouse and touch interactions

The component includes responsive sizing, deterministic cube placement, mobile support, and a static rendering mode for the Framer Canvas and previews.

Perfect for hero sections, portfolios, creative studios, launch pages, experimental interfaces, and digital campaigns.

Requirements: Framer and an internet connection for loading the Three.js assets.

Add it to your project, type your headline, and make the entire page feel less obedient.