Framer3JS

Get In Touch

Build by @thien__khang

First 3D Runtime Component in Framer

First 3D Runtime Component in Framer

A native framer component, support to build a threejs scene with multiple trigger, and scroll animation.

Get Template
Demo

Introducing to

Introducing to

Framer x ThreeJS

Framer x ThreeJS

Build directed 3D scenes in Framer, fully compatible with your Framer workflow.

This component is built for designers and creative developers who want more than a simple 3D embed. Build directed 3D scenes in Framer, without breaking your workflow.

A Framer-native control system for serious 3D scenes.

A Framer-native control system for serious 3D scenes.

Complex UI Composition

Complex UI Composition

Most components are just static scenes, unable to interact with the UI. But this one can.

Most components are just static scenes, unable to interact with the UI. But this one can.

Visual State Machine

Visual State Machine

This component gives you state-based control over how your scene changes across different moments.

This component gives you state-based control over how your scene changes across different moments.

Scroll Variant Animation

Scroll Variant Animation

Native integration with Framer Scroll Variants.

Native integration with Framer Scroll Variants.

This is not limited to one model in one frame.

This is not limited to one model in one frame.

The component is designed for more advanced scene structures:

The component is designed for more advanced scene structures:

Import Model

UI & Animation composition

Scroll smoothing & model interaction

Control enviroment, light, and materials

Debug Helper

Enhance your boring website

Portfolio websites

Create cinematic portfolio sections with 3D scenes that react to scroll, hover, and page states.

Showcase identity, motion, and visual direction without leaving Framer.

Game pages

Build playful, interactive 3D moments directly on the canvas.

Trigger hover, click, and scroll-based scene states to make game pages feel more alive.

Product showcases

Keep your product model centered, responsive, and controlled across the page.

Use layer IDs, pinned positioning, animation states, and scene transitions to create polished product storytelling.

Motion landing pages

Connect 3D animation with Framer’s page structure.

Trigger enter, exit, scroll, and section-based animations from Framer layers to create motion-led landing pages.

Same output, but more effective

A complete scene-control layer for building directed 3D experiences inside Framer.

Framer Native

State Machine

UI Composition

No-code

Spline Design

Embed only.

Strong, but external

Very Limited

Yes

Peach Web

Embed only.

Strong, but external

Strong, but external

Yes

Framer

Yes

Rare

Rare

Yes

Framer x ThreeJS

Yes

Yes

Yes

100% Yes

Don't know how to setup?

Try my template!

Get Template
Preview

Framer3JS

0%

Framer3JS

0%