Hover lift

A small lift when you hover or focus.

Hover, focus or tap the card

Adjust effect

Start with a preset

QuietLiftPlayful

Your settings are included in the prompt.

Movement

Travel distance

Hover scale

Rotation

Shadow strength

Timing

Duration

Easing

Ease outEase in/outLinear

Prompt language

Lift by 6px over 240ms, then return smoothly.

Use this effect in your project

This prompt uses your current settings and asks the AI to keep your existing content and design.

Prompt · English

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.

Prompt · EN