---
title: "SpatialMorphGallery — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Konstantin Nikolaev · Galleries. 3in1 Gallery carousel with 2 phase"
canonical: "https://framer.elliotli.dev/component/spatialmorphgallery"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/SpatialMorphGallery

# SpatialMorphGallery

3in1 Gallery carousel with 2 phase

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

![SpatialMorphGallery preview image 1](https://framer.elliotli.dev/og/component/spatialmorphgallery/f6208e4a67f6940e/1600x1200.jpg)

## Summary

3in1 Gallery carousel with 2 phase

## Description

### Spatial Morph Gallery — 3-in-1 Three.js Gallery

Transform your projects into an immersive spatial experience. Spatial Morph Gallery combines three interactive 3D formations with a smooth, scroll-driven gallery—all inside one Framer component.

**Phase 1 — Spatial Formation**

Choose between three customizable shapes:

-   Sphere
    
-   Ring
    
-   Infinite Cylinder
    

Your cards form a floating 3D structure with rotation, mouse-responsive movement, depth fade and blur. If there aren’t enough cards to complete the selected shape, existing cards are repeated automatically. These duplicates are only used for the 3D formation and disappear during the transition.

**Phase 2 — Scroll Gallery**

As the visitor scrolls, the 3D formation smoothly morphs into a horizontal or vertical gallery containing only the original cards.

The gallery supports:

-   Horizontal or vertical scrolling
    
-   Center snapping
    
-   Enlarged center card
    
-   Separate card sizes for both phases
    
-   Multiple fixed aspect ratios or original image proportions
    
-   Linked cards with hover feedback
    
-   Keyboard navigation
    
-   Custom background or full transparency
    

Each card can contain its own image and link, with optional opening in a new tab.

**Recommended Setup**

For the smoothest experience:

1.  Place the component inside a Stack.
    
2.  Set the component height to **100vh**.
    
3.  Set the parent Stack height to approximately **600vh**.
    
4.  Set **Card Scroll Distance** to around **250px**.
    
5.  Set the component to **Sticky** inside the Stack.
    

This setup gives the spatial formation enough scroll distance to morph naturally before the interactive gallery begins moving.

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

-   All · #6255

## Details

- **Author**: Konstantin Nikolaev
- **Price**: $10.00
- **Published**: 2026-07-17
- **Updated**: 2026-07-26
- **Added**: 2026-07-17
- **Categories**: Galleries

## More like this

-   [Geometry CMS Gallery](/component/geometry-cms-gallery) — Akshay M · $20 — Scroll-Animated Portfolio Gallery
-   [Fluid InfiniteScroll](/component/fluid-infinitescroll) — Atemo Art · $16 — LIQUID / PRISM Gallery
-   [Isometric Gallery](/component/isometric-gallery) — Edi Priatama · $5 — 3D image gallery
-   [HoverExpand Gallery](/component/hoverexpand-gallery) — piyush vichare · $2 — HoverExpand Gallery is a modern Framer component for creating interactive image galleries with smooth hover expansion.