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




Three.js-Powered 3D Model Importer for Framer| 👈 Click for Demo
Bring the full power of Three.js rendering directly into Framer. Load, configure, and animate complex 3D scenes from the property panel—zero code required.

Scroll Animation: native integration with Framer Scroll Variants.
Supported Formats: GLB, GLTF, FBX, and ZIP archives. Native Draco compression support.
Three.js Materials: 4 built-in shaders (Original, Wireframe, Toon, Anime Line) + manual PBR overrides for 15+ properties (transmission, clearcoat, iridescence).
Environments: 6 procedural presets, Poly Haven HDRI integration, custom HDR URLs, and real-time shadows.
Post-Processing Pipeline: GPU-accelerated Bloom, FXAA, 6 tone mapping modes (ACES Filmic, AgX, etc.), color grading, and chromatic aberration.
Controls: Orbit controls, SkinnedMesh animation clip selection, custom dissolve/particle shaders:
Multi-Scene Composition: Render up to 8 independent sub-scenes within a single viewport.
Performance: Eager preloading, parsed Three.js model caching, auto-centering, and smart GPU resource management.

Framer
Visual web design and publishing tool for building responsive sites, CMS pages, animations, and prototypes.
Three.js
JavaScript 3D library for building interactive WebGL scenes, product visuals, and immersive browser experiences.
Codex
AI coding agent used to inspect codebases, edit files, automate tasks, and ship product changes faster.
Claude Code
AI coding assistant for planning, refactoring, debugging, documentation, and complex implementation work.
Gemini
Google AI assistant used for research, ideation, writing support, technical exploration, and workflow acceleration.
Blender
3D creation suite for modeling, materials, lighting, rendering, animation, and production-ready visual assets.
Comment
Owner
Licensed under
Other works
