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

30
.opencode/skills/daisyui/components/hover-3d.md
View file

@ -1,5 +1,6 @@
### hover-3d
Hover 3D is a wrapper component that adds a 3D hover effect to its content. When we hover over the component, it tilts and rotates based on the mouse position, creating an interactive 3D effect.
Hover 3D is a wrapper component that adds a 3D hover effect to its content. When we hover over the component, it tilts and rotates based on the mouse position, creating an interactive 3D effect.
`hover-3d` works by placing 8 hover zones on top of the content. Each zone detects mouse movement and applies a slight rotation to the content based on the mouse position within that zone. The combined effect of all 8 zones creates a smooth and responsive 3D tilt effect as the user moves their mouse over the component.
@ -8,26 +9,29 @@ Only use non-interactive content inside the `hover-3d` wrapper. If you want to m
[hover-3d docs](https://daisyui.com/components/hover-3d/)
#### Class names
- component: `hover-3d`
#### Syntax
```html
<div class="hover-3d my-12 mx-2">
<figure class="max-w-100 rounded-2xl">
<img src="https://img.daisyui.com/images/stock/creditcard.webp" alt="Tailwind CSS 3D card" />
</figure>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="hover-3d mx-2 my-12">
<figure class="max-w-100 rounded-2xl">
<img src="https://img.daisyui.com/images/stock/creditcard.webp" alt="Tailwind CSS 3D card" />
</figure>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
```
#### Rules
- hover-3d can be a `<div>` or a `<a>`
- hover-3d must have exactly 9 direct children where the first child is the main content and the other 8 children are empty `<div>`s for hover zones
- content inside hover-3d should be non-interactive (no buttons, links, inputs, etc)