Floating Canvas

Create immersive and playful experiences with a physics-based draggable canvas for Framer.

Floating Canvas transforms any Framer layer, component, stack, or code component into an interactive floating experience. Unlike traditional card galleries, Floating Canvas gives you complete creative freedom by allowing you to add unlimited custom components while retaining advanced drag interactions, scatter animations, and physics-based motion.

Perfect for portfolios, skill sections, case studies, creative showcases, and experimental interfaces.

Features

Unlimited Custom Components

• Add unlimited Framer components, frames, stacks, or code components

• Design every item independently

• No predefined card templates or visual restrictions

Physics-Based Dragging

• Smooth drag interactions

• Momentum and elastic movement

• Automatic z-index management

• Natural motion behavior

Scatter Animation

• Instantly reorganize your canvas with a single click

• Animated gather and scatter effects

• Randomized layouts for playful interactions

Interactive States

• Hover scale effects

• Drag indicators

• Active item elevation

• Cursor feedback

Perfect For

• Product Designer Portfolios

• Skill Sections

• Interactive Galleries

• Case Study Navigation

• Agency Websites

• Creative Showcases

• Moodboards

• Experimental Interfaces

What's Included

• Floating Canvas Component

• Unlimited Component Support

• Physics-Based Motion System

• Scatter Animation System

• Drag Interaction System

• Example Setup