Ripple

An animated ripple effect typically used behind elements to emphasize them.

Ripple

Edit on GitHub

Copy code

Show code

<script setup lang="ts">
import Ripple from "@/components/ripple/ripple.vue";
</script>

<template>
  <div class="grid place-items-center w-full min-h-screen">
    <div
      class="relative flex h-[500px] w-full max-w-lg flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl"
    >
      <p
        class="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white dark:text-white"
      >
        Ripple
      </p>
      <Ripple />
    </div>
  </div>
</template>

Installation

Copy and paste the following code into your project:

ripple.vue

<script setup lang="ts">
import { cn } from "@/lib/utils";

interface RippleProps {
  mainCircleSize?: number;
  mainCircleOpacity?: number;
  numCircles?: number;
  class?: string;
}

const props = withDefaults(defineProps<RippleProps>(), {
  mainCircleSize: 210,
  mainCircleOpacity: 0.24,
  numCircles: 8,
});
</script>

<template>
  <div
    :class="
      cn(
        'absolute inset-0 bg-white/5 [mask-image:linear-gradient(to_bottom,white,transparent)]',
        props.class,
      )
    "
  >
    <div v-for="(_, i) in Array.from({ length: props.numCircles })" :key="i">
      <div
        :key="i"
        :class="`absolute animate-ripple rounded-full bg-foreground/25 shadow-xl border [--i:${i}]`"
        :style="{
          width: `${props.mainCircleSize + i * 70}px`,
          height: `${props.mainCircleSize + i * 70}px`,
          opacity: props.mainCircleOpacity - i * 0.03,
          animationDelay: `${i * 0.06}s`,
          borderStyle: i === props.numCircles - 1 ? 'dashed' : 'solid',
          borderWidth: '1px',
          borderColor: `hsl(var(--foreground), ${5 + (i * 5) / 100})`,
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%) scale(1)',
        }"
      />
    </div>
  </div>
</template>

Add the following code to your ./src/assets/css/tailwind.css file:

tailwind.css

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

Then, add the following colors and animations to your tailwind.config.js file:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
      },
      animation: {
        ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
      },
      keyframes: {
        ripple: {
          "0%, 100%": {
            transform: "translate(-50%, -50%) scale(1)",
          },
          "50%": {
            transform: "translate(-50%, -50%) scale(0.9)",
          },
        },
      },
    },
  },
};

Props

Prop	Type	Default	Description
mainCircleSize	number	210	The size of the main circle in pixels
mainCircleOpacity	number	0.24	The opacity of the main circle
numCircles	number	8	The number of ripple circles to render