Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.readdy.ai/llms.txt

Use this file to discover all available pages before exploring further.

Readdy Effects is a prompt library for website motion. You can browse examples, copy a prompt, and adapt it in Readdy. With Readdy Effects, you can:
  • Explore text effects: Add motion to headlines, labels, and short UI copy
  • Animate images: Make hero visuals, banners, and media sections feel more dynamic
  • Improve interactions: Add hover states, button feedback, and lightweight micro-interactions

​
Before You Start

This works best after your layout is in place. To animate a specific element, use Selector first.
Before you begin, make sure:
  • You know which section or element should animate
  • You know whether you need a text, image, or interaction effect
  • You start with one effect at a time

​
How It Works

1

Open Readdy Effects

Open Readdy Effects and browse the examples.
Readdy Effects homepage with the hero area, top navigation, and effect categories
2

Choose an effect category

Choose the category that fits your goal:
  • Text Effects for headlines, labels, and short copy
  • Image Effects for hero visuals, banners, and media blocks
  • Interactive Animations for buttons, cards, hover states, and feedback
Readdy Effects category tabs showing Text Effects, Image Effects, and Interactive Animations
3

Copy a prompt that matches your layout

Open an effect, click View Prompt, and copy the prompt. Then adjust it to fit your content, tone, and target element.
An effect card in Readdy Effects with View Prompt expanded
4

Target the right area in Readdy

In Readdy, decide how narrow the change should be.
  1. For a specific element, turn on Selector and select it first.
  2. For a section-level effect, name the section clearly.
  3. For page-wide motion, say exactly where it should and should not appear.
The Readdy editor with Selector enabled and the target element highlighted
5

Paste the prompt and refine it

Paste the prompt into Readdy and refine the result. If the motion is too strong, ask for a subtler, slower, or hover-only version.

​
Prompt Tips

Start with the Readdy Effects prompt, then add:
  • Target: Which element should animate
  • Trigger: When it should happen
  • Style: Subtle, playful, smooth, energetic, premium, and so on
  • Limit: Loop, once, or hover only
Example refinements: 
Apply this effect only to the hero headline. Keep it subtle and premium, and do not animate the rest of the section.

Use this hover effect for the pricing cards, but reduce the movement distance and keep the transition smooth.

Add this animation to the CTA button only when users hover over it. Do not add auto-looping motion.

​
Best Practices

  • Start with one focal animation, such as a headline, hero image, or CTA button
  • Match the effect to the content type instead of reusing the same motion everywhere
  • Keep marketing pages subtle so motion supports the message
  • If the first result is close, refine the same prompt instead of rewriting it

​
FAQ

Yes. This is often the easiest way to add motion without changing the layout.
Narrow the scope. Tell Readdy exactly what should animate and what should stay static.
Ask Readdy to reduce the intensity, shorten the duration, remove looping, or trigger it only on hover or in view.
Start with one effect at a time. Once it looks right, add the next one.

​
Need Help?

If this guide doesn’t resolve your issue, submit a support ticket. We’re here to help!