Third-party plugins

Wave Effect

Enhance user interaction by adding smooth, animated wave effects to your components using Nodewave.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://fians.github.io/Waves/" target="_blank" class="link link-primary font-semibold">Waves</a> with Semji.

<head>
  <link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />
</head>
<body>
  <script type="text/javascript" src="../path/to/waves.min.js"></script>
</body>
JavaScript
// Waves Initialization
Waves.init()
Waves.attach('.waves')

Basic example

Default

Use the `waves` class to implement the default ripple effect.

Color

Semantic colors

Combine the `waves` class with `waves-{semantic color}` to implement colored wave effects.

Custom colors

To customize the ripple color, apply the `waves` class alongside the `--wave-color` CSS variable.

Illustration

Buttons

Example of wave effect applied to buttons.

Icons

Example of wave effect applied to icon buttons.

Card

Example of wave effect applied to card.

Welcome to Our Service

Discover the features and benefits that our service offers. Enhance your experience with our user-friendly platform designed to meet all your needs.

Image

Example of wave effect applied to images.

flower image