Animated Waves

Beautiful, customizable animated wave components for modern web interfaces. Clean, performant, and easy to integrate.

View Examples ↓

Installation

Add animated waves to your project with a single script tag.

CDN Import

<script src="https://creamcitycoding.com/cdn/aw.js"></script>

Examples

See animated waves in action with different configurations and use cases.

Basic Usage

Simple top waves with default settings

<animated-waves position="top" speed="0.6"></animated-waves>

Framed Content

Content beautifully framed by waves above and below

Framed Content

Your content goes here

 
<animated-waves 
    position="both" 
    wave-color="rgba(59, 130, 246, 0.4)" 
    wave-height="100px"
    content-padding="40px"
    content-background-color="rgba(59, 130, 246, 0.1)"
    speed="0.7">
    <div>Your content here</div>
</animated-waves>

Bottom Waves

Bottom waves with custom styling

Content Above

Waves flow below

<animated-waves 
    position="bottom" 
    wave-color="rgba(255, 255, 255, 0.3)" 
    wave-height="80px"
    speed="0.8"
    animation-style="gentle">
</animated-waves>

Advanced Configuration

Multiple waves with custom opacity and animation style

Advanced Waves

Multiple layers with custom settings

 
<animated-waves 
    position="both" 
    wave-color="rgba(168, 85, 247, 0.4)" 
    wave-count="6"
    wave-height="120px"
    speed="0.5"
    opacity-range="0.2,0.8"
    animation-style="bouncy"
    content-padding="50px"
    content-background-color="rgba(168, 85, 247, 0.1)">
    <div>Your content here</div>
</animated-waves>

Responsive Factor

Control how aggressively waves scale down on smaller screens

More Aggressive Scaling

responsive="aggressive"

<animated-waves 
    position="top" 
    wave-color="rgba(34, 197, 94, 0.6)" 
    wave-height="140px"
    responsive-factor="0.5"
    speed="0.7">
</animated-waves>

Properties Reference

Complete list of available properties and their configurations.

Property Type Default Description
position string "top" Controls wave placement: "top", "bottom", or "both"
wave-height string "100px" Height of each wave section (only for "both" position)
content-padding string "20px" Padding around content area (only for "both" position)
content-background-color string matches wave-color Background color of content area (only for "both" position)
wave-color string "#1A237E" Color of the waves
background-color string "transparent" Background color of the container
height string "15vh" Height of the wave container (for "top"/"bottom" only)
speed number 1 Animation speed multiplier (higher = faster)
opacity-range string "0.3,0.9" Min,max opacity for waves (format: "min,max")
wave-count number 4 Number of wave layers
animation-style string "smooth" Animation easing: "smooth", "linear", "ease-in-out", "bouncy", "gentle"
responsive boolean true Enable responsive wave heights for different screen sizes
responsive-factor number 1 Controls how aggressively waves scale down (0.5 = more aggressive, 2.0 = less aggressive)