---
title: "Floating Canvas — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Trần Ngọc Hoài · Cards. Floating Canvas transforms any Framer layer, component, stack, or code component into an interactive floating experience."
canonical: "https://framer.elliotli.dev/component/floating-canvas"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Floating Canvas

# Floating Canvas

Interactive Scatter on Canvas

[View on Framer](https://framer.com/marketplace/components/floating-canvas/?via=elliot-li)

![Floating Canvas preview image 1](https://framer.elliotli.dev/og/component/floating-canvas/2567b5799a7f517b/1600x1200.jpg)

## Summary

Floating Canvas transforms any Framer layer, component, stack, or code component into an interactive floating experience.

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6772

## Details

- **Author**: Trần Ngọc Hoài
- **Price**: $8.00
- **Published**: 2026-07-02
- **Updated**: 2026-08-27
- **Added**: 2026-07-02
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards