Animated 3D Illustration in Framer

Animated 3D Illustration in Framer

Animated 3D Illustration in Framer

Animated 3D Illustration in Framer

Website animation

Website animation

Website animation

Website animation

Animated 3D Illustration in Framer

Animated 3D Illustration in Framer

Animated 3D Illustration in Framer

Animated 3D Illustration in Framer

This is a 3D animated illustration in Framer, inspired by Dan's work on the Raycast website. Feel free to remix the project and take a peek at how something like this can be created in Framer without writing a single line of code.

This is a 3D animated illustration in Framer, inspired by Dan's work on the Raycast website. Feel free to remix the project and take a peek at how something like this can be created in Framer without writing a single line of code.

This is a 3D animated illustration in Framer, inspired by Dan's work on the Raycast website. Feel free to remix the project and take a peek at how something like this can be created in Framer without writing a single line of code.

This is a 3D animated illustration in Framer, inspired by Dan's work on the Raycast website. Feel free to remix the project and take a peek at how something like this can be created in Framer without writing a single line of code.

Animated 3D Illustration in Framer
Animated 3D Illustration in Framer
Animated 3D Illustration in Framer
Animated 3D Illustration in Framer

Copy component

Copy component

Copy component

Copy component

About The Resource

The 3D illustration is built using frames with 3D transforms. 3D transforms can project any layer into 3D space. So, we can build these little boxes and put them next to each other to set up any scene we like.

I created every object needed for the animation, then wrapped the whole thing in a component. I need the component because it allows me to create different variants, where I can change the position of the boxes, and connect the variants with interactions to make it interactive.

3d illustration framer component variants

If you want to learn more about 3D transforms so you can also build similar 3D experiences on your websites, watch this free 30-minute crash course.

Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice, or copy and paste it to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.