# Rotating Text

## Interactive Design

{% embed url="<https://www.designedto.work/design/rotating-text>" %}

## Code

{% embed url="<https://github.com/EridianAlpha/DesignedTo.Work/tree/main/components/designs/rotating-text>" %}

## Design Notes

* **Use rotating text as an accent, not content.** It works best for short labels, headlines, or calls-to-action, not paragraphs or instructions.
* **Only rotate when it adds meaning or saves space.** Good for side labels, visual hierarchy, or tight layouts.
* **Prioritize readability.** Keep text short, high-contrast, and at sensible angles (usually 90° or subtle animation, not arbitrary rotations).
* **Be responsive and adaptive.** Rotating text can work well on large screens but should often fall back to horizontal or simpler motion on mobile.
* **Use motion carefully.** Animations should be smooth, predictable, and slow enough to read. Rotating text should never block or compete with core UI elements.

## Design Ideas

{% hint style="info" %}
**React Bits**

<https://www.reactbits.dev/text-animations/rotating-text>

* Pros:
  * Looks good with the spring animation
  * Each character moves independently
* Cons:
  * Text covered by the vertical padding during transition

![](https://1701252977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvMDdKNXxwPwb5xekxw5H%2Fuploads%2FY9WKFVoft4IbBu6ldAE0%2FReactBitsRotatingText.gif?alt=media\&token=c92a03cd-796f-4aa9-a96e-0a9632bbf865)
{% endhint %}

{% hint style="info" %}
**DeFi Saver**

[https://defisaver.com](https://defisaver.com/)

* Vertical rotation used for large screens
* Linear typing effect used on small screens

![](https://1701252977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvMDdKNXxwPwb5xekxw5H%2Fuploads%2F3UO6u2nB7FzjTFJXwblr%2FDefiSaverRotatingText.gif?alt=media\&token=fe4cd18c-58f8-46da-8e23-fbeda5dadcce)

![](https://1701252977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvMDdKNXxwPwb5xekxw5H%2Fuploads%2Fea4qhVQoV3m1XcGSSV7X%2FDefiSaverTypingText.gif?alt=media\&token=facd3861-938c-424c-9ebf-48def8eed0ed)
{% endhint %}