01 / 03

Try an effect. Get the prompt.

Three examples you can interact with

See how each
effect changes
the same card.

Copy this prompt

The prompt changes with the effect you choose.

Motion01

How elements moveand respond to input.

Slide in
Fade in
Parallax

Style02

How text and elementschange their appearance.

Underline grow
Blur to sharp
Scale on hover

Material03

Glass, grain and layersfor the surface of an interface.

Grain texture
Glow
Layered cards

Underlined examples open a preview. The other terms are here for reference.

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.

Add a subtle hover lift to the card. On pointer hover and visible keyboard focus, translate it upward by 6px without changing the layout. Transition transform and box-shadow over 240ms using cubic-bezier(0.16, 1, 0.3, 1). The resting shadow is 0 20px 32px rgba(4, 25, 72, 0.32); the lifted shadow is 0 28px 44px rgba(4, 25, 72, 0.38). Return smoothly to the resting state on pointer leave or blur. Provide a tap or Replay control that demonstrates rest, 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.

Motion01

Style02

Material03

Use this effectin your project.

Try a preview

Copy its prompt

Give it to your AI