# 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

![](/files/dLKkWRFDnF8e94aAPcmD)
{% 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

![](/files/GQR3a2QXq0P3XJ1P7Yax)

![](/files/lpKwM8CGfeADDcMkDIVZ)
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eridian.xyz/design-dev/designedto.work/rotating-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.