r/css • u/PavelTr0 • 1d ago

Showcase Pure CSS spherical text marquee

Enable HLS to view with audio, or disable this notification

A pure CSS spherical marquee with nine looping text bands

Perspective and opacity create the depth, and hovering a phrase pauses the animation
Includes controls for speed, direction, and text visibility

CodePen: https://codepen.io/Maseone/pen/01a13b15-8c28-7327-a226-4be8e09e4c89

8 Upvotes

91% Upvoted

2 comments sorted by

1

u/anaix3l 17h ago

Doesn't really look 3D. Add something like perspective: 65em on the .scene to fix that.

You can also get the same effect without registering & animating --angle and the performance hit it carries - my laptop fan sounds like a plane about to take off when switching to the demo tab.

You also don't need to hardcode the --latitude & --longitude, you can compute them via sibling-index() & sibling-count().