01 / 03

Try an effect.Get the prompt.

Browse effects

Make it yours

Travel distance

Duration

The prompt changes with you.

Copy this prompt

The prompt changes with the effect you choose. View Hover lift

Small details. A different feeling.

Hover to try. Open one to tune it to your project.

Hover lift

A small lift when you hover or focus.

Soft reveal

Fade in and settle gently into place.

Frosted glass

Let the background through. Keep type crisp.

Reduced motion is on. Previews stay still; every prompt includes the same option.

Read the full prompt Hover lift

Copy this description into your AI tool alongside the component you want to change.

Create a Hover lift effect using my project's existing stack.

Keep my content, typography, colors, and layout. Apply the effect to my existing card; do not recreate the Tomoyo demo artwork or add a component library.

On hover or visible keyboard focus, translate the card upward 6px, scale to 1 and rotate 0deg without changing layout. Transition transform and box-shadow over 240ms using cubic-bezier(0.16, 1, 0.3, 1). Resting shadow: 0 20px 32px rgba(4, 25, 72, 0.32); lifted shadow: 0 28px 44px rgba(4, 25, 72, 0.38). Return smoothly on leave or blur. A tap or Replay demonstrates lift, hold and return once in 960ms.

Keep the pointer hit area stationary and animate its inner visual surface. Continue from the current visual frame when switching effects; cancel superseded animations. Repeated Replay clicks during playback must not restart the animation or make it flash.

Respect prefers-reduced-motion: skip movement and fades, show all content immediately, and retain a clear focus indicator. A glass surface may remain static. Support keyboard and touch input. Keep the animation local to this component.

Implement the change, then tell me which parameters to adjust and how you verified the behavior.

Use this effectin your project.

Each preview has a prompt with the behavior and timing written out. Copy it into the AI tool you already use.

01
Try a preview
Pick an effect, then hover, focus, or tap the card. Use Replay if you want another look.
02
Copy its prompt
The full prompt includes timing, interaction and accessibility details. You can read it before copying.
03
Give it to your AI
Paste the prompt alongside the component you want to change. It asks the AI to keep your content and design, then apply the effect.

Try an effect.Get the prompt.

Small details. A different feeling.

Hover lift

Soft reveal

Frosted glass

Use this effectin your project.

Try a preview

Copy its prompt

Give it to your AI