I wanted to build a hero component where you don’t start with a fixed animation.

You start with a shape.

Then you decide what that shape becomes.

Introducing 3D Hero Builder Pro for Framer.

Choose from 20 built-in 3D shapes — or upload your own SVG and turn it into real 3D geometry.

Then arrange it with 20 procedural compositions:

Spirals. Helixes. Waves. Arcs. Tunnels. Ribbons. Blooms. Vortexes. Infinity curves.

Or switch to Custom Math and build your own composition using sine, cosine, Gaussian, sinc, Lissajous and other wave functions.

Then add:

• Cursor interaction • Drag rotation • Scroll motion • Materials + reflections • Camera presets • Huge headline • Description • CTA

And if you want people to experience the component, enable the built-in Playground.

The goal was simple:

Make it easy to create a hero that doesn’t look like everybody else’s hero.

3D Hero Builder Pro.

Built for Framer. Built with Three.js.

I wanted to build a hero component where you don’t start with a fixed animation.

You start with a shape.

Then you decide what that shape becomes.

Introducing 3D Hero Builder Pro for Framer.

Choose from 20 built-in 3D shapes — or upload your own SVG and turn it into real 3D geometry.

Then arrange it with 20 procedural compositions:

Spirals. Helixes. Waves. Arcs. Tunnels. Ribbons. Blooms. Vortexes. Infinity curves.

Or switch to Custom Math and build your own composition using sine, cosine, Gaussian, sinc, Lissajous and other wave functions.

Then add:

• Cursor interaction • Drag rotation • Scroll motion • Materials + reflections • Camera presets • Huge headline • Description • CTA

And if you want people to experience the component, enable the built-in Playground.

The goal was simple:

Make it easy to create a hero that doesn’t look like everybody else’s hero.

3D Hero Builder Pro.

Built for Framer. Built with Three.js.