Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/tilt-3d
Add tactile depth to a hero card or cover image: it tilts in 3D toward the pointer with a soft glare. Keep the max angle small (~10°) and reserve it for one or a few hero cards, not a grid. Flat under prefers-reduced-motion and on touch.
Passed 20 of 22 test cases with the skill, and 8 of 22 without it.
and 15 more in the full report
12 fixed8 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
When choosing a numeric value for the data-tilt-max attribute on a hero card, what upper bound should you not exceed to avoid extreme visual distortion?
| Checked | Without skill | With skill |
|---|---|---|
| States that data-tilt-max should be kept in the 8 to 10 range. | Missed | Passed |
The instructions your model reads when the skill loads.
A card that tilts in 3D toward the pointer. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by vanilla-tilt.js, reimplemented dependency-free.
tilt-3d.css and tilt-3d.js into the project, and link them.<div class="tilt" data-tilt-max="10"> … </div>
.tilt. Keep data-tilt-max small (8–10). Resets flat on pointerleave.prefers-reduced-motion and on (hover: none) touch devices.transform: rotateX/rotateY + a masked glare only — GPU-safe.attachTilt(ref.current) in useEffect, guarded by the same checks.test cases passed, vs 8 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.