Dora for Designers: No-Code Website Builder with Native 3D

Dora is a no-code website builder that brings 3D design directly into the web design canvas. Unlike Webflow or Framer where 3D requires custom code or embeds, Dora treats 3D objects as native elements. Import 3D models, position them in your layout, add scroll-triggered animations, and publish—all without writing code. It’s positioned between creative tools like Spline and production website builders like Webflow.

Key Specs

How Designers Use Dora

Dora appeals to designers who want to push beyond flat web design without diving into WebGL code.

For 3D Portfolio Sites

Build portfolio sites where your work floats in 3D space. Add depth and interactivity that flat sites can’t match. Showcase product designs, architecture, or motion work with 3D models users can explore. The 3D becomes part of the storytelling, not just decoration.

For Interactive Landing Pages

Create hero sections with 3D objects that respond to scroll or mouse movement. Add depth effects where elements move at different speeds (parallax on steroids). Build landing pages that feel more like interactive experiences than static pages.

For Product Marketing Sites

Import 3D product models and let users explore them from all angles. Add hotspots that reveal information when clicked. Create marketing sites where the product is the focus, rendered in real-time 3D rather than static product shots.

For Experimental Web Design

Push boundaries with unconventional layouts, scroll-based animations, and 3D transitions between sections. Dora’s constraint-free canvas lets you position elements anywhere, not just in traditional grid layouts. Good for creative agencies and designers building showcase sites.

Dora vs. Alternatives

Choose Dora if: You want to build visually striking sites with 3D elements and don’t need advanced CMS or e-commerce features.

Choose Webflow if: You need a mature platform with powerful CMS, SEO tools, and the ability to export code.

Choose Framer if: You want the easiest no-code builder with good animation tools, prioritizing speed over 3D capabilities.

Choose Spline if: You’re only creating 3D content to embed elsewhere, not building full websites.

Getting Started with Dora

Create your first 3D-enhanced website in under an hour.

Step 1: Build your layout with containers

Sign up at dora.run and create a new project. Use containers (Dora’s layout building blocks) to structure your page. Think of containers as flexible boxes that hold content. Dora uses a free-form canvas, so you can position elements anywhere, but containers help maintain structure.

Step 2: Import and position 3D objects

Click the 3D icon in the toolbar to add 3D objects. Import .gltf or .glb files from Spline, Blender, or 3D asset libraries. Position the 3D object in your scene using visual controls. Adjust lighting, camera angle, and materials in the properties panel.

Step 3: Add scroll-triggered animations

Select any element (2D or 3D) and open the timeline panel. Set keyframes that trigger at different scroll positions. Make 3D objects rotate as users scroll, or fade in 2D elements at specific points. Preview in real-time as you scrub the timeline.

Dora in Your Design Workflow

Dora bridges the gap between 3D design tools and web production.

• Before Dora: Plan layouts in Figma, create 3D assets in Spline or Blender, gather content and copy
• During design: Build and iterate in Dora, testing interactions and responsive behavior
• After Dora: Publish to Dora’s hosting, connect custom domain, share with clients

Common tool pairings:

• Dora + Spline for creating 3D assets then importing into Dora websites
• Dora + Blender for complex 3D models optimized for web (export as .glb)
• Dora + Figma for planning layouts and designing 2D assets before building in Dora
• Dora + After Effects for creating video content to mix with 3D elements

Common Problems (and How to Fix Them)

“My 3D models make the site slow”

3D is performance-intensive. Keep polygon counts under 100k for most objects. Use texture compression and limit material complexity. Test on older devices, not just your MacBook Pro. Dora provides performance metrics in the editor—watch for warnings about heavy assets.

“Scroll animations feel janky”

Scroll-triggered animations need optimization. Reduce the number of simultaneous animations. Use transforms (move, scale, rotate) instead of changing color or opacity when possible—they’re hardware-accelerated. Test on actual devices; smooth on desktop doesn’t guarantee smooth on mobile.

“My site doesn’t work on mobile”

Dora supports responsive design, but you need to design for it. Create separate timeline animations for mobile breakpoints. Simplify 3D scenes on mobile—fewer objects, lower detail. Consider showing static 2D fallbacks on very old devices.

“The 3D lighting doesn’t look right”

Lighting in real-time 3D (WebGL) is different from traditional 3D renders. Adjust Dora’s environment lighting and add fill lights to brighten dark areas. If you need specific lighting, bake it into your model’s textures before import. Real-time lighting has limits compared to offline rendering.

“I can’t figure out the timeline system”

Dora’s timeline is like After Effects but for web. Each keyframe represents a scroll position. Start simple: make one object fade in, test it, then add more. Think of scroll position as time. Use Dora’s documentation and YouTube tutorials—the timeline is powerful but has a learning curve.

“Should I use Dora instead of Webflow?”

It depends on your project. Dora excels at visual, 3D-heavy sites but lacks Webflow’s CMS depth and maturity. Use Dora for portfolios, product launches, and experimental sites. Use Webflow for content-heavy sites, e-commerce, or when you need the security of an established platform.

“Can I collaborate with a team in Dora?”

Dora has team features on paid plans, but real-time collaboration isn’t as smooth as Figma. Assign different pages to different team members to avoid conflicts. Use comments to communicate. For large teams, establish clear ownership of sections.