baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

set up new workflow and migrate to .forgejo dir (#5)
Some checks failed
Deploy / deploy (push) Failing after 39s
Details

Browse source 
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com>
Reviewed-on: #5
This commit is contained in:
Benjamin Palko 2026-08-11 20:55:29 -04:00
parent c37955c51b
commit f526f5c0aa
99 changed files with 1866 additions and 1470 deletions
Download patch file Download diff file Expand all files Collapse all files

78
.opencode/skills/daisyui/components/text-rotate.md
View file

@ -1,66 +1,76 @@
### text-rotate
Text Rotate can show up to 6 lines of text, one at a time, with an infinite loop animation. Duration is 10 seconds by default. The animation will pause on hover.
[text-rotate docs](https://daisyui.com/components/text-rotate/)
#### Class Names:
- Component: `text-rotate`
#### Syntax
```html
<span class="text-rotate">
<span>
<span>Word 1</span>
<span>Word 2</span>
<span>Word 3</span>
<span>Word 4</span>
<span>Word 5</span>
<span>Word 6</span>
</span>
<span>
<span>Word 1</span>
<span>Word 2</span>
<span>Word 3</span>
<span>Word 4</span>
<span>Word 5</span>
<span>Word 6</span>
</span>
</span>
```
Example:
Big font size, horizontally centered
```html
<span class="text-rotate max-md:text-3xl text-7xl font-title">
<span class="justify-items-center">
<span>DESIGN</span>
<span>DEVELOP</span>
<span>DEPLOY</span>
<span>SCALE</span>
<span>MAINTAIN</span>
<span>REPEAT</span>
</span>
<span class="text-rotate font-title text-7xl max-md:text-3xl">
<span class="justify-items-center">
<span>DESIGN</span>
<span>DEVELOP</span>
<span>DEPLOY</span>
<span>SCALE</span>
<span>MAINTAIN</span>
<span>REPEAT</span>
</span>
</span>
```
Rotating words in a sentence, different colors for each word
```html
<span>
Providing AI Agents for
<span class="text-rotate">
<span>
<span class="bg-teal-400 text-teal-800 px-2">Designers</span>
<span class="bg-red-400 text-red-800 px-2">Developers</span>
<span class="bg-blue-400 text-blue-800 px-2">Managers</span>
</span>
</span>
Providing AI Agents for
<span class="text-rotate">
<span>
<span class="bg-teal-400 px-2 text-teal-800">Designers</span>
<span class="bg-red-400 px-2 text-red-800">Developers</span>
<span class="bg-blue-400 px-2 text-blue-800">Managers</span>
</span>
</span>
</span>
```
Custom line height in case you have a tall font or need more vertical spacing between lines
```html
<span class="text-rotate max-md:text-3xl text-7xl font-title leading-[2]">
<span class="justify-items-center">
<span>DESIGN</span>
<span>DEVELOP</span>
<span>DEPLOY</span>
<span>SCALE</span>
<span>MAINTAIN</span>
<span>REPEAT</span>
</span>
<span class="text-rotate font-title text-7xl leading-[2] max-md:text-3xl">
<span class="justify-items-center">
<span>DESIGN</span>
<span>DEVELOP</span>
<span>DEPLOY</span>
<span>SCALE</span>
<span>MAINTAIN</span>
<span>REPEAT</span>
</span>
</span>
```
#### Rules
- `text-rotate` must have one span or div inside it that contains 2 to 6 spans/divs for each line of text
- Total duration of the loop is 10000 milliseconds by default
- You can set custom duration using `duration-{value}` utility class, where value is in milliseconds (e.g. `duration-12000` for 12 seconds)