Soft Ripple Effect est une couche visuelle conçue pour se superposer à n'importe quel Stack ou Frame sans modifier son contenu. L'effet s'adapte automatiquement à la surface en arrière-plan : ombre subtile sur les fonds clairs ou colorés, ou halo lumineux sur les fonds sombres.

Features

Apparence

• Modes Light et Dark avec adaptation automatique du mode de fusion

• Taille de départ et d'arrivée ajustables

• Vitesse et opacité personnalisables

• Fonctionne aussi bien sur des fonds unis que sur des images

Animation

• Origine configurable : centre, point d'entrée ou suivi du curseur

• Fréquence de déclenchement ajustable avec le mode Follow Cursor

• Déclenchement au tap sur les appareils tactiles

• Effet léger basé sur une image PNG intégrée, sans shader WebGL ni boucle de rendu permanente

Note d'usage

Soft Ripple Effect fonctionne comme une simple couche d'overlay et n'interfère pas avec le contenu situé en dessous. Les textes restent sélectionnables et les boutons ou liens restent entièrement interactifs.

Pour que le mode de fusion fonctionne correctement, placez le composant en position Absolute, passez ses quatre côtés à 0 et laissez le champ Z-Index vide dans Styles → Position. Une valeur explicite, même 0, peut empêcher l'effet de se mélanger correctement avec l'arrière-plan.

Installation

1. Glissez Ripple Effect dans un Stack ou Frame disposant déjà d'un arrière-plan

2. Passez le composant en position Absolute

3. Laissez le champ Z-Index vide dans Styles → Position

4. Choisissez Light ou Dark et ajustez l'origine, la taille, la vitesse et l'opacité

5. Publiez