Skip to content

component

DualScene3DText

By Heyuhm

Details

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 Enter Your Text: Fill in Text 1 and Text 2. Use line breaks (Enter) to control the layout of the flat text state. 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. Control Rotation: Set the Rotate Speed (seconds per full turn) and use Toggle Rotations to decide how many spins happen before the scenes switch. Styling: Fully customize the font family, weight, size, and color to match your brand's aesthetic.

Introduction

Dual-State 3D Sphere Text

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300136748/148/228/309/79/15
  • All · #3018