DualScene3DText

DualScene3DText
DualScene3DText

About DualScene3DText

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.

From Heyuhm

Scroll Text Fill
ReactiveTextGrid
ScatteredLettersText
CylinderTextStack

Related Components

WebGL Text Tunnel
Smart Typewriter Pro
Shape ticker
Kinetic Type Flow