---
title: "DualScene3DText — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Heyuhm · Text. Dual-State 3D Sphere Text"
canonical: "https://framer.elliotli.dev/component/dualscene3dtext"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/DualScene3DText

# DualScene3DText

Dual-State 3D Sphere Text

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

![DualScene3DText preview image 1](https://framer.elliotli.dev/og/component/dualscene3dtext/64c14aa1baecd17a/1600x1200.jpg)

## Summary

Dual-State 3D Sphere Text

## Description

### Overview

The Dual Scene 3D Text is a high-end typographic component that creates a mesmerizing transition between readable text and a 3D spherical cloud of characters. Using advanced math and spring physics, it seamlessly morphs two different messages into complex 3D shapes as they rotate.

### Key Features

-   **3D Morphing Engine:** Watch as your text explodes into a perfectly distributed 3D sphere and back again with smooth, organic motion.
    
-   **Dual Scene Toggle:** Supports two independent text inputs that automatically switch states based on the number of rotations.
    
-   **Golden Angle Distribution:** Characters in the sphere mode are distributed using the "Golden Angle" algorithm for a perfectly uniform 3D look.
    
-   **Stutter-Free Performance:** Powered by useAnimationFrame and MotionValue for 60fps hardware-accelerated 3D rotations.
    
-   **Perspective Rendering:** Built with preserve-3d to provide genuine depth and spatial immersion.
    

### How to Use

1.  **Enter Your Text:** Fill in Text 1 and Text 2. Use line breaks (Enter) to control the layout of the flat text state.
    
2.  **Adjust the Sphere:** Use Radius to control the size of the 3D explosion and Sphere Opacity to create a ghostly, ethereal effect in sphere mode.
    
3.  **Control Rotation:** Set the Rotate Speed (seconds per full turn) and use Toggle Rotations to decide how many spins happen before the scenes switch.
    
4.  **Styling:** Fully customize the font family, weight, size, and color to match your brand's aesthetic.
    

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

-   All · #4853

## Details

- **Author**: Heyuhm
- **Price**: $3.00
- **Published**: 2026-05-27
- **Updated**: 2026-05-26
- **Added**: 2026-05-15
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing