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.